@allxsmith/bestax-bulma 5.8.2 → 5.8.4

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/Checkboxes.d.ts

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

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

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

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

@@ -26,6 +26,12 @@ export interface RateIconProps {
  * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the container element.
  */
 export interface RateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, Omit<BulmaClassesProps, 'size'>, FormFieldProps {
+    /** Field label naming the rating group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` container — uses your `labelProps.id` when provided, otherwise a generated one; it also replaces the default `aria-label="Rating"`. 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;
+    };
     /** Form field name. When set, a hidden input is rendered. */
     name?: string;
     /** Optional id of the form this hidden input belongs to (use when the input lives outside the form element). */

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/useAutoLabelId.d.ts

@@ -25,4 +25,26 @@ export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, }:
     controlId: string | undefined;
     fieldLabelProps: FieldProps['labelProps'] | undefined;
 };
+interface UseAutoLabelledByOptions {
+    /** The convenience `label` prop as passed by the caller. */
+    label: React.ReactNode;
+    /** User-supplied labelProps, if any. */
+    labelProps?: FieldProps['labelProps'];
+    /** True when this render actually outputs the label naming the group. */
+    rendersLabel: boolean;
+}
+/**
+ * Group-input counterpart of {@link useAutoLabelId} (#494): a group of
+ * controls cannot take a single `htmlFor`, so instead the rendered `<label>`
+ * gets a generated id and the group container points at it with
+ * `aria-labelledby`. A user-supplied `labelProps.id` is used as the target
+ * instead of generating one. Any caller `htmlFor` is stripped — a group label
+ * names the group, never a single control — so the merged labelProps always
+ * carry an explicit `htmlFor: undefined`.
+ * Internal; not part of the public API.
+ */
+export declare function useAutoLabelledBy({ label, labelProps, rendersLabel, }: UseAutoLabelledByOptions): {
+    ariaLabelledBy: string | undefined;
+    fieldLabelProps: FieldProps['labelProps'] | undefined;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.8.2",
+  "version": "5.8.4",
   "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",