@allxsmith/bestax-bulma 5.16.4 → 5.16.6

package/dist/types-cjs/form/Rate.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/** Available size modifiers for the Rate component. */
+export type RateSize = 'small' | 'medium' | 'large';
+type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
+type BulmaColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Props for individual rate icons.
+ */
+export interface RateIconProps {
+    /** The index of this icon (0-based) */
+    index: number;
+    /** Whether this icon is currently active (filled) */
+    isActive: boolean;
+    /** Whether this icon is currently hovered */
+    isHovered: boolean;
+    /** The current value */
+    value: number;
+    /** Fill percentage for partial icons (0-100). Used with precision < 1. */
+    fillPercent: number;
+}
+/**
+ * Props for the Rate component.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the container element.
+ */
+export interface RateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, Omit<BulmaClassesProps, 'size'>, FormFieldProps {
+    /** Field label naming the rating group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` container — uses your `labelProps.id` when provided, otherwise a generated one; it also replaces the default `aria-label="Rating"`. Dropped inside an outer `Field` (label that `Field` yourself). */
+    label?: React.ReactNode;
+    /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    /** Form field name. When set, a hidden input is rendered. */
+    name?: string;
+    /** Optional id of the form this hidden input belongs to (use when the input lives outside the form element). */
+    form?: string;
+    /** Controlled value (0 to max). */
+    value?: number;
+    /** Default value for uncontrolled usage. */
+    defaultValue?: number;
+    /** Maximum rating value. */
+    max?: number;
+    /** Size variant. */
+    size?: RateSize;
+    /** Whether the rating is disabled. */
+    disabled?: boolean;
+    /** Show the numeric score next to stars. */
+    showScore?: boolean;
+    /** Show custom text based on value. */
+    showText?: boolean;
+    /** Array of text labels for each rating value. */
+    texts?: string[];
+    /** Callback when rating changes. */
+    onChange?: (value: number) => void;
+    /** Custom icon renderer. */
+    customIcon?: (props: RateIconProps) => React.ReactNode;
+    /** Add spacing between icons. */
+    spaced?: boolean;
+    /** Right-to-left direction. */
+    rtl?: boolean;
+    /** Custom icon name for the rating stars. */
+    iconName?: string;
+    /** Icon library to use (defaults to ConfigProvider value or 'fa'). */
+    iconLibrary?: IconLibrary;
+    /** Icon style variant (e.g., 'solid', 'outlined'). */
+    iconVariant?: string;
+    /** Additional icon modifiers. */
+    iconFeatures?: string | string[];
+    /** Color of the active rating icons. */
+    color?: BulmaColor;
+    /** Rating precision (e.g., `0.5` for half stars). */
+    precision?: number;
+    /** Custom text displayed next to the rating. */
+    customText?: string;
+}
+/**
+ * The `Rate` component provides a star/icon-based rating system.
+ *
+ * @function
+ * @param {RateProps} props - Props for the Rate component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the container element.
+ * @returns {JSX.Element} The rendered rating component.
+ *
+ * @example
+ * // Basic 5-star rating
+ * <Rate defaultValue={3} />
+ *
+ * @example
+ * // With color and precision
+ * <Rate defaultValue={3.5} color="warning" precision={0.5} showScore />
+ *
+ * @example
+ * // With Font Awesome icons
+ * <Rate iconName="star" iconLibrary="fa" iconVariant="solid" />
+ */
+export declare const Rate: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<HTMLDivElement>>;
+export default Rate;

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FieldProps } from './Field.js';
+import { ControlBaseProps } from './Control.js';
+import { SelectBaseProps } from './SelectBase.js';
+/**
+ * Props for the Select component.
+ *
+ * Composes Field, Control, and SelectBase into a single convenience component.
+ * Supports all SelectBase props, plus Field-level (label, horizontal) and
+ * Control-level (icons, loading) props.
+ */
+export interface SelectProps extends SelectBaseProps {
+    /** Field label. Automatically associated with the select via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
+    label?: React.ReactNode;
+    /** Size for the label. */
+    labelSize?: FieldProps['labelSize'];
+    /** Props for the label element when the component renders its own `Field`; dropped inside an outer `Field` (use that `Field`'s `labelProps` instead). An explicit `htmlFor` key — even `undefined` — overrides the automatic association and no id is generated. */
+    labelProps?: FieldProps['labelProps'];
+    /** Horizontal field layout. */
+    horizontal?: boolean;
+    /** Icon props for left icon. */
+    iconLeft?: ControlBaseProps['iconLeft'];
+    /** Shortcut for left icon name. */
+    iconLeftName?: string;
+    /** Shortcut for left icon size. */
+    iconLeftSize?: ControlBaseProps['iconLeftSize'];
+    /** Force left icon container. */
+    hasIconsLeft?: boolean;
+    /** Shows loading indicator. */
+    isLoading?: boolean;
+    /** Expand the control. */
+    isExpanded?: boolean;
+    /** Control size. */
+    controlSize?: ControlBaseProps['size'];
+    /** Help/validation message below the select. */
+    message?: React.ReactNode;
+    /** Bulma color for the message. */
+    messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field. */
+    fieldClassName?: string;
+    /** Additional CSS classes for the Control. */
+    controlClassName?: string;
+}
+/**
+ * The `Select` component provides a Bulma-styled dropdown for selecting one or more options.
+ *
+ * @function
+ * @param {SelectProps} props - Props for Select.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <Select label="Country" iconLeftName="globe">
+ *   <option>United States</option>
+ *   <option>Canada</option>
+ * </Select>
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/types-cjs/form/SelectBase.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Select component.
+ */
+export interface SelectBaseProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
+    /** Bulma color modifier for the select. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Size modifier for the select. */
+    size?: 'small' | 'medium' | 'large';
+    /** Rounded select corners. */
+    isRounded?: boolean;
+    /** Shows loading indicator. */
+    isLoading?: boolean;
+    /** Applies Bulma's is-active modifier. */
+    isActive?: boolean;
+    /** Forces hovered state on the inner select. */
+    isHovered?: boolean;
+    /** Forces focused state on the inner select. */
+    isFocused?: boolean;
+    /** Makes the select span the full width of parent. */
+    isFullwidth?: boolean;
+    /** Makes the select span the full width of parent. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */
+    isFullWidth?: boolean;
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Disables the select. */
+    disabled?: boolean;
+    /** Allows multiple selections. */
+    multiple?: boolean;
+    /** Number of visible options in multiselect. */
+    multipleSize?: number;
+    /** `<option>` elements. */
+    children?: React.ReactNode;
+}
+/**
+ * Bulma Select component with full Bulma helper class support.
+ *
+ * @function
+ * @param {SelectBaseProps} props - Props for the SelectBase component.
+ * @returns {JSX.Element} The rendered select element.
+ * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}
+ */
+export declare const SelectBase: React.ForwardRefExoticComponent<SelectBaseProps & React.RefAttributes<HTMLSelectElement>>;
+export default SelectBase;

