@allxsmith/bestax-bulma 5.16.4 → 5.16.6

package/dist/types-cjs/elements/Thead.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @group Table
+ */
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Thead component.
+ */
+export interface TheadProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Table header content (rows). */
+    children?: React.ReactNode;
+}
+/**
+ * Thead component for rendering a styled Bulma table header.
+ *
+ * Supports Bulma helper classes for additional styling.
+ *
+ * @function
+ * @param {TheadProps} props - Props for the Thead component.
+ * @returns {JSX.Element} The rendered table header element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
+ */
+export declare const Thead: React.FC<TheadProps>;

package/dist/types-cjs/elements/Title.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Valid size values for the Title component (Bulma title sizes): `'1'`–`'6'` as a string or number (`3` and `'3'` are equivalent).
+ */
+export type TitleSize = '1' | '2' | '3' | '4' | '5' | '6' | 1 | 2 | 3 | 4 | 5 | 6;
+declare const validTitleElements: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
+/**
+ * Valid HTML elements for the Title component.
+ */
+export type TitleElement = (typeof validTitleElements)[number];
+/**
+ * Props for the Title component.
+ * @extraProp {boolean} [skeleton] - Applies the `is-skeleton` class to the entire component.
+ */
+export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement | HTMLParagraphElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Size of the title (Bulma sizes `1`-`6`, as a string or number). */
+    size?: TitleSize;
+    /** Adds margin below the title. */
+    isSpaced?: boolean;
+    /** HTML element to render as (h1-h6 or p). */
+    as?: TitleElement;
+    /** Applies the `has-skeleton` class to part of the content. */
+    hasSkeleton?: boolean;
+    /** Title content. */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
+ *
+ * @function
+ * @param {TitleProps} props - Props for the Title component.
+ * @returns {JSX.Element} The rendered title element.
+ * @see {@link https://bulma.io/documentation/elements/title/ | Bulma Title documentation}
+ */
+export declare const Title: React.FC<TitleProps>;
+export default Title;

package/dist/types-cjs/elements/Tr.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @group Table
+ */
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { TableColor } from './Td.js';
+/**
+ * Props for the Tr component.
+ */
+export interface TrProps extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Whether the row is selected (adds Bulma's is-selected class). */
+    isSelected?: boolean;
+    /** Bulma color modifier for the table row. */
+    color?: TableColor;
+    /** Table row content (cells). */
+    children?: React.ReactNode;
+}
+/**
+ * Tr component for rendering a styled Bulma table row.
+ *
+ * Supports the is-selected modifier and color modifiers.
+ *
+ * @function
+ * @param {TrProps} props - Props for the Tr component.
+ * @returns {JSX.Element} The rendered table row element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-row | Bulma Table documentation}
+ */
+export declare const Tr: React.FC<TrProps>;

package/dist/types-cjs/elements/UnorderedList.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the UnorderedList component.
+ */
+export interface UnorderedListProps extends React.HTMLAttributes<HTMLUListElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** List items to render inside the list. */
+    children?: React.ReactNode;
+}
+export declare const UnorderedList: React.FC<UnorderedListProps> & {
+    Item: React.FC<import("./ListItem.js").ListItemProps>;
+};

