@allxsmith/bestax-bulma 5.6.2 → 5.8.0

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

@@ -1,6 +1,28 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
 import { IconProps } from '../elements/Icon';
+/**
+ * Props for the Control component.
+ *
+ * @property {boolean} [hasIconsLeft] - Adds left icon container.
+ * @property {boolean} [hasIconsRight] - Adds right icon container.
+ * @property {boolean} [isLoading] - Shows loading indicator.
+ * @property {boolean} [isExpanded] - Makes the control expand to fill available space.
+ * @property {'small'|'medium'|'large'} [size] - Sets the control size.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Sets text color.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color for the control.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color.
+ * @property {IconProps} [iconLeft] - Icon props for left icon.
+ * @property {IconProps} [iconRight] - Icon props for right icon.
+ * @property {string} [iconLeftName] - Shortcut for left icon name.
+ * @property {'small'|'medium'|'large'} [iconLeftSize] - Shortcut for left icon size.
+ * @property {string} [iconRightName] - Shortcut for right icon name.
+ * @property {'small'|'medium'|'large'} [iconRightSize] - Shortcut for right icon size.
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {React.ReactNode} [children] - Content inside the control.
+ * @property {'div'|'p'} [as] - Element type for the control (default: 'div').
+ * @property {React.Ref<HTMLDivElement|HTMLParagraphElement>} [ref] - Ref for the control element.
+ */
 export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     hasIconsLeft?: boolean;
     hasIconsRight?: boolean;
@@ -19,6 +41,20 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
     className?: string;
     children?: React.ReactNode;
 }
