@allxsmith/bestax-bulma 5.6.2 → 5.8.0

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

@@ -1,11 +1,39 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/** Valid sizes for the Numberinput component. */
 export type NumberinputSize = 'small' | 'medium' | 'large';
+/** Valid colors for the Numberinput wrapper and control buttons. */
 export type NumberinputColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'light' | 'dark';
+/** Valid colors for the Numberinput inner input element. */
 export type NumberinputInputColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/** Position of the increment/decrement control buttons. */
 export type NumberinputControlsPosition = 'left' | 'right' | 'both';
+/** Visual variant for the Numberinput controls. */
 export type NumberinputVariant = 'plusminus' | 'stepper';
+/**
+ * Props for the Numberinput component.
+ *
+ * @property {number} [value] - Controlled numeric value.
+ * @property {number} [defaultValue] - Initial value for uncontrolled mode.
+ * @property {number} [min] - Minimum allowed value.
+ * @property {number} [max] - Maximum allowed value.
+ * @property {number} [step] - Step increment (default: 1).
+ * @property {NumberinputSize} [size] - Size of the input and buttons.
+ * @property {NumberinputColor} [color] - Color for the control buttons.
+ * @property {NumberinputInputColor} [inputColor] - Color for the inner input element.
+ * @property {NumberinputControlsPosition} [controlsPosition] - Position of increment/decrement buttons (default: 'both').
+ * @property {boolean} [controlsRounded] - Whether the control buttons are rounded.
+ * @property {boolean} [compact] - Whether to use compact (addons) layout.
+ * @property {boolean} [bare] - Bare mode: no outer .field wrapper, for composing inside a parent Field.
+ * @property {NumberinputVariant} [variant] - Control variant: 'plusminus' (default) or 'stepper'.
+ * @property {boolean} [disabled] - Whether the input is disabled.
+ * @property {boolean} [editable] - Whether the user can type directly into the input (default: true).
+ * @property {boolean} [isLoading] - Whether to show a loading spinner on the input.
+ * @property {boolean} [exponential] - Whether the step grows with the value magnitude.
+ * @property {(value: number) => void} [onChange] - Callback when the value changes.
+ * @see {@link https://buefy.org/documentation/numberinput | Buefy Numberinput documentation}
+ */
 export interface NumberinputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue' | 'type'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
     value?: number;
     defaultValue?: number;
@@ -26,5 +54,23 @@ export interface NumberinputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     exponential?: boolean;
     onChange?: (value: number) => void;
 }
+/**
+ * Bulma-styled numeric input with increment/decrement controls.
+ *
+ * Supports plus/minus buttons or a compact stepper variant,
+ * with configurable min/max, step, and exponential stepping.
+ *
+ * @function
+ * @param {NumberinputProps} props - Props for the Numberinput component.
+ * @returns {JSX.Element} The rendered numeric input element.
+ *
+ * @example
+ * // Basic number input
+ * <Numberinput defaultValue={5} min={0} max={100} />
+ *
+ * @example
+ * // Stepper variant with color
+ * <Numberinput variant="stepper" color="primary" step={10} />
+ */
 export declare const Numberinput: React.ForwardRefExoticComponent<NumberinputProps & React.RefAttributes<HTMLInputElement>>;
 export default Numberinput;

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

@@ -1,7 +1,24 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Valid colors for the Radio component.
+ */
 export declare const radioColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Valid sizes for the Radio component.
+ */
 export declare const radioSizes: readonly ["small", "normal", "medium", "large"];
+/**
+ * Props for the Radio component.
+ *
+ * @property {(typeof radioColors)[number]} [color] - Color variant for the radio.
+ * @property {(typeof radioSizes)[number]} [size] - Size of the radio.
+ * @property {boolean} [disabled] - Whether the radio is disabled.
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color.
+ * @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>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
     color?: (typeof radioColors)[number];
     size?: (typeof radioSizes)[number];
@@ -10,5 +27,32 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     className?: string;
     children?: React.ReactNode;
 }
+/**
+ * Bulma Radio component with themed styling support.
+ *
+ * Renders a custom-styled radio button with a visual indicator,
+ * supporting colors, sizes, and various states. Inside a `<Radios>` group,
+ * Radio inherits `name` and (when the group is in controlled or uncontrolled
+ * mode) derives its `checked` state from the group's `value` and dispatches
+ * the group's `onChange` when clicked.
+ *
+ * Local props always win over group context (`name`, `checked`, `onChange`
+ * on Radio override the group). Required for opt-out scenarios.
+ *
+ * @function
+ * @param {RadioProps} props - Props for the Radio component.
+ * @returns {JSX.Element} The rendered radio element.
+ *
+ * @example
+ * // Basic radio
+ * <Radio name="option">Option A</Radio>
+ *
+ * @example
+ * // Inside a group
+ * <Radios name="color" defaultValue="red">
+ *   <Radio value="red">Red</Radio>
+ *   <Radio value="blue">Blue</Radio>
+ * </Radios>
+ */
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export default Radio;

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

