@allxsmith/bestax-bulma 5.8.0 → 5.8.2

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

@@ -3,86 +3,83 @@ import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
 /**
  * An item in the Autocomplete dropdown list.
- *
- * @property {string} value - The value used for filtering and selection.
- * @property {string} [label] - Display label (falls back to value if omitted).
- * @property {boolean} [disabled] - Whether the item is disabled and unselectable.
  */
 export interface AutocompleteItem {
+    /** The value used for filtering and selection. */
     value: string;
+    /** Display label (optional). */
     label?: string;
+    /** Whether the item is disabled and unselectable. */
     disabled?: boolean;
     [key: string]: unknown;
 }
 /**
  * Props for the Autocomplete component.
- *
- * @property {AutocompleteItem[] | string[]} data - The options data to display.
- * @property {string} [value] - The current input value (controlled).
- * @property {AutocompleteItem | string | null} [selected] - The selected item (controlled).
- * @property {string} [placeholder] - Placeholder text for the input.
- * @property {string} [field] - Object property to use as the display field.
- * @property {boolean} [clearable] - Whether to show a clear button.
- * @property {boolean} [openOnFocus] - Open dropdown when input is focused.
- * @property {boolean} [keepFirst] - Keep first option highlighted.
- * @property {boolean} [keepOpen] - Keep dropdown open after selection.
- * @property {boolean} [selectOnClickOutside] - Select highlighted item on click outside.
- * @property {number} [maxHeight] - Maximum dropdown height in pixels.
- * @property {boolean} [dropdown] - Render as dropdown style.
- * @property {boolean} [loading] - Show loading state.
- * @property {boolean} [disabled] - Whether the input is disabled.
- * @property {boolean} [checkInfiniteScroll] - Enable infinite scroll detection.
- * @property {number} [infiniteScrollDistance] - Distance threshold for infinite scroll.
- * @property {(value: string) => void} [onInput] - Callback when input value changes.
- * @property {(item: AutocompleteItem | string | null) => void} [onSelect] - Callback when item is selected.
- * @property {(active: boolean) => void} [onActiveChange] - Callback when dropdown active state changes.
- * @property {() => void} [onInfiniteScroll] - Callback when scrolled to bottom (infinite scroll).
- * @property {(item: AutocompleteItem | string) => React.ReactNode} [itemTemplate] - Custom render for items.
- * @property {React.ReactNode} [header] - Custom header in dropdown.
- * @property {React.ReactNode} [footer] - Custom footer in dropdown.
- * @property {React.ReactNode} [empty] - Content to show when no results.
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the input.
- * @property {'small' | 'medium' | 'large'} [size] - Size modifier for the input.
- * @property {string} [name] - Form field name; forwarded to the inner input so the typed/selected value submits with the surrounding form.
- * @property {string} [form] - The id of the form the input belongs to.
- * @property {boolean} [required] - Whether the input is required.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
  */
 export interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onInput'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** The options data to display (required). */
     data: AutocompleteItem[] | string[];
+    /** The current input value (controlled). */
     value?: string;
+    /** The selected item (controlled). */
     selected?: AutocompleteItem | string | null;
+    /** Placeholder text for the input. */
     placeholder?: string;
+    /** Object property to use as the display field. */
     field?: string;
+    /** Whether to show a clear button. */
     clearable?: boolean;
+    /** Open dropdown when input is focused. */
     openOnFocus?: boolean;
+    /** Keep first option highlighted. */
     keepFirst?: boolean;
+    /** Keep dropdown open after selection. */
     keepOpen?: boolean;
+    /** Select highlighted item on click outside. */
     selectOnClickOutside?: boolean;
+    /** Maximum dropdown height in pixels. */
     maxHeight?: number;
+    /** Render as dropdown style. */
     dropdown?: boolean;
+    /** Show loading state. */
     loading?: boolean;
+    /** Whether the input is disabled. */
     disabled?: boolean;
+    /** Enables infinite scroll detection in the dropdown. */
     checkInfiniteScroll?: boolean;
+    /** Distance in pixels from the bottom to trigger `onInfiniteScroll`. */
     infiniteScrollDistance?: number;
+    /** Input color variant. */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Size variant. */
     size?: 'small' | 'medium' | 'large';