package/dist/types-cjs/form/Slider.d.ts

@@ -0,0 +1,141 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/** Valid sizes for the Slider component. */
+export type SliderSize = 'small' | 'medium' | 'large';
+/** Valid colors for the Slider component. */
+export type SliderColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/** Tooltip display mode for the Slider component. */
+export type SliderTooltip = 'auto' | 'always' | 'hidden';
+/** Orientation of the Slider component. */
+export type SliderOrientation = 'horizontal' | 'vertical';
+/**
+ * A tick mark displayed along the Slider track.
+ */
+export interface SliderMark {
+    /** Controlled value. */
+    value: number;
+    /** Optional label rendered below the tick mark. */
+    label?: React.ReactNode;
+}
+/**
+ * Shared base props for single and range Slider modes.
+ */
+interface SliderBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
+    /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the label targets the low (minimum) thumb. Dropped inside an outer `Field` (label that `Field` yourself). */
+    label?: React.ReactNode;
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Step increment (default: 1). */
+    step?: number;
+    /** Size variant. */
+    size?: SliderSize;
+    /** Color variant. */
+    color?: SliderColor;
+    /** Use rounded track ends. */
+    isRounded?: boolean;
+    /** Use circular thumb. */
+    isCircle?: boolean;
+    /** Show current value tooltip. */
+    showOutput?: boolean;
+    /** Controls tooltip visibility on the thumb. */
+    tooltip?: SliderTooltip;
+    /** Shows tick marks along the track. */
+    ticks?: boolean;
+    /** Custom labeled marks along the track. Each mark has `{ value: number; label?: ReactNode }`. */
+    marks?: SliderMark[];
+    /** Orientation of the slider. */
+    orientation?: SliderOrientation;
+    /** Function to scale the displayed value. */
+    scale?: (value: number) => number;
+    /** Function to generate the `aria-valuetext` attribute. */
+    getAriaValueText?: (value: number) => string;
+    /** Format function for output display. */
+    formatOutput?: (value: number) => string;
+}
+/**
+ * Props for the Slider in single-value mode.
+ */
+export interface SliderSingleProps extends SliderBaseProps {
+    /**
+     * Enables range mode with two thumbs.
+     * @defaultValue false
+     */
+    range?: false;
+    /** Controlled value. */
+    value?: number;
+    /**
+     * Default value for uncontrolled usage.
+     * @defaultValue 0
+     */
+    defaultValue?: number;
+    /** Callback when value changes. */
+    onChange?: (value: number) => void;
+    /**
+     * Minimum distance between thumbs in range mode.
+     * @defaultValue 0
+     */
+    minDistance?: never;
+    /** ARIA label(s) for the slider thumb(s). */
+    ariaLabel?: string;
+}
+/**
+ * Props for the Slider in range (dual-thumb) mode.
+ */
+export interface SliderRangeProps extends SliderBaseProps {
+    /**
+     * Enables range mode with two thumbs.
+     * @defaultValue false
+     */
+    range: true;
+    /** Controlled value. */
+    value?: [number, number];
+    /**
+     * Default value for uncontrolled usage.
+     * @defaultValue 0
+     */
+    defaultValue?: [number, number];
+    /** Callback when value changes. */
+    onChange?: (value: [number, number]) => void;
+    /**
+     * Minimum distance between thumbs in range mode.
+     * @defaultValue 0
+     */
+    minDistance?: number;
+    /** ARIA label(s) for the slider thumb(s). */
+    ariaLabel?: [string, string];
+    /** Form field name for the low thumb. Use this in range mode so each thumb submits with its own name. */
+    nameLow?: string;
+    /** Form field name for the high thumb. */
+    nameHigh?: string;
+}
+/**
+ *  Props for the Slider component — a discriminated union of single and range modes.
+ * @extraProp {boolean} [disabled=false] - Whether the slider is disabled.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
+ */
+export type SliderProps = SliderSingleProps | SliderRangeProps;
+/**
+ * The `Slider` component provides a range slider input for selecting values within a range.
+ *
+ * @function
+ * @param {SliderProps} props - Props for the Slider component.
+ * @returns {JSX.Element} The rendered slider element.
+ *
+ * @example
+ * // Basic slider
+ * <Slider defaultValue={50} />
+ *
+ * @example
+ * // Range slider
+ * <Slider range defaultValue={[20, 80]} onChange={([low, high]) => {}} />
+ */
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+export default Slider;