@@ -1,6 +1,16 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/**
+ * Props for the Radios component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {string} [name] - Form field name shared by every Radio in the group.
+ * @property {string} [value] - Currently-selected value (controlled mode).
+ * @property {string} [defaultValue] - Initial selected value (uncontrolled mode).
+ * @property {(value: string) => void} [onChange] - Fired when the selection changes. Receives the new value.
+ * @property {React.ReactNode} children - Radio elements to render in the group.
+ */
 export interface RadiosProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
     className?: string;
     name?: string;
@@ -9,5 +19,7 @@ export interface RadiosProps extends Omit<BulmaClassesProps, 'color'>, FormField
     onChange?: (value: string) => void;
     children: React.ReactNode;
 }
-export declare const Radios: React.FC<RadiosProps>;
+export declare const Radios: React.FC<RadiosProps> & {
+    Radio: React.ForwardRefExoticComponent<import("./Radio").RadioProps & React.RefAttributes<HTMLInputElement>>;
+};
 export default Radios;

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

@@ -1,16 +1,56 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/** 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.
+ *
+ * @property {number} index - The index of this icon (0-based).
+ * @property {boolean} isActive - Whether this icon is currently active (filled).
+ * @property {boolean} isHovered - Whether this icon is currently hovered.
+ * @property {number} value - The current value.
+ * @property {number} fillPercent - Fill percentage for partial icons (0-100). Used with precision < 1.
+ */
 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.
+ *
+ * @property {number} [value] - Controlled rating value.
+ * @property {number} [defaultValue] - Initial value for uncontrolled mode. Default: 0.
+ * @property {number} [max] - Maximum number of icons. Default: 5.
+ * @property {RateSize} [size] - Size modifier for the component.
+ * @property {boolean} [disabled] - Whether the rating is disabled.
+ * @property {boolean} [showScore] - Display the numeric score next to icons.
+ * @property {boolean} [showText] - Display text label for the current value.
+ * @property {string[]} [texts] - Text labels per rating level (used with showText).
+ * @property {(value: number) => void} [onChange] - Callback when the rating changes.
+ * @property {(props: RateIconProps) => React.ReactNode} [customIcon] - Custom icon render function.
+ * @property {boolean} [spaced] - Add spacing between icons.
+ * @property {boolean} [rtl] - Render icons in right-to-left order.
+ * @property {string} [iconName] - Font icon name (e.g., 'star'). When set, renders Icon instead of default SVG.
+ * @property {IconLibrary} [iconLibrary] - Icon library to use (defaults to ConfigProvider value or 'fa').
+ * @property {string} [iconVariant] - Icon style variant (e.g., 'solid', 'outlined').
+ * @property {string|string[]} [iconFeatures] - Additional icon modifiers.
+ * @property {BulmaColor} [color] - Bulma color for active icons.
+ * @property {number} [precision] - Granularity: 1 for whole stars, 0.5 for half, 0.25 for quarter. Default: 1.
+ * @property {string} [customText] - Text displayed after score (e.g., "(128 reviews)").
+ * @property {string} [name] - Form field name. When provided, a hidden input is rendered so the rating value is submitted with the surrounding form.
+ * @property {string} [form] - The id of the form this hidden input belongs to (for use outside the form element).
+ */
 export interface RateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, Omit<BulmaClassesProps, 'size'>, FormFieldProps {
     name?: string;
     form?: string;
@@ -26,13 +66,44 @@ export interface RateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
     customIcon?: (props: RateIconProps) => React.ReactNode;
     spaced?: boolean;
     rtl?: boolean;
+    /** Font icon name (e.g., 'star'). When set, renders <Icon> instead of default SVG. */
     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[];
+    /** Bulma color for active icons. */
     color?: BulmaColor;
+    /** Granularity: 1 for whole stars, 0.5 for half, 0.25 for quarter. */
     precision?: number;
+    /** Text displayed after score (e.g., "(128 reviews)"). */
     customText?: string;
 }