+    /** Form field name. Forwarded to the inner `<input>`. */
     name?: string;
+    /** Optional id of the form the input belongs to. */
     form?: string;
+    /** Marks the field as required for native HTML form validation. */
     required?: boolean;
+    /** Callback when input value changes. */
     onInput?: (value: string) => void;
+    /** Callback when item is selected. */
     onSelect?: (item: AutocompleteItem | string | null) => void;
+    /** Callback when dropdown active state changes. */
     onActiveChange?: (active: boolean) => void;
+    /** Callback when scrolled to bottom (infinite scroll). */
     onInfiniteScroll?: () => void;
+    /** Custom render for items. */
     itemTemplate?: (item: AutocompleteItem | string) => React.ReactNode;
+    /** Custom header in dropdown. */
     header?: React.ReactNode;
+    /** Custom footer in dropdown. */
     footer?: React.ReactNode;
+    /** Content to show when no results. */
     empty?: React.ReactNode;
 }
 /**
- * Autocomplete component with dropdown suggestions.
- *
- * Provides an input field with a dropdown of suggestions that filter
- * based on user input.
+ * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
  *
  * @function
  * @param {AutocompleteProps} props - Props for the Autocomplete component.

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

@@ -10,34 +10,23 @@ export declare const checkboxColors: readonly ["primary", "link", "info", "succe
 export declare const checkboxSizes: readonly ["small", "normal", "medium", "large"];
 /**
  * Props for the Checkbox component.
- *
- * @property {(typeof checkboxColors)[number]} [color] - Color variant for the checkbox.
- * @property {(typeof checkboxSizes)[number]} [size] - Size of the checkbox.
- * @property {boolean} [disabled] - Whether the checkbox 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 checkbox.
- * @see Bulma Checkbox documentation: https://bulma.io/documentation/form/checkbox/
  */
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /** Color of the checkbox. */
     color?: (typeof checkboxColors)[number];
+    /** Size of the checkbox. */
     size?: (typeof checkboxSizes)[number];
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Whether the checkbox is disabled. */
     disabled?: boolean;
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** The label/content for the checkbox. */
     children?: React.ReactNode;
 }
 /**
- * Bulma Checkbox component with themed styling support.
- *
- * Renders a custom-styled checkbox with a visual check indicator,
- * supporting colors, sizes, and various states. Inside a `<Checkboxes>`
- * group, Checkbox inherits `name` and (when the group is in controlled or
- * uncontrolled mode) derives its `checked` state from membership in the
- * group's `value` array. On click, dispatches the new array via the group's
- * `onChange`.
- *
- * Local props always win over group context.
+ * The `Checkbox` component provides a Bulma-styled checkbox input.
  *
  * @function
  * @param {CheckboxProps} props - Props for the Checkbox component.

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

@@ -3,20 +3,19 @@ import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
 /**
  * Props for the Checkboxes component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {string} [name] - Form field name shared by every Checkbox in the group.
- * @property {string[]} [value] - Currently-selected values (controlled mode).
- * @property {string[]} [defaultValue] - Initial selected values (uncontrolled mode).
- * @property {(values: string[]) => void} [onChange] - Fired when the selection changes. Receives the new array of selected values.
- * @property {React.ReactNode} [children] - Checkbox elements to render in the group.
  */
 export interface CheckboxesProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Form field name shared by every Checkbox in the group (via context). */
     name?: string;
+    /** Currently-selected values (controlled mode). */
     value?: string[];
+    /** Initial selected values (uncontrolled mode). */
     defaultValue?: string[];
+    /** Fires when the selection changes; receives the new array. */
     onChange?: (values: string[]) => void;