package/dist/types-cjs/elements/iconProps.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { IconProps } from './Icon.js';
+/**
+ * Distinguishes an `IconProps` object from a plain custom node (an inline SVG, a
+ * `react-icons` component, …) in a slot that accepts either — `Control`'s
+ * `iconLeft`/`iconRight`, `IconText`'s `iconProps`.
+ *
+ * One copy, imported by both consumers: two hand-maintained copies, one per
+ * consumer, is how the deprecated `icon` path came to crash both (#663).
+ *
+ * Its own module rather than `Icon.tsx` because `src/index.ts` wildcard-exports
+ * that file, and everything published there is public forever. `polymorphic.ts`
+ * makes the same call for `isCustomElement`: an internal discriminator is not
+ * something to support for the life of the package.
+ *
+ * It tests each member's VALUE, not merely its key, and only after everything
+ * React owns is out of the way. `'icon' in value` was enough
+ * to claim a Font Awesome `IconDefinition` — `{ prefix, iconName, icon: [w, h, …,
+ * path] }` — whose `icon` is a path array rather than a class string. That object
+ * is not a renderable node either, so the honest outcome is the one this slot has
+ * always had for it: the node branch, and React's own "Objects are not valid as a
+ * React child". Claiming it here instead rendered a blank container that still
+ * reserved layout.
+ *
+ * A member added to `IconProps` needs a line here, and a missed one is a crash
+ * rather than a fallthrough. That is the cost of a slot taking either a props
+ * object or a node; keeping the guard in one place is what keeps the cost to a
+ * single line.
+ */
+export declare function isIconProps(value: IconProps | React.ReactNode): value is IconProps;

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/**
+ * An item in the Autocomplete dropdown list.
+ */
+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.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.
+ */
+export interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onInput'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. 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;
+    };
+    /** Applied to the inner text input (the labellable control), not the wrapper div. */
+    id?: string;
+    /** 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;
+}
+/**
+ * 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.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.
+ * @returns {JSX.Element} The rendered autocomplete component.
+ *
+ * @example
+ * // Basic usage with string array
+ * <Autocomplete
+ *   data={['Apple', 'Banana', 'Cherry']}
+ *   placeholder="Search fruit..."
+ *   onSelect={(item) => console.log(item)}
+ * />
+ *
+ * @example
+ * // With object data
+ * <Autocomplete
+ *   data={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]}
+ *   field="label"
+ *   onSelect={(item) => console.log(item)}
+ * />
+ */
+export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLInputElement>>;
+export default Autocomplete;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Valid colors for the Checkbox component.
+ */
+export declare const checkboxColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Valid sizes for the Checkbox component.
+ */
+export declare const checkboxSizes: readonly ["small", "normal", "medium", "large"];
+/**
+ * Props for the Checkbox component.
+ */
+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;
+}
+/**
+ * The `Checkbox` component provides a Bulma-styled checkbox input.
+ *
+ * @function
+ * @param {CheckboxProps} props - Props for the Checkbox component.
+ * @returns {JSX.Element} The rendered checkbox element.
+ *
+ * @example
+ * // Basic checkbox
+ * <Checkbox>Accept terms</Checkbox>
+ *
+ * @example
+ * // Inside a group
+ * <Checkboxes name="tags" defaultValue={['react']}>
+ *   <Checkbox value="react">React</Checkbox>
+ *   <Checkbox value="vue">Vue</Checkbox>
+ * </Checkboxes>
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/**
+ * Props for the Checkboxes component.
+ */
+export interface CheckboxesProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="group"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
+    label?: React.ReactNode;
+    /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    /** 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> & {
+    Checkbox: React.ForwardRefExoticComponent<import("./Checkbox.js").CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+};
+export default Checkboxes;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import { IconProps } from '../elements/Icon.js';
+/**
+ * Props for the Control component.
+ */
+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, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph. */
+    iconLeft?: IconProps | React.ReactNode;
+    /** Icon props for right icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph. */
+    iconRight?: IconProps | React.ReactNode;
+    /** 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;
+}
+/**
+ * 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.
+ * @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<{
+    /** 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-cjs/form/DateInput.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { FieldProps } from './Field.js';
+import { ControlBaseProps } from './Control.js';
+import { DateInputBaseProps } from './DateInputBase.js';
+/**
+ * Props for the DateInput convenience wrapper. Extends `DateInputBaseProps`
+ * with Field-level (label, horizontal) and Control-level (icons, loading) props.
+ * @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;
+}
+/**
+ * The `DateInput` component is a form input that opens a popover calendar for date selection.
+ *
+ * @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-cjs/form/DateInputBase.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { PickerPosition, DayOfWeek, PickerLabels } from './_pickerInternals/pickerTypes.js';
+import { DateFormatOption } from './_pickerInternals/formatters.js';
+/**
+ * Props for the raw DateInput base. Use the higher-level `DateInput` for
+ * Field/Control composition; `DateInputBase` is the input + popover only.
+ */
+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;
+}
+/**
+ * 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-cjs/form/DateTimeInput.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { FieldProps } from './Field.js';
+import { ControlBaseProps } from './Control.js';
+import { DateTimeInputBaseProps } from './DateTimeInputBase.js';
+/**
+ * Props for the DateTimeInput convenience wrapper. Extends
+ * `DateTimeInputBaseProps` with Field-level and Control-level props.
+ * @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;
+}
+/**
+ * The `DateTimeInput` combines a calendar and a time **wheel spinner** in a single popover — an iOS-style layout.
+ *
+ * @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;