+/**
+ * Rate component for star/icon-based ratings.
+ *
+ * Provides an interactive rating system with customizable icons,
+ * sizes, and display options. Works in controlled or uncontrolled modes.
+ * Supports icon libraries, Bulma color variants, and fractional precision.
+ *
+ * @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/form/Select.d.ts

@@ -2,6 +2,29 @@ import React from 'react';
 import { FieldProps } from './Field';
 import { ControlBaseProps } from './Control';
 import { SelectBaseProps } from './SelectBase';
+/**
+ * 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.
+ *
+ * @property {React.ReactNode} [label] - Field label.
+ * @property {FieldProps['labelSize']} [labelSize] - Size for the label.
+ * @property {FieldProps['labelProps']} [labelProps] - Props for the label element.
+ * @property {boolean} [horizontal] - Horizontal field layout.
+ * @property {ControlBaseProps['iconLeft']} [iconLeft] - Icon props for left icon.
+ * @property {string} [iconLeftName] - Shortcut for left icon name.
+ * @property {ControlBaseProps['iconLeftSize']} [iconLeftSize] - Shortcut for left icon size.
+ * @property {boolean} [hasIconsLeft] - Force left icon container.
+ * @property {boolean} [isLoading] - Show loading indicator on the control.
+ * @property {boolean} [isExpanded] - Expand the control.
+ * @property {'small'|'medium'|'large'} [controlSize] - Control size.
+ * @property {React.ReactNode} [message] - Help/validation message below the select.
+ * @property {string} [messageColor] - Bulma color for the message.
+ * @property {string} [fieldClassName] - Additional CSS classes for the Field.
+ * @property {string} [controlClassName] - Additional CSS classes for the Control.
+ */
 export interface SelectProps extends SelectBaseProps {
     label?: React.ReactNode;
     labelSize?: FieldProps['labelSize'];
@@ -19,5 +42,21 @@ export interface SelectProps extends SelectBaseProps {
     fieldClassName?: string;
     controlClassName?: string;
 }
+/**
+ * Select is a convenience component that composes Field, Control, and SelectBase.
+ *
+ * Use this for typical form fields. For complex layouts (grouped fields,
+ * addons, etc.), compose Field, Control, and SelectBase directly.
+ *
+ * @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/form/SelectBase.d.ts

@@ -1,5 +1,22 @@
 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 {boolean} [isHovered] - Forces the hovered state on the inner select element.
+ * @property {boolean} [isFocused] - Forces the focused state on the inner select element.
+ * @property {boolean} [isFullwidth] - Makes the select span the full width of its parent.
+ * @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 SelectBaseProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
     size?: 'small' | 'medium' | 'large';
@@ -15,5 +32,13 @@ export interface SelectBaseProps extends Omit<React.SelectHTMLAttributes<HTMLSel
     multipleSize?: number;
     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/form/Slider.d.ts

@@ -1,14 +1,43 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/** 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.
+ *
+ * @property {number} value - Position of the mark along the slider range.
+ * @property {React.ReactNode} [label] - Optional label rendered below the tick mark.
+ */
 export interface SliderMark {
     value: number;
     label?: React.ReactNode;
 }
+/**
+ * Shared base props for single and range Slider modes.
+ *
+ * @property {number} [min] - Minimum slider value (default: 0).
+ * @property {number} [max] - Maximum slider value (default: 100).
+ * @property {number} [step] - Step increment (default: 1).
+ * @property {SliderSize} [size] - Size of the slider.
+ * @property {SliderColor} [color] - Color of the slider.
+ * @property {boolean} [isRounded] - Whether the slider thumb is rounded.
+ * @property {boolean} [isCircle] - Whether the slider thumb is circular.
+ * @property {boolean} [showOutput] - Whether to show a tooltip with the current value (maps to tooltip 'auto').
+ * @property {SliderTooltip} [tooltip] - Tooltip display mode (overrides showOutput).
+ * @property {boolean} [ticks] - Whether to display tick marks at each step.
+ * @property {SliderMark[]} [marks] - Custom tick mark positions and labels.
+ * @property {SliderOrientation} [orientation] - Slider orientation (default: 'horizontal').
+ * @property {(value: number) => number} [scale] - Non-linear scale function for displayed values.
+ * @property {(value: number) => string} [getAriaValueText] - Custom aria-valuetext formatter.
+ * @property {(value: number) => string} [formatOutput] - Custom formatter for the tooltip output.
+ */
 interface SliderBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
     min?: number;
     max?: number;
@@ -26,6 +55,16 @@ interface SliderBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElemen
     getAriaValueText?: (value: number) => string;
     formatOutput?: (value: number) => string;
 }