package/dist/types-cjs/form/Switch.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Valid colors for the Switch component.
+ */
+export declare const switchColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Valid sizes for the Switch component.
+ */
+export declare const switchSizes: readonly ["small", "normal", "medium", "large"];
+/**
+ * Props for the Switch component.
+ * @extraProp {boolean} [checked] - Controlled checked state.
+ * @extraProp {boolean} [defaultChecked=false] - Default checked state for uncontrolled usage.
+ * @extraProp {boolean} [disabled=false] - Whether the switch is disabled.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] - Callback when switch state changes.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.
+ */
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /** Color variant for the switch. */
+    color?: (typeof switchColors)[number];
+    /** Size of the switch. */
+    size?: (typeof switchSizes)[number];
+    /** Use rounded switch style. */
+    isRounded?: boolean;
+    /** Use thin switch style. */
+    isThin?: boolean;
+    /** Use outlined switch style. */
+    isOutlined?: boolean;
+    /** Right-to-left layout (label on left). */
+    isRtl?: boolean;
+    /** Color when the switch is in the off/passive state. */
+    passiveType?: (typeof switchColors)[number];
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Label content for the switch. */
+    children?: React.ReactNode;
+}
+/**
+ * The `Switch` component provides a toggle switch for boolean on/off states.
+ *
+ * @function
+ * @param {SwitchProps} props - Props for the Switch component.
+ * @returns {JSX.Element} The rendered switch element.
+ *
+ * @example
+ * // Basic switch
+ * <Switch>Enable notifications</Switch>
+ *
+ * @example
+ * // Colored and rounded switch
+ * <Switch color="success" isRounded checked>
+ *   Active
+ * </Switch>
+ *
+ * @example
+ * // Controlled switch
+ * <Switch
+ *   checked={isEnabled}
+ *   onChange={(e) => setIsEnabled(e.target.checked)}
+ * >
+ *   Feature enabled
+ * </Switch>
+ */
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export default Switch;