+    /** Checkbox elements to render in the group. */
     children?: React.ReactNode;
 }
 export declare const Checkboxes: React.FC<CheckboxesProps> & {

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

@@ -3,46 +3,43 @@ 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'> {
+    /** Adds left icon container. */
     hasIconsLeft?: boolean;
+    /** Adds right icon container. */
     hasIconsRight?: boolean;
+    /** Shows loading indicator. */
     isLoading?: boolean;
+    /** Makes the control expand to fill available space. */
     isExpanded?: boolean;
+    /** Sets the control size. */
     size?: 'small' | 'medium' | 'large';
+    /** Sets text color. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma color for the control. */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Icon props for left icon. */
     iconLeft?: IconProps;
+    /** Icon props for right icon. */
     iconRight?: IconProps;
+    /** Shortcut for left icon name. */
     iconLeftName?: string;
+    /** Shortcut for left icon size. */
     iconLeftSize?: 'small' | 'medium' | 'large';
+    /** Shortcut for right icon name. */
     iconRightName?: string;
+    /** Shortcut for right icon size. */
     iconRightSize?: 'small' | 'medium' | 'large';
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Content inside the control. */
     children?: React.ReactNode;
 }
 /**
- * Bulma Control component for form controls, with icons, loading, and Bulma helper support.
+ * The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state, expansion, size, and Bulma helper props for layout and color.
  *
  * @function
  * @param {ControlProps} props - Props for the Control component.
@@ -56,12 +53,16 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
  * </Control>
  */
 export declare const Control: React.ForwardRefExoticComponent<(Omit<{
+    /** Element type for the control (`div` by default). */
     as?: "div";
 } & ControlBaseProps & {
+    /** Ref for the control element. */
     ref?: React.Ref<HTMLDivElement>;
 }, "ref"> | Omit<{
+    /** Element type for the control (`div` by default). */
     as: "p";
 } & Omit<ControlBaseProps, keyof React.HTMLAttributes<HTMLDivElement>> & React.HTMLAttributes<HTMLParagraphElement> & {
+    /** Ref for the control element. */
     ref?: React.Ref<HTMLParagraphElement>;
 }, "ref">) & React.RefAttributes<HTMLDivElement | HTMLParagraphElement>>;
 export default Control;

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