+/**
+ * Bulma Control component for form controls, with icons, loading, and Bulma helper support.
+ *
+ * @function
+ * @param {ControlProps} props - Props for the Control component.
+ * @returns {JSX.Element} The rendered control container.
+ * @see {@link https://bulma.io/documentation/form/general/#control | Bulma Control documentation}
+ *
+ * @example
+ * // Control with left icon
+ * <Control iconLeftName="envelope" iconLeftSize="small">
+ *   <input className="input" type="email" placeholder="Email" />
+ * </Control>
+ */
 export declare const Control: React.ForwardRefExoticComponent<(Omit<{
     as?: "div";
 } & ControlBaseProps & {

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

@@ -2,6 +2,29 @@ import React from 'react';
 import { FieldProps } from './Field';
 import { ControlBaseProps } from './Control';
 import { DateInputBaseProps } from './DateInputBase';
+/**
+ * Props for the DateInput convenience wrapper. Extends `DateInputBaseProps`
+ * with 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] - Render the field with horizontal layout.
+ * @property {ControlBaseProps['iconLeft']} [iconLeft] - Icon props for the left icon.
+ * @property {ControlBaseProps['iconRight']} [iconRight] - Icon props for the right icon.
+ * @property {string} [iconRightName] - Shortcut for the right icon name.
+ * @property {ControlBaseProps['iconLeftSize']} [iconLeftSize] - Shortcut for left icon size.
+ * @property {ControlBaseProps['iconRightSize']} [iconRightSize] - Shortcut for right icon size.
+ * @property {boolean} [hasIconsLeft] - Force the left icon container.
+ * @property {boolean} [hasIconsRight] - Force the right icon container.
+ * @property {boolean} [isLoading] - Show a loading indicator on the control.
+ * @property {boolean} [isExpanded] - Expand the control to fill its container.
+ * @property {ControlBaseProps['size']} [controlSize] - Size of the wrapping Control.
+ * @property {React.ReactNode} [message] - Help/validation text below the input.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [messageColor] - Message color.
+ * @property {string} [fieldClassName] - Additional CSS classes for the Field wrapper.
+ * @property {string} [controlClassName] - Additional CSS classes for the Control wrapper.
+ */
 export interface DateInputProps extends DateInputBaseProps {
     label?: React.ReactNode;
     labelSize?: FieldProps['labelSize'];
@@ -22,5 +45,26 @@ export interface DateInputProps extends DateInputBaseProps {
     fieldClassName?: string;
     controlClassName?: string;
 }
+/**
+ * DateInput is a form input that opens a popover calendar for date selection.
+ * Uses native `Date` and `Intl` only (no extra dependencies). Supports min/max
+ * bounds, disabled-date predicates, custom formats, locale-aware day/month
+ * names, an inline mode, and a native `<input type="date">` fallback for touch
+ * devices.
+ *
+ * @function
+ * @param {DateInputProps} props - Props for the DateInput.
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <DateInput label="Date of birth" defaultValue={new Date(1990, 0, 1)} />
+ *
+ * @example
+ * <DateInput
+ *   label="Booking"
+ *   min={new Date()}
+ *   shouldDisableDate={d => d.getDay() === 0 || d.getDay() === 6}
+ * />
+ */
 export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
 export default DateInput;

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

@@ -2,6 +2,44 @@ import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { PickerPosition, DayOfWeek, PickerLabels } from './_pickerInternals/pickerTypes';
 import { DateFormatOption } from './_pickerInternals/formatters';
+/**
+ * Props for the raw DateInput base. Use the higher-level `DateInput` for
+ * Field/Control composition; `DateInputBase` is the input + popover only.
+ *
+ * @property {Date | null} [value] - Controlled selected date.
+ * @property {Date | null} [defaultValue] - Initial date for uncontrolled usage.
+ * @property {(d: Date | null) => void} [onChange] - Fired when the value changes.
+ * @property {() => void} [onOpen] - Fired when the popover opens.
+ * @property {() => void} [onClose] - Fired when the popover closes.
+ * @property {Date} [min] - Earliest selectable date.
+ * @property {Date} [max] - Latest selectable date.
+ * @property {boolean} [disabled] - Disable the input.
+ * @property {boolean} [readOnly] - Make the input read-only.
+ * @property {string} [placeholder] - Placeholder text.
+ * @property {DateFormatOption} [format] - Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD'`.
+ * @property {(s: string) => Date | null} [parse] - Custom parser (use when `format` is `Intl.DateTimeFormatOptions`).
+ * @property {string} [locale] - BCP-47 locale tag for day/month names.
+ * @property {boolean} [inline] - Render the calendar inline (no popover).
+ * @property {boolean | 'auto'} [mobileNative] - Use native `<input type="date">` on coarse-pointer + small-viewport devices.
+ * @property {boolean} [editable] - Allow segmented keyboard typing in the input (type the date directly, auto-advancing across segments). Default `true`.
+ * @property {boolean} [popover] - Whether the calendar popover exists. `false` makes the field input-only (segmented typing with no popover). Default `true`.
+ * @property {boolean} [openOnFocus] - Open the popover on focus. Default `true`.
+ * @property {boolean} [closeOnSelect] - Close the popover after selection. Default `true`.
+ * @property {PickerPosition} [position] - Popover anchor position.
+ * @property {boolean} [appendToBody] - Render the popover into `document.body` via portal.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color modifier.
+ * @property {'small'|'medium'|'large'} [size] - Size variant.
+ * @property {boolean} [isRounded] - Render the input with rounded corners.
+ * @property {(d: Date) => boolean} [shouldDisableDate] - Predicate to disable specific dates. Blocked dates can't be selected in the calendar and are rejected by manual typing (segmented and free-form).
+ * @property {Date[]} [unselectableDates] - Convenience array of disabled dates, matched by calendar day; also rejected by manual typing.
+ * @property {DayOfWeek} [firstDayOfWeek] - Day the week starts on (0 = Sunday).
+ * @property {string[]} [dayNames] - Override the 7 day-name labels.
+ * @property {string[]} [monthNames] - Override the 12 month-name labels.
+ * @property {boolean} [nearbyMonthDays] - Show dimmed dates from adjacent months. Default `true`.
+ * @property {string} [iconLeftName] - Decorative left icon glyph for the wrapping Control (shown by default; set to '' to hide).
+ * @property {boolean} [triggerIcon] - Show a clickable launcher button on the right that toggles the popover. Default `true`.
+ * @property {string} [triggerIconName] - Glyph name for the right launcher button. Default `'chevron-down'`.
+ */
 export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     value?: Date | null;
     defaultValue?: Date | null;
@@ -36,7 +74,16 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
     iconLeftName?: string;
     triggerIcon?: boolean;
     triggerIconName?: string;
+    /** Optional translatable string overrides (ARIA labels, button text). */
     labels?: PickerLabels;
 }
+/**
+ * Raw DateInput — input + popover calendar without Field/Control wrapping.
+ * Use `DateInput` for the convenience wrapper.
+ *
+ * @function
+ * @param {DateInputBaseProps} props
+ * @returns {JSX.Element}
+ */
 export declare const DateInputBase: React.ForwardRefExoticComponent<DateInputBaseProps & React.RefAttributes<HTMLInputElement>>;
 export default DateInputBase;

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

@@ -2,6 +2,29 @@ import React from 'react';
 import { FieldProps } from './Field';
 import { ControlBaseProps } from './Control';
 import { DateTimeInputBaseProps } from './DateTimeInputBase';
+/**
+ * Props for the DateTimeInput convenience wrapper. Extends
+ * `DateTimeInputBaseProps` with Field-level and Control-level 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] - Render the field with horizontal layout.
+ * @property {ControlBaseProps['iconLeft']} [iconLeft] - Icon props for the left icon.
+ * @property {ControlBaseProps['iconRight']} [iconRight] - Icon props for the right icon.
+ * @property {string} [iconRightName] - Shortcut for the right icon name.
+ * @property {ControlBaseProps['iconLeftSize']} [iconLeftSize] - Shortcut for left icon size.
+ * @property {ControlBaseProps['iconRightSize']} [iconRightSize] - Shortcut for right icon size.
+ * @property {boolean} [hasIconsLeft] - Force the left icon container.
+ * @property {boolean} [hasIconsRight] - Force the right icon container.
+ * @property {boolean} [isLoading] - Show a loading indicator on the control.
+ * @property {boolean} [isExpanded] - Expand the control to fill its container.
+ * @property {ControlBaseProps['size']} [controlSize] - Size of the wrapping Control.
+ * @property {React.ReactNode} [message] - Help/validation text below the input.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [messageColor] - Message color.
+ * @property {string} [fieldClassName] - Additional CSS classes for the Field wrapper.
+ * @property {string} [controlClassName] - Additional CSS classes for the Control wrapper.
+ */
 export interface DateTimeInputProps extends DateTimeInputBaseProps {
     label?: React.ReactNode;
     labelSize?: FieldProps['labelSize'];
@@ -22,5 +45,24 @@ export interface DateTimeInputProps extends DateTimeInputBaseProps {
     fieldClassName?: string;
     controlClassName?: string;
 }
+/**
+ * DateTimeInput is a form input that opens a popover combining a calendar
+ * (above) and a time spinner (below). Footer offers Today / Now / Clear / OK.
+ * Includes a native `<input type="datetime-local">` fallback for touch devices.
+ *
+ * @function
+ * @param {DateTimeInputProps} props
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <DateTimeInput label="Appointment" defaultValue={new Date()} />
+ *
+ * @example
+ * <DateTimeInput
+ *   label="When"
+ *   hourFormat="12"
+ *   shouldDisableDate={d => d.getDay() === 0 || d.getDay() === 6}
+ * />
+ */
 export declare const DateTimeInput: React.ForwardRefExoticComponent<DateTimeInputProps & React.RefAttributes<HTMLInputElement>>;
 export default DateTimeInput;

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

@@ -2,6 +2,53 @@ import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { PickerPosition, HourFormat, DayOfWeek, PickerLabels } from './_pickerInternals/pickerTypes';
 import { DateFormatOption } from './_pickerInternals/formatters';
+/**
+ * Props for the raw DateTimeInput base. Use the higher-level `DateTimeInput`
+ * for Field/Control composition. Combines the prop set of `DateInputBaseProps`
+ * and `TimeInputBaseProps`.
+ *
+ * @property {Date | null} [value] - Controlled selected date-time.
+ * @property {Date | null} [defaultValue] - Initial value for uncontrolled usage.
+ * @property {(d: Date | null) => void} [onChange] - Fired when either half changes.
+ * @property {() => void} [onOpen] - Fired when the popover opens.
+ * @property {() => void} [onClose] - Fired when the popover closes.
+ * @property {Date} [min] - Lower bound for the combined date-time.
+ * @property {Date} [max] - Upper bound for the combined date-time.
+ * @property {boolean} [disabled] - Disable the input.
+ * @property {boolean} [readOnly] - Read-only input.
+ * @property {string} [placeholder] - Placeholder text.
+ * @property {DateFormatOption} [format] - Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD HH:mm'`.
+ * @property {(s: string) => Date | null} [parse] - Custom parser.
+ * @property {string} [locale] - BCP-47 locale tag.
+ * @property {boolean} [inline] - Render the panel inline (no popover).
+ * @property {boolean | 'auto'} [mobileNative] - Use native `<input type="datetime-local">` on coarse-pointer devices.
+ * @property {boolean} [editable] - Allow segmented keyboard typing in the input (type the date-time directly, auto-advancing across segments). Default `true`.
+ * @property {boolean} [popover] - Whether the calendar + time popover exists. `false` makes the field input-only (segmented typing with no popover). Default `true`.
+ * @property {boolean} [openOnFocus] - Open the popover on focus. Default `true`.
+ * @property {boolean} [closeOnSelect] - Close after selection. Default `false`.
+ * @property {PickerPosition} [position] - Popover anchor position.
+ * @property {boolean} [appendToBody] - Render the popover into `document.body` via portal.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color modifier.
+ * @property {'small'|'medium'|'large'} [size] - Size variant.
+ * @property {boolean} [isRounded] - Rounded input corners.
+ * @property {(d: Date) => boolean} [shouldDisableDate] - Predicate for disabled dates. Blocked dates can't be picked in the calendar and are rejected by manual typing; during entry the predicate receives the full candidate date-time, so prefer day-based checks.
+ * @property {Date[]} [unselectableDates] - Convenience array of disabled dates, matched by calendar day; also rejected by manual typing.
+ * @property {DayOfWeek} [firstDayOfWeek] - Day the calendar week starts on.
+ * @property {string[]} [dayNames] - Override the 7 day-name labels.
+ * @property {string[]} [monthNames] - Override the 12 month-name labels.
+ * @property {boolean} [nearbyMonthDays] - Show dimmed dates from adjacent months.
+ * @property {HourFormat} [hourFormat] - `'12'` or `'24'`. Default `'24'`.
+ * @property {boolean} [enableSeconds] - Show a seconds column. Note: iOS Safari's native datetime-local picker has no seconds wheel; combine with `mobileNative={false}` if a seconds wheel is required on iOS.
+ * @property {number} [incrementHours] - Hour step.
+ * @property {number} [incrementMinutes] - Minute step.
+ * @property {number} [incrementSeconds] - Second step.
+ * @property {(d: Date) => boolean} [unselectableTimes] - Predicate for blocked times (the wheels skip ahead; manual typing rejects them).
+ * @property {string} [iconLeftName] - Decorative left icon glyph for the wrapping Control (shown by default; set to '' to hide).
+ * @property {boolean} [triggerIcon] - Show a clickable launcher button on the right that toggles the popover. Default `true`.
+ * @property {string} [triggerIconName] - Glyph name for the right launcher button. Default `'chevron-down'`.
+ * @property {boolean} [audioTick] - Play a short audible tick on each time-wheel crossing. Default `false`.
+ * @property {boolean} [haptics] - Auto-route tactile feedback per wheel tick (vibrate on Android, audio thunk on iOS). Default `false`.
+ */
 export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     value?: Date | null;
     defaultValue?: Date | null;
@@ -44,7 +91,16 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
     triggerIconName?: string;
     audioTick?: boolean;
     haptics?: boolean;
+    /** Optional translatable string overrides. */
     labels?: PickerLabels;
 }
+/**
+ * Raw DateTimeInput — combined input + calendar + time spinner without
+ * Field/Control wrapping. Use `DateTimeInput` for the convenience wrapper.
+ *
+ * @function
+ * @param {DateTimeInputBaseProps} props
+ * @returns {JSX.Element}
+ */
 export declare const DateTimeInputBase: React.ForwardRefExoticComponent<DateTimeInputBaseProps & React.RefAttributes<HTMLInputElement>>;
 export default DateTimeInputBase;

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

@@ -1,5 +1,21 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Field component.
+ *
+ * @property {boolean} [horizontal] - Renders the field as horizontal (label and control side by side).
+ * @property {boolean|'centered'|'right'|'multiline'} [grouped] - Group controls in a row (optionally centered, right, or multiline).
+ * @property {boolean|'centered'|'right'} [hasAddons] - Group controls as addons (optionally centered or right-aligned).
+ * @property {boolean} [narrow] - Constrains the field to its content's width (used inside horizontal field bodies).
+ * @property {React.ReactNode} [label] - Field label.
+ * @property {'small'|'normal'|'medium'|'large'} [labelSize] - Size for the label.
+ * @property {object} [labelProps] - Props for the label element.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color for the field.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color for the field.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color for the field.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Field content.
+ */
 export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     horizontal?: boolean;
     grouped?: boolean | 'centered' | 'right' | 'multiline';
@@ -16,6 +32,16 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, Omit<B
     className?: string;
     children?: React.ReactNode;
 }
+/**
+ * Props for the FieldLabel component.
+ *
+ * @property {'small'|'normal'|'medium'|'large'} [size] - Size for the field label.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color for the label.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color for the label.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color for the label.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Field label content.
+ */
 export interface FieldLabelProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     size?: 'small' | 'normal' | 'medium' | 'large';
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -24,6 +50,15 @@ export interface FieldLabelProps extends React.HTMLAttributes<HTMLDivElement>, O
     className?: string;
     children?: React.ReactNode;
 }