package/dist/types-cjs/form/Taginput.d.ts

@@ -0,0 +1,140 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/**
+ * Represents a tag item object with a value and optional label.
+ */
+export interface TaginputItem {
+    /** The tag value. */
+    value: string;
+    /** Display label (optional). */
+    label?: string;
+    [key: string]: unknown;
+}
+/** A tag can be either a TaginputItem object or a plain string. */
+export type TaginputTag = TaginputItem | string;
+type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
+/**
+ * Props for the Taginput component.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.
+ */
+export interface TaginputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when the tag limit is reached (the input is not rendered) and dropped inside an outer `Field`. */
+    label?: React.ReactNode;
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    /** Applied to the inner text input (the labellable control), not the wrapper div. */
+    id?: string;
+    /** The current tags (controlled). */
+    value?: TaginputTag[];
+    /** Default tags (uncontrolled). */
+    defaultValue?: TaginputTag[];
+    /** Autocomplete suggestions. */
+    data?: string[];
+    /** Placeholder text when no tags. */
+    placeholder?: string;
+    /** Object property to use as display field. */
+    field?: string;
+    /** Allow creating new tags not in suggestions. */
+    allowNew?: boolean;
+    /** Allow duplicate tags. */
+    allowDuplicates?: boolean;
+    /** Open autocomplete dropdown on focus. */
+    openOnFocus?: boolean;
+    /** Remove tag on backspace. Default: true. */
+    removeOnKeys?: boolean;
+    /** Keys to confirm tag creation. Default: ['Enter', ',']. */
+    confirmKeys?: string[];
+    /** Show close button on tags. Default: true. */
+    closable?: boolean;
+    /** Attach tags visually. */
+    attached?: boolean;
+    /** Maximum number of tags allowed. */
+    maxTags?: number;
+    /** Maximum length of input. */
+    maxlength?: number;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    /** Whether the input is read-only. */
+    readonly?: boolean;
+    /** Applies rounded corners to the tags. */
+    rounded?: boolean;
+    /** Truncates long tag text with ellipsis. */
+    ellipsis?: boolean;
+    /** Shows a counter of the number of tags. */
+    hasCounter?: boolean;
+    /** Characters that split pasted text into tags. */
+    onPasteSeparators?: string[];
+    /** Validation function called before adding a tag. */
+    beforeAdding?: (tag: string) => boolean;
+    /** Custom function for creating tag objects from input. */
+    createTag?: (input: string) => TaginputTag;
+    /** Keeps the first autocomplete suggestion highlighted. */
+    keepFirst?: boolean;
+    /** Keeps the autocomplete dropdown open after selection. */
+    keepOpen?: boolean;
+    /** Shows a loading indicator. */
+    loading?: boolean;
+    /** ARIA label for tag close buttons. */
+    ariaCloseLabel?: string;
+    /** Icon name for the input field. */
+    icon?: string;
+    /** Icon library to use. */
+    iconLibrary?: IconLibrary;
+    /** Icon style variant (e.g., 'solid', 'outlined'). */
+    iconVariant?: string;
+    /** Additional icon modifiers. */
+    iconFeatures?: string | string[];
+    /** Input color variant. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Tag color variant. */
+    tagColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'dark' | 'light';
+    /** Size variant. */
+    size?: 'small' | 'medium' | 'large';
+    /** Form field name. When set, one hidden input per tag is rendered. */
+    name?: string;
+    /** Optional id of the form the hidden inputs belong to. */
+    form?: string;
+    /** Callback when tags change. */
+    onChange?: (tags: TaginputTag[]) => void;
+    /** Callback when tag is added. */
+    onAdd?: (tag: TaginputTag) => void;
+    /** Callback when tag is removed. */
+    onRemove?: (tag: TaginputTag, index: number) => void;
+    /** Callback when typing in input. */
+    onTyping?: (value: string) => void;
+    /** Custom render for tags. */
+    tagTemplate?: (tag: TaginputTag) => React.ReactNode;
+}
+/**
+ * The `Taginput` component provides a tag/chip input field for managing multiple tags.
+ *
+ * @function
+ * @param {TaginputProps} props - Props for the Taginput component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.
+ * @returns {JSX.Element} The rendered taginput component.
+ *
+ * @example
+ * // Basic usage
+ * <Taginput
+ *   placeholder="Add a tag..."
+ *   onChange={(tags) => console.log(tags)}
+ * />
+ *
+ * @example
+ * // With autocomplete
+ * <Taginput
+ *   data={['React', 'Vue', 'Angular', 'Svelte']}
+ *   allowNew={false}
+ *   placeholder="Select frameworks..."
+ * />
+ */
+export declare const Taginput: React.ForwardRefExoticComponent<TaginputProps & React.RefAttributes<HTMLInputElement>>;
+/** @deprecated Use `Taginput` — same component. */
+export declare const TagInput: React.ForwardRefExoticComponent<TaginputProps & React.RefAttributes<HTMLInputElement>>;
+/** @deprecated Use `TaginputProps`. */
+export type TagInputProps = TaginputProps;
+export default Taginput;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { FieldProps } from './Field.js';
+import { ControlBaseProps } from './Control.js';
+import { TextAreaBaseProps } from './TextAreaBase.js';
+/**
+ * Props for the TextArea component.
+ *
+ * Composes Field, Control, and TextAreaBase into a single convenience component.
+ * Supports all TextAreaBase props, plus Field-level (label, horizontal) and
+ * Control-level (loading) props.
+ */
+export interface TextAreaProps extends TextAreaBaseProps {
+    /** Field label. Automatically associated with the textarea via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
+    label?: React.ReactNode;
+    /** Size for the label. */
+    labelSize?: FieldProps['labelSize'];
+    /** Props for the label element when the component renders its own `Field`; dropped inside an outer `Field` (use that `Field`'s `labelProps` instead). An explicit `htmlFor` key — even `undefined` — overrides the automatic association and no id is generated. */
+    labelProps?: FieldProps['labelProps'];
+    /** Horizontal field layout. */
+    horizontal?: boolean;
+    /** Shows loading indicator on the wrapping Control. */
+    isLoading?: boolean;
+    /** Control size. */
+    controlSize?: ControlBaseProps['size'];
+    /** Help/validation message below the textarea. */
+    message?: React.ReactNode;
+    /** Bulma color for the message. */
+    messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field. */
+    fieldClassName?: string;
+    /** Additional CSS classes for the Control. */
+    controlClassName?: string;
+}
+/**
+ * The `TextArea` component provides a Bulma-styled multi-line text input, supporting color, size, rounded corners, static/read-only state, hover/focus/loading states, fixed size, and all Bulma helper props.
+ *
+ * @function
+ * @param {TextAreaProps} props - Props for TextArea.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <TextArea label="Bio" placeholder="Tell us about yourself" rows={4} />
+ *
+ * @example
+ * <TextArea
+ *   label="Comments"
+ *   message="Max 500 characters"
+ *   messageColor="info"
+ * />
+ */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/dist/types-cjs/form/TextAreaBase.d.ts

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