@@ -5,52 +5,52 @@ 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.
+ * @extraProp {string} [name] - Form field name. Forwarded to a hidden ISO-formatted input.
+ * @extraProp {string} [form] - Form id the input belongs to.
+ * @extraProp {boolean} [required=false] - Marks the input as required.
+ * @extraProp {string} [className] - Additional CSS classes for the input.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the underlying `<input>`.
  */
 export interface DateInputProps extends DateInputBaseProps {
+    /** Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`. */
     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'];
+    /** Render the field with horizontal layout. */
     horizontal?: boolean;
+    /** Icon props for the left icon. */
     iconLeft?: ControlBaseProps['iconLeft'];
+    /** Icon props for the right icon. */
     iconRight?: ControlBaseProps['iconRight'];
+    /** Shortcut for the right icon name. */
     iconRightName?: string;
+    /** Shortcut for left icon size. */
     iconLeftSize?: ControlBaseProps['iconLeftSize'];
+    /** Shortcut for right icon size. */
     iconRightSize?: ControlBaseProps['iconRightSize'];
+    /** Force the left icon container. */
     hasIconsLeft?: boolean;
+    /** Force the right icon container. */
     hasIconsRight?: boolean;
+    /** Show a loading indicator on the control. */
     isLoading?: boolean;
+    /** Expand the control to fill its container. */
     isExpanded?: boolean;
+    /** Size of the wrapping Control. */
     controlSize?: ControlBaseProps['size'];
+    /** Help/validation text below the input. */
     message?: React.ReactNode;
+    /** Color modifier for the help message. */
     messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field wrapper. */
     fieldClassName?: string;
+    /** Additional CSS classes for the Control wrapper. */
     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.
+ * The `DateInput` component is a form input that opens a popover calendar for date selection.
  *
  * @function
  * @param {DateInputProps} props - Props for the DateInput.

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

@@ -5,74 +5,76 @@ 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'> {
+    /** Controlled selected date. */
     value?: Date | null;
+    /** Initial date for uncontrolled usage. */
     defaultValue?: Date | null;
+    /** Fired when the value changes. */
     onChange?: (d: Date | null) => void;
+    /** Fired when the popover opens. */
     onOpen?: () => void;
+    /** Fired when the popover closes. */
     onClose?: () => void;
+    /** Earliest selectable date. */
     min?: Date;
+    /** Latest selectable date. */
     max?: Date;
+    /** Disable the input. */
     disabled?: boolean;
+    /** Make the input read-only. */
     readOnly?: boolean;
+    /** Placeholder text for the input. */
     placeholder?: string;
+    /**
+     * Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD'`.
+     * @defaultValue 'YYYY-MM-DD'
+     */
     format?: DateFormatOption;
+    /** Custom parser (use when `format` is `Intl.DateTimeFormatOptions`). */
     parse?: (s: string) => Date | null;
+    /** BCP-47 locale tag for day/month names and Intl formatting. */
     locale?: string;
+    /** Render the calendar inline (no popover). */
     inline?: boolean;
+    /** Use `<input type="date">` on coarse-pointer + small-viewport devices. */
     mobileNative?: boolean | 'auto';
+    /** Allow segmented keyboard typing in the input (type the date directly, auto-advancing across segments). `false` makes the field picker-only. */
     editable?: boolean;
+    /** Whether the calendar popover exists. `false` makes the field input-only (segmented typing, no popover). */
     popover?: boolean;
+    /** Open the popover when the input is focused. */
     openOnFocus?: boolean;
+    /** Close the popover after a date is selected. */
     closeOnSelect?: boolean;
+    /** Popover anchor position relative to the input. */
     position?: PickerPosition;
+    /** Render the popover into `document.body` via portal. */
     appendToBody?: boolean;
+    /** Bulma color modifier. */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Size variant. */
     size?: 'small' | 'medium' | 'large';
+    /** Render the input with rounded corners. */
     isRounded?: boolean;
+    /** Predicate to disable specific dates (e.g. weekends). Blocked dates are also rejected during manual typing. */
     shouldDisableDate?: (d: Date) => boolean;
+    /** Convenience array of disabled dates; merged with `shouldDisableDate`. Matched by calendar day and also rejected during manual typing. */
     unselectableDates?: Date[];
+    /** Day the week starts on (0 = Sunday). */
     firstDayOfWeek?: DayOfWeek;
+    /** Override the 7 day-name labels (in calendar order, post-rotation). */
     dayNames?: string[];
+    /** Override the 12 month-name labels. */
     monthNames?: string[];
+    /** Show dimmed dates from adjacent months in the grid. */
     nearbyMonthDays?: boolean;
+    /** Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide. */
     iconLeftName?: string;
+    /** Show a clickable launcher button on the right that toggles the popover. Default `true`. */
     triggerIcon?: boolean;
+    /** Glyph for the right launcher button. */
     triggerIconName?: string;
     /** Optional translatable string overrides (ARIA labels, button text). */
     labels?: PickerLabels;

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

@@ -5,50 +5,50 @@ 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.
+ * @extraProp {string} [name] - Form field name.
+ * @extraProp {string} [form] - Optional id of the form the input belongs to.
+ * @extraProp {boolean} [required=false] - Marks the field as required for native HTML form validation.
  */
 export interface DateTimeInputProps extends DateTimeInputBaseProps {
+    /** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`. */
     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'];
+    /** Render the field with horizontal layout. */
     horizontal?: boolean;
+    /** Icon props for the left icon. */
     iconLeft?: ControlBaseProps['iconLeft'];
+    /** Icon props for the right icon. */
     iconRight?: ControlBaseProps['iconRight'];
+    /** Shortcut for the right icon name. */
     iconRightName?: string;
+    /** Shortcut for left icon size. */
     iconLeftSize?: ControlBaseProps['iconLeftSize'];
+    /** Shortcut for right icon size. */
     iconRightSize?: ControlBaseProps['iconRightSize'];
+    /** Force the left icon container. */
     hasIconsLeft?: boolean;
+    /** Force the right icon container. */
     hasIconsRight?: boolean;
+    /** Show a loading indicator on the control. */
     isLoading?: boolean;
+    /** Expand the control to fill its container. */
     isExpanded?: boolean;
+    /** Size of the wrapping Control. */
     controlSize?: ControlBaseProps['size'];
+    /** Help/validation text below the input. */
     message?: React.ReactNode;
+    /** Message color. */
     messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field wrapper. */
     fieldClassName?: string;
+    /** Additional CSS classes for the Control wrapper. */
     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.
+ * The `DateTimeInput` combines a calendar and a time **wheel spinner** in a single popover — an iOS-style layout.
  *
  * @function
  * @param {DateTimeInputProps} props