+/**
+ * Props for the FieldBody component.
+ *
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color for the field body.
+ * @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color for the field body.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color for the field body.
+ * @property {string} [className] - Additional CSS classes.
+ * @property {React.ReactNode} [children] - Field body content.
+ */
 export interface FieldBodyProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
@@ -31,10 +66,39 @@ export interface FieldBodyProps extends React.HTMLAttributes<HTMLDivElement>, Om
     className?: string;
     children?: React.ReactNode;
 }
+/**
+ * FieldLabel component for rendering a Bulma field label.
+ *
+ * @function
+ * @param {FieldLabelProps} props - Props for the FieldLabel component.
+ * @returns {JSX.Element} The rendered field label.
+ *
+ * @example
+ * <FieldLabel size="normal">Name</FieldLabel>
+ */
 export declare const FieldLabel: React.FC<FieldLabelProps>;
+/**
+ * FieldBody component for rendering Bulma field body.
+ *
+ * @function
+ * @param {FieldBodyProps} props - Props for the FieldBody component.
+ * @returns {JSX.Element} The rendered field body.
+ *
+ * @example
+ * <FieldBody><input className="input" /></FieldBody>
+ */
 export declare const FieldBody: React.FC<FieldBodyProps>;
 export declare const Field: React.FC<FieldProps> & {
-    Label: typeof FieldLabel;
-    Body: typeof FieldBody;
+    Label: React.FC<FieldLabelProps>;
+    Body: React.FC<FieldBodyProps>;
+    Control: React.ForwardRefExoticComponent<(Omit<{
+        as?: "div";
+    } & import("./Control").ControlBaseProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }, "ref"> | Omit<{
+        as: "p";
+    } & Omit<import("./Control").ControlBaseProps, keyof React.HTMLAttributes<HTMLDivElement>> & React.HTMLAttributes<HTMLParagraphElement> & {
+        ref?: React.Ref<HTMLParagraphElement>;
+    }, "ref">) & React.RefAttributes<HTMLDivElement | HTMLParagraphElement>>;
 };
 export default Field;

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

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

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