+/**
+ * Props for the Slider in single-value mode.
+ *
+ * @property {false} [range] - Must be false or omitted for single-value mode.
+ * @property {number} [value] - Controlled slider value.
+ * @property {number} [defaultValue] - Initial value for uncontrolled mode.
+ * @property {(value: number) => void} [onChange] - Callback when the value changes.
+ * @property {never} [minDistance] - Not applicable in single-value mode.
+ * @property {string} [ariaLabel] - Accessible label for the slider input.
+ */
 export interface SliderSingleProps extends SliderBaseProps {
     range?: false;
     value?: number;
@@ -34,6 +73,18 @@ export interface SliderSingleProps extends SliderBaseProps {
     minDistance?: never;
     ariaLabel?: string;
 }
+/**
+ * Props for the Slider in range (dual-thumb) mode.
+ *
+ * @property {true} range - Must be true to enable range mode.
+ * @property {[number, number]} [value] - Controlled range value as [low, high].
+ * @property {[number, number]} [defaultValue] - Initial range for uncontrolled mode.
+ * @property {(value: [number, number]) => void} [onChange] - Callback when the range changes.
+ * @property {number} [minDistance] - Minimum distance between the two thumbs.
+ * @property {[string, string]} [ariaLabel] - Accessible labels for the low and high thumb inputs.
+ * @property {string} [nameLow] - Form field name for the low thumb. Use this in range mode so each thumb submits with its own name.
+ * @property {string} [nameHigh] - Form field name for the high thumb.
+ */
 export interface SliderRangeProps extends SliderBaseProps {
     range: true;
     value?: [number, number];
@@ -44,6 +95,26 @@ export interface SliderRangeProps extends SliderBaseProps {
     nameLow?: string;
     nameHigh?: string;
 }
+/** Props for the Slider component — a discriminated union of single and range modes. */
 export type SliderProps = SliderSingleProps | SliderRangeProps;
+/**
+ * Slider component for selecting a value or range from a range.
+ *
+ * A styled range input that supports different sizes, colors,
+ * optional value display, ticks/marks, range mode (dual thumb),
+ * vertical orientation, and non-linear scale.
+ *
+ * @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/form/Switch.d.ts

@@ -1,7 +1,31 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * 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.
+ *
+ * @property {(typeof switchColors)[number]} [color] - Color variant for the switch.
+ * @property {(typeof switchSizes)[number]} [size] - Size of the switch.
+ * @property {boolean} [isRounded] - Use rounded switch style.
+ * @property {boolean} [isThin] - Use thin switch style.
+ * @property {boolean} [isOutlined] - Use outlined switch style.
+ * @property {boolean} [isRtl] - Right-to-left layout (label on left).
+ * @property {(typeof switchColors)[number]} [passiveType] - Color for the unchecked (inactive) state.
+ * @property {boolean} [checked] - Whether the switch is checked.
+ * @property {boolean} [defaultChecked] - Default checked state for uncontrolled usage.
+ * @property {boolean} [disabled] - Whether the switch is disabled.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color.
+ * @property {React.ReactNode} [children] - Label content for the switch.
+ * @property {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] - Change handler.
+ */
 export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
     color?: (typeof switchColors)[number];
     size?: (typeof switchSizes)[number];
@@ -13,5 +37,34 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
     children?: React.ReactNode;
 }
+/**
+ * Switch component for toggling between on/off states.
+ *
+ * A styled checkbox that appears as a toggle switch, commonly used for
+ * settings and preferences. Supports various colors, sizes, and styles.
+ *
+ * @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/form/Taginput.d.ts

@@ -1,13 +1,64 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/**
+ * Represents a tag item object with a value and optional label.
+ *
+ * @property {string} value - The tag value.
+ * @property {string} [label] - Display label for the tag.
+ */
 export interface TaginputItem {
     value: string;
     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.
+ *
+ * @property {TaginputTag[]} [value] - The current tags (controlled).
+ * @property {TaginputTag[]} [defaultValue] - Default tags (uncontrolled).
+ * @property {string[]} [data] - Autocomplete suggestions.
+ * @property {string} [placeholder] - Placeholder text when no tags.
+ * @property {string} [field] - Object property to use as display field.
+ * @property {boolean} [allowNew] - Allow creating new tags not in suggestions.
+ * @property {boolean} [allowDuplicates] - Allow duplicate tags.
+ * @property {boolean} [openOnFocus] - Open autocomplete dropdown on focus.
+ * @property {boolean} [removeOnKeys] - Remove tag on backspace. Default: true.
+ * @property {string[]} [confirmKeys] - Keys to confirm tag creation. Default: ['Enter', ','].
+ * @property {boolean} [closable] - Show close button on tags. Default: true.
+ * @property {boolean} [attached] - Attach tags visually.
+ * @property {number} [maxTags] - Maximum number of tags allowed.
+ * @property {number} [maxlength] - Maximum length of input.
+ * @property {boolean} [disabled] - Whether the input is disabled.
+ * @property {boolean} [readonly] - Whether the input is read-only.
+ * @property {boolean} [rounded] - Makes tags rounded.
+ * @property {boolean} [ellipsis] - Truncate long tag text with ellipsis and show title tooltip.
+ * @property {boolean} [hasCounter] - Show counter for maxTags/maxlength. Default: true.
+ * @property {string[]} [onPasteSeparators] - Characters to split on paste. Default: [','].
+ * @property {(tag: string) => boolean} [beforeAdding] - Validate before adding a tag.
+ * @property {(input: string) => TaginputTag} [createTag] - Transform input string to tag.
+ * @property {boolean} [keepFirst] - Auto-highlight first autocomplete result.
+ * @property {boolean} [keepOpen] - Keep dropdown open after selecting. Default: true.
+ * @property {boolean} [loading] - Show loading spinner in input.
+ * @property {string} [ariaCloseLabel] - Accessibility label for close buttons.
+ * @property {(tags: TaginputTag[]) => void} [onChange] - Callback when tags change.
+ * @property {(tag: TaginputTag) => void} [onAdd] - Callback when tag is added.
+ * @property {(tag: TaginputTag, index: number) => void} [onRemove] - Callback when tag is removed.
+ * @property {(value: string) => void} [onTyping] - Callback when typing in input.
+ * @property {(tag: TaginputTag) => React.ReactNode} [tagTemplate] - Custom render for tags.
+ * @property {string} [name] - Form field name. When provided, one hidden input per tag is rendered so tags submit as a standard form-encoded array (e.g., `tags=react&tags=vue`).
+ * @property {string} [form] - The id of the form the hidden inputs belong to.
+ * @property {string} [icon] - Icon name for the input field.
+ * @property {IconLibrary} [iconLibrary] - Icon library to use.
+ * @property {string} [iconVariant] - Icon style variant (e.g., 'solid', 'outlined').
+ * @property {string | string[]} [iconFeatures] - Additional icon modifiers.
+ * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the input.
+ * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'dark' | 'light'} [tagColor] - Color modifier for tags.
+ * @property {'small' | 'medium' | 'large'} [size] - Size modifier for the component.
+ */
 export interface TaginputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
     value?: TaginputTag[];
     defaultValue?: TaginputTag[];
@@ -50,5 +101,31 @@ export interface TaginputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     onTyping?: (value: string) => void;
     tagTemplate?: (tag: TaginputTag) => React.ReactNode;
 }
