@allxsmith/bestax-bulma 5.8.0 → 5.8.2

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

@@ -7,12 +7,6 @@ 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) */
@@ -28,45 +22,39 @@ export interface RateIconProps {
 }
 /**
  * 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).
+ * @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 {
+    /** 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;
-    /** Font icon name (e.g., 'star'). When set, renders <Icon> instead of default SVG. */
+    /** Custom icon name for the rating stars. */
     iconName?: string;
     /** Icon library to use (defaults to ConfigProvider value or 'fa'). */
     iconLibrary?: IconLibrary;
@@ -74,19 +62,15 @@ export interface RateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
     iconVariant?: string;
     /** Additional icon modifiers. */
     iconFeatures?: string | string[];
-    /** Bulma color for active icons. */
+    /** Color of the active rating icons. */
     color?: BulmaColor;
-    /** Granularity: 1 for whole stars, 0.5 for half, 0.25 for quarter. */
+    /** Rating precision (e.g., `0.5` for half stars). */
     precision?: number;
-    /** Text displayed after score (e.g., "(128 reviews)"). */
+    /** Custom text displayed next to the rating. */
     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.
+ * The `Rate` component provides a star/icon-based rating system.
  *
  * @function
  * @param {RateProps} props - Props for the Rate component.

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

@@ -8,45 +8,41 @@ import { SelectBaseProps } from './SelectBase';
  * 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 {
+    /** Field label. Automatically associated with the select via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
     label?: React.ReactNode;
+    /** Size for the label. */
     labelSize?: FieldProps['labelSize'];
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
     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;
 }
 /**
- * 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.
+ * The `Select` component provides a Bulma-styled dropdown for selecting one or more options.
  *
  * @function
  * @param {SelectProps} props - Props for Select.

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

@@ -2,34 +2,33 @@ 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'> {
+    /** 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;
+    /** 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;
 }
 /**

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

@@ -11,98 +11,119 @@ export type SliderTooltip = 'auto' | 'always' | 'hidden';
 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 {
+    /** Controlled value. */
     value: number;
+    /** Optional label rendered below the tick mark. */
     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 {
+    /** 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.
- *
- * @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 {
+    /**
+     * 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.
- *
- * @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 {
+    /**
+     * 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. */
+/**
+ *  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;
 /**
- * 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.
+ * The `Slider` component provides a range slider input for selecting values within a range.
  *
  * @function
  * @param {SliderProps} props - Props for the Slider component.

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

@@ -10,38 +10,35 @@ export declare const switchColors: readonly ["primary", "link", "info", "success
 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.
+ * @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;
 }
 /**
- * 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.
+ * The `Switch` component provides a toggle switch for boolean on/off states.
  *
  * @function
  * @param {SwitchProps} props - Props for the Switch component.

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

@@ -3,12 +3,11 @@ 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 {
+    /** The tag value. */
     value: string;
+    /** Display label (optional). */
     label?: string;
     [key: string]: unknown;
 }
@@ -17,95 +16,93 @@ 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.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
  */
 export interface TaginputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** 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;
 }
 /**
- * Taginput component for managing multiple tags.
- *
- * Allows users to create, edit, and remove tags with optional
- * autocomplete suggestions.
+ * The `Taginput` component provides a tag/chip input field for managing multiple tags.
  *
  * @function
  * @param {TaginputProps} props - Props for the Taginput component.

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

@@ -8,35 +8,31 @@ import { TextAreaBaseProps } from './TextAreaBase';
  * 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 {
+    /** Field label. Automatically associated with the textarea via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
     label?: React.ReactNode;
+    /** Size for the label. */
     labelSize?: FieldProps['labelSize'];
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
     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;
 }
 /**
- * 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.
+ * 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.