@@ -1,22 +1,68 @@
+/**
+ * Hook to detect if the component is inside a Field wrapper.
+ * Form components use this to skip rendering their own Field.
+ */
 export declare const useInsideField: () => boolean;
+/**
+ * Hook to detect if the component is inside a Control wrapper.
+ * Form components use this to skip rendering their own Control.
+ */
 export declare const useInsideControl: () => boolean;
+/** Provider for Field context — used internally by Field component. */
 export declare const FieldProvider: import("react").Provider<boolean>;
+/** Provider for Control context — used internally by Control component. */
 export declare const ControlProvider: import("react").Provider<boolean>;
+/**
+ * Shape of the Radios group context. The group provides:
+ * - `name`: shared form field name (Stage 1)
+ * - `value`: currently-selected radio value (Stage 2 — group-managed selection)
+ * - `onChange`: dispatched by child Radios when clicked (Stage 2)
+ *
+ * Group sets `value`/`onChange` only when actively managing selection
+ * (i.e., the user passed `value`, `defaultValue`, or `onChange` to `<Radios>`).
+ * When only `name` is provided, the group is in "name-only" mode and child
+ * Radios manage their own checked state independently.
+ */
 export interface RadiosGroupContextValue {
     name?: string;
     value?: string;
     onChange?: (value: string) => void;
 }
