@allxsmith/bestax-bulma 5.16.4 → 5.16.6

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { PickerPosition, HourFormat, DayOfWeek, PickerLabels } from './_pickerInternals/pickerTypes.js';
+import { DateFormatOption } from './_pickerInternals/formatters.js';
+/**
+ * Props for the raw DateTimeInput base. Use the higher-level `DateTimeInput`
+ * for Field/Control composition. Combines the prop set of `DateInputBaseProps`
+ * and `TimeInputBaseProps`.
+ */
+export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
+    /** Controlled selected date-time. */
+    value?: Date | null;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: Date | null;
+    /** Fired when either the date or time portion changes. */
+    onChange?: (d: Date | null) => void;
+    /** Fired when the popover opens. */
+    onOpen?: () => void;
+    /** Fired when the popover closes. */
+    onClose?: () => void;
+    /** Lower bound for the combined date-time. */
+    min?: Date;
+    /** Upper bound for the combined date-time. */
+    max?: Date;
+    /** Disable the input. */
+    disabled?: boolean;
+    /** Read-only input. */
+    readOnly?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    /**
+     * Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD HH:mm'`.
+     * @defaultValue 'YYYY-MM-DD HH:mm'
+     */
+    format?: DateFormatOption;
+    /** Custom parser. */
+    parse?: (s: string) => Date | null;
+    /** BCP-47 locale tag. */
+    locale?: string;
+    /** Render the panel inline (no popover). */
+    inline?: boolean;
+    /** Use `<input type="datetime-local">` on coarse-pointer devices. */
+    mobileNative?: boolean | 'auto';
+    /** Allow segmented keyboard typing (type the date-time directly across all segments). `false` makes the field picker-only. */
+    editable?: boolean;
+    /** Whether the calendar + time popover exists. `false` makes the field input-only (segmented typing with no popover). Default `true`. */
+    popover?: boolean;
+    /** Open the popover on focus. Default `true`. */
+    openOnFocus?: boolean;
+    /** Off by default — users typically tweak both halves before committing. */
+    closeOnSelect?: boolean;
+    /** Popover anchor position. */
+    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';
+    /** Rounded input corners. */
+    isRounded?: boolean;
+    /** Disable specific dates. Blocked dates are also rejected during manual typing (the predicate receives the full candidate date-time — prefer day-based checks). */
+    shouldDisableDate?: (d: Date) => boolean;
+    /** Convenience array of disabled dates, matched by calendar day; also rejected by manual typing. */
+    unselectableDates?: Date[];
+    /** Day the calendar week starts on. */
+    firstDayOfWeek?: DayOfWeek;
+    /** Override the 7 day-name labels. */
+    dayNames?: string[];
+    /** Override the 12 month-name labels. */
+    monthNames?: string[];
+    /** Show dimmed dates from adjacent months. */
+    nearbyMonthDays?: boolean;
+    /** Time format. */
+    hourFormat?: HourFormat;
+    /** Show seconds column. Note: iOS Safari's native datetime-local picker UI does not include a seconds wheel; pass `mobileNative={false}` if you need one on iOS. */
+    enableSeconds?: boolean;
+    /** Hour step. */
+    incrementHours?: number;
+    /** Step between minute-wheel values (`1` = every minute, iOS-style). */
+    incrementMinutes?: number;
+    /** Step between second-wheel values (only with `enableSeconds`). */
+    incrementSeconds?: number;
+    /** Block specific times. Blocked times are also rejected during manual typing. */
+    unselectableTimes?: (d: Date) => 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;
+    /** Play a short audible tick on each time-wheel crossing. Default `false`. */
+    audioTick?: boolean;
+    /** Auto-route tactile feedback per wheel tick (vibrate on Android, audio thunk on iOS). Default `false`. */
+    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-cjs/form/Field.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Field component.
+ */
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Renders the field as horizontal (label and control side by side). */
+    horizontal?: boolean;
+    /** Group controls in a row (optionally centered, right, or multiline). */
+    grouped?: boolean | 'centered' | 'right' | 'multiline';
+    /** Group controls as addons (optionally centered or right-aligned). */
+    hasAddons?: boolean | 'centered' | 'right';
+    /** Constrains the field to its content's width (used inside horizontal field bodies). */
+    narrow?: boolean;
+    /** Field label, rendered above the widget. Automatically associated with a single composed `InputBase`, `SelectBase`, or `TextAreaBase` via a generated id and `htmlFor`. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls). */
+    label?: React.ReactNode;
+    /** Size for the label. */
+    labelSize?: 'small' | 'normal' | 'medium' | 'large';
+    /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    /** Text color for the field. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma color for the field. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color for the field. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Field content. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the FieldLabel component.
+ */
+export interface FieldLabelProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Size for the field label. */
+    size?: 'small' | 'normal' | 'medium' | 'large';
+    /** Text color for the label. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma color for the label. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color for the label. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Field label content. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the FieldBody component.
+ */
+export interface FieldBodyProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Text color for the field body. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma color for the field body. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Background color for the field body. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Field body content. */
+    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: React.FC<FieldLabelProps>;
+    Body: React.FC<FieldBodyProps>;
+    Control: React.ForwardRefExoticComponent<(Omit<{
+        as?: "div";
+    } & import("./Control.js").ControlBaseProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }, "ref"> | Omit<{
+        as: "p";
+    } & Omit<import("./Control.js").ControlBaseProps, keyof React.HTMLAttributes<HTMLDivElement>> & React.HTMLAttributes<HTMLParagraphElement> & {
+        ref?: React.Ref<HTMLParagraphElement>;
+    }, "ref">) & React.RefAttributes<HTMLDivElement | HTMLParagraphElement>>;
+};
+export default Field;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/**
+ * Props for the File component.
+ */
+export interface FileProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'type'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. 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;
+    };
+    /** Bulma color modifier for the file input. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Size modifier for the file input. */
+    size?: 'small' | 'medium' | 'large';
+    /** Boxed file input. */
+    isBoxed?: boolean;
+    /** Whether the file input expands to full width. */
+    isFullwidth?: boolean;
+    /** Whether the file input expands to full width. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */
+    isFullWidth?: boolean;
+    /** Position the CTA on the right (with `hasName`). */
+    isRight?: boolean;
+    /** Center the file input within its container. */
+    isCentered?: boolean;
+    /** Show a file name indicator. */
+    hasName?: boolean;
+    /** Text on the file CTA button (defaults to "Choose a file…"). */
+    buttonLabel?: React.ReactNode;
+    /** Left icon element. */
+    iconLeft?: React.ReactNode;
+    /** Right icon element. */
+    iconRight?: React.ReactNode;
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Additional CSS classes for the `<input>`. */
+    inputClassName?: string;
+    /** File name to display. */
+    fileName?: string;
+}
+/**
+ * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display.
+ *
+ * @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-cjs/form/FormContext.d.ts

@@ -0,0 +1,78 @@
+/**
+ * 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>;
+/**
+ * The id a labeled Field wants its single composed control to adopt (#495).
+ * `undefined` outside a Field, in unlabeled/grouped/addons Fields, or when the
+ * user took over the association with an explicit `labelProps.htmlFor`.
+ * Consumed only by the single-control bases (InputBase, SelectBase,
+ * TextAreaBase). Internal; not part of the public API.
+ */
+export declare const useFieldLabelId: () => string | undefined;
+/** Provider for the Field label-target id — used internally by Field. */
+export declare const FieldLabelIdProvider: import("react").Provider<string | undefined>;
+/**
+ * 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-cjs/form/Input.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { FieldProps } from './Field.js';
+import { ControlBaseProps } from './Control.js';
+import { InputBaseProps } from './InputBase.js';
+/**
+ * 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.
+ */
+export interface InputProps extends InputBaseProps {
+    /** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
+    label?: React.ReactNode;
+    /** Size for the label. */
+    labelSize?: FieldProps['labelSize'];
+    /** Props for the label element when the component renders its own `Field`; dropped inside an outer `Field` (use that `Field`'s `labelProps` instead). An explicit `htmlFor` key — even `undefined` — overrides the automatic association and no id is generated. */
+    labelProps?: FieldProps['labelProps'];
+    /** Horizontal field layout. */
+    horizontal?: boolean;
+    /** Icon props for left icon. */
+    iconLeft?: ControlBaseProps['iconLeft'];
+    /** Icon props for right icon. */
+    iconRight?: ControlBaseProps['iconRight'];
+    /** Shortcut for left icon name. */
+    iconLeftName?: string;
+    /** Shortcut for right icon name. */
+    iconRightName?: string;
+    /** Shortcut for left icon size. */
+    iconLeftSize?: ControlBaseProps['iconLeftSize'];
+    /** Shortcut for right icon size. */
+    iconRightSize?: ControlBaseProps['iconRightSize'];
+    /** Force left icon container. */
+    hasIconsLeft?: boolean;
+    /** Force right icon container. */
+    hasIconsRight?: boolean;
+    /** Shows loading indicator. */
+    isLoading?: boolean;
+    /** Expand the control. */
+    isExpanded?: boolean;
+    /** Control size. */
+    controlSize?: ControlBaseProps['size'];
+    /** Help/validation message below the input. */
+    message?: React.ReactNode;
+    /** Bulma color for the message. */
+    messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field. */
+    fieldClassName?: string;
+    /** Additional CSS classes for the Control. */
+    controlClassName?: string;
+}
+/**
+ * The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static/read-only state, hover/focus/loading states, and all Bulma helper props.
+ *
+ * @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-cjs/form/InputBase.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Input component.
+ */
+export interface InputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
+    /** Bulma color modifier for the input. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Size modifier for the input. */
+    size?: 'small' | 'medium' | 'large';
+    /** Rounded input corners. */
+    isRounded?: boolean;
+    /** Renders input as static (read only, styled). */
+    isStatic?: boolean;
+    /** Applies hovered state. */
+    isHovered?: boolean;
+    /** Applies focused state. */
+    isFocused?: boolean;
+    /** Shows loading indicator. */
+    isLoading?: boolean;
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Disabled input. */
+    disabled?: boolean;
+    /** Read-only input. */
+    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;

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/** Valid sizes for the Numberinput component. */
+export type NumberinputSize = 'small' | 'medium' | 'large';
+/** Valid colors for the Numberinput wrapper and control buttons. */
+export type NumberinputColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'light' | 'dark';
+/** Valid colors for the Numberinput inner input element. */
+export type NumberinputInputColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/** Position of the increment/decrement control buttons. */
+export type NumberinputControlsPosition = 'left' | 'right' | 'both';
+/** Visual variant for the Numberinput controls. */
+export type NumberinputVariant = 'plusminus' | 'stepper';
+/**
+ * Props for the Numberinput component.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
+ */
+export interface NumberinputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue' | 'type'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
+    /** Field label. Automatically associated with the number input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when no Field wrapper is rendered (inside a `Field`, or plusminus `bare`). */
+    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;
+    };
+    /** Controlled value. */
+    value?: number;
+    /** Default value for uncontrolled usage. */
+    defaultValue?: number;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Step increment (default: 1). */
+    step?: number;
+    /** Size variant. */
+    size?: NumberinputSize;
+    /** Color variant for buttons. */
+    color?: NumberinputColor;
+    /** Color of the input field itself. */
+    inputColor?: NumberinputInputColor;
+    /** Position of +/- buttons. */
+    controlsPosition?: NumberinputControlsPosition;
+    /** Use rounded buttons. */
+    controlsRounded?: boolean;
+    /** Uses compact button spacing. */
+    compact?: boolean;
+    /** Removes button borders and background. */
+    bare?: boolean;
+    /** Style variant for the control buttons. */
+    variant?: NumberinputVariant;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    /** Whether the input can be typed in. */
+    editable?: boolean;
+    /** Shows a loading state. */
+    isLoading?: boolean;
+    /** Enables exponential step increments when holding buttons. */
+    exponential?: boolean;
+    /** Callback when value changes. */
+    onChange?: (value: number) => void;
+}
+/**
+ * The `Numberinput` component provides a number input with increment/decrement buttons.
+ *
+ * @function
+ * @param {NumberinputProps} props - Props for the Numberinput component.
+ * @returns {JSX.Element} The rendered numeric input element.
+ *
+ * @example
+ * // Basic number input
+ * <Numberinput defaultValue={5} min={0} max={100} />
+ *
+ * @example
+ * // Stepper variant with color
+ * <Numberinput variant="stepper" color="primary" step={10} />
+ */
+export declare const Numberinput: React.ForwardRefExoticComponent<NumberinputProps & React.RefAttributes<HTMLInputElement>>;
+/** @deprecated Use `Numberinput` — same component. */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberinputProps & React.RefAttributes<HTMLInputElement>>;
+/** @deprecated Use `NumberinputProps`. */
+export type NumberInputProps = NumberinputProps;
+export default Numberinput;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Valid colors for the Radio component.
+ */
+export declare const radioColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Valid sizes for the Radio component.
+ */
+export declare const radioSizes: readonly ["small", "normal", "medium", "large"];
+/**
+ * Props for the Radio component.
+ */
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /** Color of the radio button. */
+    color?: (typeof radioColors)[number];
+    /** Size of the radio button. */
+    size?: (typeof radioSizes)[number];
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Whether the radio is disabled. */
+    disabled?: boolean;
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** The label/content for the radio. */
+    children?: React.ReactNode;
+}
+/**
+ * The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.
+ *
+ * @function
+ * @param {RadioProps} props - Props for the Radio component.
+ * @returns {JSX.Element} The rendered radio element.
+ *
+ * @example
+ * // Basic radio
+ * <Radio name="option">Option A</Radio>
+ *
+ * @example
+ * // Inside a group
+ * <Radios name="color" defaultValue="red">
+ *   <Radio value="red">Red</Radio>
+ *   <Radio value="blue">Blue</Radio>
+ * </Radios>
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/**
+ * Props for the Radios component.
+ */
+export interface RadiosProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` 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 Radio in the group (via context). */
+    name?: string;
+    /** Currently-selected value (controlled mode). */
+    value?: string;
+    /** Initial selected value (uncontrolled mode). */
+    defaultValue?: string;
+    /** Fires when the selection changes. */
+    onChange?: (value: string) => void;
+    /** Radio elements to render in the group. */
+    children: React.ReactNode;
+}
+export declare const Radios: React.FC<RadiosProps> & {
+    Radio: React.ForwardRefExoticComponent<import("./Radio.js").RadioProps & React.RefAttributes<HTMLInputElement>>;
+};
+export default Radios;