@allxsmith/bestax-bulma 5.8.1 → 5.8.3

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

@@ -16,9 +16,17 @@ export interface AutocompleteItem {
 /**
  * Props for the Autocomplete component.
  * @extraProp {string} [className] - Additional CSS classes.
- * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
+ * @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). */

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

@@ -12,11 +12,11 @@ import { DateInputBaseProps } from './DateInputBase';
  * @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). */
+    /** 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. */
+    /** 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;

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

@@ -10,11 +10,11 @@ import { DateTimeInputBaseProps } from './DateTimeInputBase';
  * @extraProp {boolean} [required=false] - Marks the field as required for native HTML form validation.
  */
 export interface DateTimeInputProps extends DateTimeInputBaseProps {
-    /** Field label. */
+    /** 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. */
+    /** 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;

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

@@ -12,11 +12,11 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, Omit<B
     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. */
+    /** Field label, rendered above the widget. `Field` itself does not associate it with any control — pass `labelProps={{ htmlFor }}` and a matching `id` on your control (the single-control convenience inputs do this automatically when they render their own `Field`). */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: 'small' | 'normal' | 'medium' | 'large';
-    /** Props for the label element. */
+    /** Props for the label element — where `htmlFor` goes when composing. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
         [key: string]: unknown;
     };

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

@@ -5,6 +5,12 @@ import { FormFieldProps } from './fieldProps';
  * 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. */

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

@@ -10,11 +10,11 @@ import { InputBaseProps } from './InputBase';
  * Control-level (icons, loading) props.
  */
 export interface InputProps extends InputBaseProps {
-    /** Field label. */
+    /** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];
-    /** Props for the label element. */
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
     labelProps?: FieldProps['labelProps'];
     /** Horizontal field layout. */
     horizontal?: boolean;

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

@@ -17,6 +17,12 @@ export type NumberinputVariant = 'plusminus' | 'stepper';
  * @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. */

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

@@ -10,11 +10,11 @@ import { SelectBaseProps } from './SelectBase';
  * Control-level (icons, loading) props.
  */
 export interface SelectProps extends SelectBaseProps {
-    /** Field label. */
+    /** Field label. Automatically associated with the select via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];
-    /** Props for the label element. */
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
     labelProps?: FieldProps['labelProps'];
     /** Horizontal field layout. */
     horizontal?: boolean;

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

@@ -22,6 +22,12 @@ export interface SliderMark {
  * Shared base props for single and range Slider modes.
  */
 interface SliderBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
+    /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the label targets the low (minimum) thumb. Dropped inside an outer `Field` (label that `Field` yourself). */
+    label?: React.ReactNode;
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
     /** Minimum value. */
     min?: number;
     /** Maximum value. */

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

@@ -17,9 +17,17 @@ type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
 /**
  * Props for the Taginput component.
  * @extraProp {string} [className] - Additional CSS classes.
- * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.
  */
 export interface TaginputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when the tag limit is reached (the input is not rendered) and dropped inside an outer `Field`. */
+    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 current tags (controlled). */
     value?: TaginputTag[];
     /** Default tags (uncontrolled). */

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

@@ -10,11 +10,11 @@ import { TextAreaBaseProps } from './TextAreaBase';
  * Control-level (loading) props.
  */
 export interface TextAreaProps extends TextAreaBaseProps {
-    /** Field label. */
+    /** Field label. Automatically associated with the textarea via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];
-    /** Props for the label element. */
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
     labelProps?: FieldProps['labelProps'];
     /** Horizontal field layout. */
     horizontal?: boolean;

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

@@ -12,11 +12,11 @@ import { TimeInputBaseProps } from './TimeInputBase';
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the underlying `<input>`.
  */
 export interface TimeInputProps extends TimeInputBaseProps {
-    /** Field label. */
+    /** 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. */
+    /** 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;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { FieldProps } from './Field';
+interface UseAutoLabelIdOptions {
+    /** The convenience `label` prop as passed by the caller. */
+    label: React.ReactNode;
+    /** User-supplied id for the control, if any. */
+    id?: string;
+    /** User-supplied labelProps, if any. */
+    labelProps?: FieldProps['labelProps'];
+    /**
+     * True when this render actually outputs the label wired to a control —
+     * false inside an outer Field (label is dropped), in variants that render
+     * no Field, and in modes with no labellable control (e.g. inline pickers).
+     */
+    rendersLabel: boolean;
+}
+/**
+ * Associates the convenience `label` prop with its control (#368): generates
+ * an id for the control and returns labelProps carrying a matching `htmlFor`.
+ * A user-supplied `id` is used as the target instead of the generated one, and
+ * an explicit `labelProps.htmlFor` disables generation entirely — the user has
+ * taken over the association. Internal; not part of the public API.
+ */
+export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, }: UseAutoLabelIdOptions): {
+    controlId: string | undefined;
+    fieldLabelProps: FieldProps['labelProps'] | undefined;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.8.1",
+  "version": "5.8.3",
   "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",