+/**
+ * Shape of the Checkboxes group context. Like Radios but with array semantics
+ * for multi-select.
+ */
 export interface CheckboxesGroupContextValue {
     name?: string;
     value?: string[];
     onChange?: (values: string[]) => void;
 }
+/**
+ * Hook to read the full surrounding `<Radios>` group context (name + selection).
+ * Returns `undefined` when not inside a `<Radios>` group.
+ */
 export declare const useRadiosGroup: () => RadiosGroupContextValue | undefined;
+/**
+ * Hook to read the full surrounding `<Checkboxes>` group context.
+ * Returns `undefined` when not inside a `<Checkboxes>` group.
+ */
 export declare const useCheckboxesGroup: () => CheckboxesGroupContextValue | undefined;
+/**
+ * Hook to read just the shared `name` from a surrounding `<Radios>` group.
+ * Child `<Radio>` components fall back to this when no local `name` prop is set.
+ * Returns `undefined` outside of a `<Radios>` group.
+ */
 export declare const useRadiosName: () => string | undefined;
+/**
+ * Hook to read just the shared `name` from a surrounding `<Checkboxes>` group.
+ * Returns `undefined` outside of a `<Checkboxes>` group.
+ */
 export declare const useCheckboxesName: () => string | undefined;
+/** Provider for the Radios group context — used internally by Radios. */
 export declare const RadiosProvider: import("react").Provider<RadiosGroupContextValue | undefined>;
