@allxsmith/bestax-bulma 1.0.0

package/dist/types/form/Field.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Field component.
+ *
+ * @property {boolean} [horizontal] - Renders the field as horizontal (label and control side by side).
+ * @property {boolean|'centered'|'right'|'multiline'} [grouped] - Group controls in a row (optionally centered, right, or multiline).
+ * @property {boolean} [hasAddons] - Group controls as addons.
+ * @property {React.ReactNode} [label] - Field label.
+ * @property {'small'|'normal'|'medium'|'large'} [labelSize] - Size for the label.
+ * @property {object} [labelProps] - Props for the label element.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color for the field.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color for the field.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color for the field.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Field content.
+ */
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    horizontal?: boolean;
+    grouped?: boolean | 'centered' | 'right' | 'multiline';
+    hasAddons?: boolean;
+    label?: React.ReactNode;
+    labelSize?: 'small' | 'normal' | 'medium' | 'large';
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Props for the FieldLabel component.
+ *
+ * @property {'small'|'normal'|'medium'|'large'} [size] - Size for the field label.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color for the label.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color for the label.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color for the label.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Field label content.
+ */
+export interface FieldLabelProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    size?: 'small' | 'normal' | 'medium' | 'large';
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Props for the FieldBody component.
+ *
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color for the field body.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color for the field body.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color for the field body.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Field body content.
+ */
+export interface FieldBodyProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * FieldLabel component for rendering a Bulma field label.
+ *
+ * @function
+ * @param {FieldLabelProps} props - Props for the FieldLabel component.
+ * @returns {JSX.Element} The rendered field label.
+ */
+declare const FieldLabel: React.FC<FieldLabelProps>;
+/**
+ * FieldBody component for rendering Bulma field body.
+ *
+ * @function
+ * @param {FieldBodyProps} props - Props for the FieldBody component.
+ * @returns {JSX.Element} The rendered field body.
+ */
+declare const FieldBody: React.FC<FieldBodyProps>;
+/**
+ * Field component for rendering a Bulma field container.
+ * Supports horizontal, grouped, and labelled fields.
+ *
+ * @function
+ * @param {FieldProps} props - Props for the Field component.
+ * @returns {JSX.Element} The rendered field container.
+ * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}
+ */
+declare const Field: React.FC<FieldProps> & {
+    Label: typeof FieldLabel;
+    Body: typeof FieldBody;
+};
+export default Field;

package/dist/types/form/File.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the File component.
+ *
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'|'black'|'dark'|'light'|'white'} [color] - Bulma color modifier for the file input.
+ * @property {'small'|'medium'|'large'} [size] - Size modifier for the file input.
+ * @property {boolean} [isBoxed] - Whether the file input is boxed.
+ * @property {boolean} [isFullwidth] - Whether the file input expands to full width.
+ * @property {boolean} [isRight] - Align file input to the right.
+ * @property {boolean} [isCentered] - Center the file input.
+ * @property {boolean} [hasName] - Show a file name indicator.
+ * @property {React.ReactNode} [label] - Custom label text or node.
+ * @property {React.ReactNode} [iconLeft] - Left icon element.
+ * @property {React.ReactNode} [iconRight] - Right icon element.
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {string} [inputClassName] - Additional CSS classes for the input.
+ * @property {string} [fileName] - File name to display.
+ */
+export interface FileProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'type'>, Omit<BulmaClassesProps, 'color'> {
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    size?: 'small' | 'medium' | 'large';
+    isBoxed?: boolean;
+    isFullwidth?: boolean;
+    isRight?: boolean;
+    isCentered?: boolean;
+    hasName?: boolean;
+    label?: React.ReactNode;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    className?: string;
+    inputClassName?: string;
+    fileName?: string;
+}
+/**
+ * Bulma File upload component with full Bulma helper class support.
+ * isRight and isCentered are mutually exclusive (Bulma spec).
+ *
+ * @function
+ * @param {FileProps} props - Props for the File component.
+ * @returns {JSX.Element} The rendered file upload field.
+ * @see {@link https://bulma.io/documentation/form/file/ | Bulma File documentation}
+ */
+declare const File: React.ForwardRefExoticComponent<FileProps & React.RefAttributes<HTMLInputElement>>;
+export default File;