+/**
+ * Taginput component for managing multiple tags.
+ *
+ * Allows users to create, edit, and remove tags with optional
+ * autocomplete suggestions.
+ *
+ * @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>>;
 export default Taginput;

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

@@ -2,6 +2,24 @@ import React from 'react';
 import { FieldProps } from './Field';
 import { ControlBaseProps } from './Control';
 import { TextAreaBaseProps } from './TextAreaBase';
+/**
+ * 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.
+ *
+ * @property {React.ReactNode} [label] - Field label.
+ * @property {FieldProps['labelSize']} [labelSize] - Size for the label.
+ * @property {FieldProps['labelProps']} [labelProps] - Props for the label element.
+ * @property {boolean} [horizontal] - Horizontal field layout.
+ * @property {boolean} [isLoading] - Show loading indicator on the control.
+ * @property {'small'|'medium'|'large'} [controlSize] - Control size.
+ * @property {React.ReactNode} [message] - Help/validation message below the textarea.
+ * @property {string} [messageColor] - Bulma color for the message.
+ * @property {string} [fieldClassName] - Additional CSS classes for the Field.
+ * @property {string} [controlClassName] - Additional CSS classes for the Control.
+ */
 export interface TextAreaProps extends TextAreaBaseProps {
     label?: React.ReactNode;
     labelSize?: FieldProps['labelSize'];
@@ -14,5 +32,25 @@ export interface TextAreaProps extends TextAreaBaseProps {
     fieldClassName?: string;
     controlClassName?: string;
 }
+/**
+ * TextArea is a convenience component that composes Field, Control, and TextAreaBase.
+ *
+ * Use this for typical form fields. For complex layouts (grouped fields,
+ * addons, etc.), compose Field, Control, and TextAreaBase directly.
+ *
+ * @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;