+/** Provider for the Checkboxes group context — used internally by Checkboxes. */
 export declare const CheckboxesProvider: import("react").Provider<CheckboxesGroupContextValue | undefined>;
+/** @deprecated Use `RadiosProvider` (provides {name, value, onChange}). */
 export declare const RadiosNameProvider: import("react").Provider<RadiosGroupContextValue | undefined>;
+/** @deprecated Use `CheckboxesProvider` (provides {name, value, onChange}). */
 export declare const CheckboxesNameProvider: import("react").Provider<CheckboxesGroupContextValue | undefined>;

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

@@ -2,6 +2,33 @@ import React from 'react';
 import { FieldProps } from './Field';
 import { ControlBaseProps } from './Control';
 import { InputBaseProps } from './InputBase';
+/**
+ * Props for the Input component.
+ *
+ * Composes Field, Control, and Input into a single convenience component.
+ * Supports all Input 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 {ControlBaseProps['iconRight']} [iconRight] - Icon props for right icon.
+ * @property {string} [iconLeftName] - Shortcut for left icon name.
+ * @property {string} [iconRightName] - Shortcut for right icon name.
+ * @property {ControlBaseProps['iconLeftSize']} [iconLeftSize] - Shortcut for left icon size.
+ * @property {ControlBaseProps['iconRightSize']} [iconRightSize] - Shortcut for right icon size.
+ * @property {boolean} [hasIconsLeft] - Force left icon container.
+ * @property {boolean} [hasIconsRight] - Force right 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 input.
+ * @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 InputProps extends InputBaseProps {
     label?: React.ReactNode;
     labelSize?: FieldProps['labelSize'];
@@ -23,5 +50,27 @@ export interface InputProps extends InputBaseProps {
     fieldClassName?: string;
     controlClassName?: string;
 }
+/**
+ * Input is a convenience component that composes Field, Control, and Input.
+ *
+ * Use this for typical form fields. For complex layouts (grouped fields,
+ * addons, etc.), compose Field, Control, and Input directly.
+ *
+ * @function
+ * @param {InputProps} props - Props for Input.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <Input label="Username" placeholder="Enter username" iconLeftName="user" />
+ *
+ * @example
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   message="Please enter a valid email"
+ *   messageColor="danger"
+ *   color="danger"
+ * />
+ */
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

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

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