package/dist/types/form/Input.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Input component.
+ *
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'|'black'|'dark'|'light'|'white'} [color] - Bulma color modifier for the input.
+ * @property {'small'|'medium'|'large'} [size] - Size modifier for the input.
+ * @property {boolean} [isRounded] - Renders the input with rounded corners.
+ * @property {boolean} [isStatic] - Renders the input as static text.
+ * @property {boolean} [isHovered] - Applies the hovered state.
+ * @property {boolean} [isFocused] - Applies the focused state.
+ * @property {boolean} [isLoading] - Shows loading indicator.
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {boolean} [disabled] - Whether the input is disabled.
+ * @property {boolean} [readOnly] - Whether the input is read-only.
+ */
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    size?: 'small' | 'medium' | 'large';
+    isRounded?: boolean;
+    isStatic?: boolean;
+    isHovered?: boolean;
+    isFocused?: boolean;
+    isLoading?: boolean;
+    className?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+/**
+ * Bulma Input component with full Bulma helper class support.
+ *
+ * @function
+ * @param {InputProps} props - Props for the Input component.
+ * @returns {JSX.Element} The rendered input element.
+ * @see {@link https://bulma.io/documentation/form/input/ | Bulma Input documentation}
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/types/form/Radio.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Radio component.
+ *
+ * @property {boolean} [disabled] - Whether the radio is disabled.
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {React.ReactNode} [children] - The label/content for the radio.
+ * @see Bulma Radio documentation: https://bulma.io/documentation/form/radio/
+ */
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'>, Omit<BulmaClassesProps, 'color'> {
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Bulma Radio component with Bulma helper classes support.
+ * The label is provided via the children prop.
+ *
+ * @function
+ * @param {RadioProps} props - Props for the Radio component.
+ * @returns {JSX.Element} The rendered radio element.
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/dist/types/form/Radios.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Radios component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {React.ReactNode} children - Radio elements to render in the group.
+ */
+export interface RadiosProps extends Omit<BulmaClassesProps, 'color'> {
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * Wraps Radio components inside a Bulma 'radios' wrapper.
+ * Leverages useBulmaClasses for consistency with other components.
+ *
+ * @function
+ * @param {RadiosProps} props - Props for the Radios component.
+ * @returns {JSX.Element} The rendered radios group.
+ * @see {@link https://bulma.io/documentation/form/radio/#grouped-radios | Bulma Radios documentation}
+ */
+declare const Radios: React.FC<RadiosProps>;
+export default Radios;

package/dist/types/form/Select.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Select component.
+ *
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'|'black'|'dark'|'light'|'white'} [color] - Bulma color modifier for the select.
+ * @property {'small'|'medium'|'large'} [size] - Size modifier for the select.
+ * @property {boolean} [isRounded] - Renders the select with rounded corners.
+ * @property {boolean} [isLoading] - Shows loading indicator.
+ * @property {boolean} [isActive] - Applies Bulma's is-active modifier.
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {boolean} [disabled] - Whether the select is disabled.
+ * @property {boolean} [multiple] - Whether the select allows multiple values.
+ * @property {number} [multipleSize] - For multiple select: number of visible options.
+ * @property {React.ReactNode} [children] - Option elements.
+ */
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    size?: 'small' | 'medium' | 'large';
+    isRounded?: boolean;
+    isLoading?: boolean;
+    isActive?: boolean;
+    className?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    multipleSize?: number;
+    children?: React.ReactNode;
+}
+/**
+ * Bulma Select component with full Bulma helper class support.
+ *
+ * @function
+ * @param {SelectProps} props - Props for the Select component.
+ * @returns {JSX.Element} The rendered select element.
+ * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}
+ */
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/types/form/TextArea.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the TextArea component.
+ *
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'|'black'|'dark'|'light'|'white'} [color] - Bulma color modifier for the textarea.
+ * @property {'small'|'medium'|'large'} [size] - Size modifier for the textarea.
+ * @property {boolean} [isRounded] - Renders the textarea with rounded corners.
+ * @property {boolean} [isStatic] - Renders the textarea as static text.
+ * @property {boolean} [isHovered] - Applies the hovered state.
+ * @property {boolean} [isFocused] - Applies the focused state.
+ * @property {boolean} [isLoading] - Shows loading indicator.
+ * @property {boolean} [isActive] - Applies Bulma's is-active modifier.
+ * @property {boolean} [hasFixedSize] - Applies Bulma's has-fixed-size modifier.
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {boolean} [disabled] - Whether the textarea is disabled.
+ * @property {boolean} [readOnly] - Whether the textarea is read-only.
+ * @property {number} [rows] - Number of visible text lines.
+ */
+export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    size?: 'small' | 'medium' | 'large';
+    isRounded?: boolean;
+    isStatic?: boolean;
+    isHovered?: boolean;
+    isFocused?: boolean;
+    isLoading?: boolean;
+    isActive?: boolean;
+    hasFixedSize?: boolean;
+    className?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    rows?: number;
+}
+/**
+ * Bulma TextArea component with full Bulma helper class support.
+ *
+ * @function
+ * @param {TextAreaProps} props - Props for the TextArea component.
+ * @returns {JSX.Element} The rendered textarea element.
+ * @see {@link https://bulma.io/documentation/form/textarea/ | Bulma Textarea documentation}
+ */
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Type for grid cell span values.
+ */
+export type CellSpanValue = number;
+/**
+ * Props for the Cell component.
+ *
+ * @property {number} [colStart] - Which column the cell starts at (Bulma: is-col-start-x).
+ * @property {number} [colFromEnd] - Which column the cell ends at, counting from the end (Bulma: is-col-from-end-x).
+ * @property {CellSpanValue} [colSpan] - How many columns the cell will span (Bulma: is-col-span-x).
+ * @property {number} [rowStart] - Which row the cell starts at (Bulma: is-row-start-x).
+ * @property {number} [rowFromEnd] - Which row the cell ends at, counting from the end (Bulma: is-row-from-end-x).
+ * @property {CellSpanValue} [rowSpan] - How many rows the cell will span (Bulma: is-row-span-x).
+ * @property {string} [className] - Additional CSS class names.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color modifier for the cell.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
+ * @property {React.ReactNode} [children] - Children to render inside the cell.
+ */
+export interface CellProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    colStart?: number;
+    colFromEnd?: number;
+    colSpan?: CellSpanValue;
+    rowStart?: number;
+    rowFromEnd?: number;
+    rowSpan?: CellSpanValue;
+    className?: string;
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    children?: React.ReactNode;
+}
+/**
+ * Bulma Cell component for CSS Grid layouts.
+ *
+ * @function
+ * @param {CellProps} props - Props for the Cell component.
+ * @returns {JSX.Element} The rendered grid cell.
+ * @see {@link https://bulma.io/documentation/grid/ | Bulma Grid documentation}
+ */
+export declare const Cell: React.FC<CellProps>;

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Allowed gap values for Bulma grid.
+ */
+export type BulmaGapValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+/**
+ * Allowed minimum column values for Bulma grid.
+ */
+export type BulmaMinColValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32;
+/**
+ * Allowed fixed grid columns for Bulma grid.
+ */
+export type BulmaFixedGridCols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * Allowed fixed grid columns prop for Bulma grid.
+ */
+export type BulmaFixedGridColsProp = BulmaFixedGridCols | 'auto';
+/**
+ * Props for the Grid component.
+ *
+ * @property {boolean} [isFixed] - Use a fixed grid layout (Bulma's .fixed-grid > .grid).
+ * @property {BulmaGapValue} [gap] - Main gap for grid (applies is-gap-X, 0-8).
+ * @property {BulmaGapValue} [columnGap] - Column gap for grid (applies is-column-gap-X, 0-8).
+ * @property {BulmaGapValue} [rowGap] - Row gap for grid (applies is-row-gap-X, 0-8).
+ * @property {BulmaMinColValue} [minCol] - Minimum column width for the grid (applies is-col-min-X, 1-32).
+ * @property {BulmaFixedGridColsProp} [fixedCols] - For fixed grid only: explicit column count (applies has-X-cols, 0-12), or 'auto' for has-auto-count.
+ * @property {BulmaFixedGridCols} [fixedColsMobile] - For fixed grid only: explicit column count for mobile.
+ * @property {BulmaFixedGridCols} [fixedColsTablet] - For fixed grid only: explicit column count for tablet.
+ * @property {BulmaFixedGridCols} [fixedColsDesktop] - For fixed grid only: explicit column count for desktop.
+ * @property {BulmaFixedGridCols} [fixedColsWidescreen] - For fixed grid only: explicit column count for widescreen.
+ * @property {BulmaFixedGridCols} [fixedColsFullhd] - For fixed grid only: explicit column count for fullhd.
+ * @property {string} [className] - Additional CSS class names.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color modifier for the grid.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
+ * @property {React.ReactNode} [children] - Children to render inside the grid.
+ */
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    isFixed?: boolean;
+    gap?: BulmaGapValue;
+    columnGap?: BulmaGapValue;
+    rowGap?: BulmaGapValue;
+    minCol?: BulmaMinColValue;
+    fixedCols?: BulmaFixedGridColsProp;
+    fixedColsMobile?: BulmaFixedGridCols;
+    fixedColsTablet?: BulmaFixedGridCols;
+    fixedColsDesktop?: BulmaFixedGridCols;
+    fixedColsWidescreen?: BulmaFixedGridCols;
+    fixedColsFullhd?: BulmaFixedGridCols;
+    className?: string;
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    children?: React.ReactNode;
+}
+/**
+ * Bulma Grid component for CSS Grid layouts, supports both fixed and responsive grid modes.
+ *
+ * @function
+ * @param {GridProps} props - Props for the Grid component.
+ * @returns {JSX.Element} The rendered grid.
+ * @see {@link https://bulma.io/documentation/grid/ | Bulma Grid documentation}
+ */
+export declare const Grid: React.FC<GridProps>;

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

@@ -0,0 +1,16 @@
+/**
+ * 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;
+export default classNames;

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

@@ -0,0 +1,194 @@
+/**
+ * Valid Bulma color classes.
+ * @example 'primary', 'link', 'info'
+ */
+export declare const validColors: readonly ["primary", "link", "info", "success", "warning", "danger", "black", "black-bis", "black-ter", "grey-darker", "grey-dark", "grey", "grey-light", "grey-lighter", "white", "light", "dark"];
+/**
+ * Valid Bulma color shade suffixes.
+ * @example '00', '05', 'invert'
+ */
+export declare const validColorShades: readonly ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55", "60", "65", "70", "75", "80", "85", "90", "95", "invert"];
+/**
+ * Valid Bulma size classes for margins and paddings.
+ * @example '0', '1', 'auto'
+ */
+export declare const validSizes: readonly ["0", "1", "2", "3", "4", "5", "6", "auto"];
+/**
+ * Valid Bulma text size classes.
+ * @example '1', '2', '3'
+ */
+export declare const validTextSizes: readonly ["1", "2", "3", "4", "5", "6", "7"];
+/**
+ * Valid Bulma text alignment classes.
+ * @example 'centered', 'left', 'right'
+ */
+export declare const validAlignments: readonly ["centered", "justified", "left", "right"];
+/**
+ * Valid Bulma text transformation classes.
+ * @example 'capitalized', 'uppercase', 'italic'
+ */
+export declare const validTextTransforms: readonly ["capitalized", "lowercase", "uppercase", "italic"];
+/**
+ * Valid Bulma text weight classes.
+ * @example 'light', 'normal', 'bold'
+ */
+export declare const validTextWeights: readonly ["light", "normal", "medium", "semibold", "bold"];
+/**
+ * Valid Bulma font family classes.
+ * @example 'sans-serif', 'monospace', 'code'
+ */
+export declare const validFontFamilies: readonly ["sans-serif", "monospace", "primary", "secondary", "code"];
+/**
+ * Valid Bulma display classes.
+ * @example 'block', 'flex', 'inline'
+ */
+export declare const validDisplays: readonly ["block", "flex", "inline", "inline-block", "inline-flex"];
+/**
+ * Valid Bulma visibility classes.
+ * @example 'hidden', 'sr-only'
+ */
+export declare const validVisibilities: readonly ["hidden", "sr-only"];
+/**
+ * Valid Bulma flex direction classes.
+ * @example 'row', 'column', 'row-reverse'
+ */
+export declare const validFlexDirections: readonly ["row", "row-reverse", "column", "column-reverse"];
+/**
+ * Valid Bulma flex wrap classes.
+ * @example 'nowrap', 'wrap', 'wrap-reverse'
+ */
+export declare const validFlexWraps: readonly ["nowrap", "wrap", "wrap-reverse"];
+/**
+ * Valid Bulma justify-content classes.
+ * @example 'flex-start', 'center', 'space-between'
+ */
+export declare const validJustifyContents: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right"];
+/**
+ * Valid Bulma align-content classes.
+ * @example 'flex-start', 'center', 'stretch'
+ */
+export declare const validAlignContents: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "stretch"];
+/**
+ * Valid Bulma align-items classes.
+ * @example 'stretch', 'flex-start', 'center'
+ */
+export declare const validAlignItems: readonly ["stretch", "flex-start", "flex-end", "center", "baseline", "start", "end"];
+/**
+ * Valid Bulma align-self classes.
+ * @example 'auto', 'flex-start', 'center'
+ */
+export declare const validAlignSelfs: readonly ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
+/**
+ * Valid Bulma flex grow and shrink values.
+ * @example '0', '1'
+ */
+export declare const validFlexGrowShrink: readonly ["0", "1"];
+/**
+ * Valid Bulma viewport classes for responsive design.
+ * @example 'mobile', 'tablet', 'desktop'
+ */
+export declare const validViewports: readonly ["mobile", "tablet", "desktop", "widescreen", "fullhd"];
+/**
+ * Props for applying Bulma helper classes to components.
+ */
+export interface BulmaClassesProps {
+    /** Text color class (e.g., 'primary', 'info'). */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color class (e.g., 'primary', 'info'). */
+    backgroundColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Color shade suffix (e.g., '00', 'invert'). */
+    colorShade?: (typeof validColorShades)[number];
+    /** 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];
+    /** 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];
+    /** Display type (e.g., 'block', 'flex'). */
+    display?: (typeof validDisplays)[number];
+    /** Visibility (e.g., 'hidden', 'sr-only'). */
+    visibility?: (typeof validVisibilities)[number];
+    /** 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'). */
+    flexGrow?: (typeof validFlexGrowShrink)[number];
+    /** Flex shrink value (e.g., '0', '1'). */
+    flexShrink?: (typeof validFlexGrowShrink)[number];
+    /** Float direction (e.g., 'left', 'right'). */
+    float?: 'left' | 'right';
+    /** Overflow behavior (e.g., 'clipped'). */
+    overflow?: 'clipped';
+    /** Applies overlay styling if true. */
+    overlay?: boolean;
+    /** Interaction behavior (e.g., 'unselectable', 'clickable'). */
+    interaction?: 'unselectable' | 'clickable';
+    /** Border radius style (e.g., 'radiusless'). */
+    radius?: 'radiusless';
+    /** Shadow style (e.g., 'shadowless'). */
+    shadow?: 'shadowless';
+    /** Responsive behavior (e.g., 'mobile', 'narrow'). */
+    responsive?: 'mobile' | 'narrow';
+    /** Viewport for responsive classes (e.g., 'mobile', 'desktop'). */
+    viewport?: (typeof validViewports)[number];
+}
+/**
+ * A hook that generates Bulma helper classes from props and separates unhandled props.
+ *
+ * @function useBulmaClasses
+ * @param props - Combination of BulmaClassesProps and additional props.
+ * @returns An object containing the Bulma helper classes and unhandled props.
+ * @example
+ * const { bulmaHelperClasses, rest } = useBulmaClasses({
+ *   color: 'primary',
+ *   textSize: '3',
+ *   className: 'custom-class'
+ * });
+ * // bulmaHelperClasses: 'has-text-primary is-size-3'
+ * // rest: { className: 'custom-class' }
+ */
+export declare const useBulmaClasses: <T extends Record<string, unknown>>(props: BulmaClassesProps & T) => {
+    bulmaHelperClasses: string;
+    rest: Omit<T, keyof BulmaClassesProps>;
+};