@allxsmith/bestax-bulma 5.52.0 → 5.54.0

package/dist/esm/form/Fieldset.js

@@ -0,0 +1,64 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useFieldsetDisabled, FieldProvider, ControlProvider, FieldLabelIdProvider, FieldLabelElementIdProvider, FieldLabelForProvider, FieldLabelForReportProvider, FieldsetDisabledProvider } from './FormContext.js';
+
+// What an unlabeled Field passes on: no label names anything inside.
+const NO_LABEL = {};
+/**
+ * The `Fieldset` component groups a section of a form in a native
+ * `<fieldset>`, named by its `legend`, which a `disabled` switches off as a
+ * whole.
+ *
+ * It starts its own Field scope: inside it, nothing reads as inside a
+ * `Field` or `Control`, so the convenience inputs render their own `Field`,
+ * and a labeled `Field` around the Fieldset names nothing in it.
+ *
+ * @function
+ * @param {FieldsetProps} props - Props for the Fieldset component.
+ * @returns {JSX.Element} The rendered fieldset.
+ *
+ * @example
+ * <Fieldset legend="Shipping address" message="We only ship within the EU.">
+ *   <Input label="Street" name="street" />
+ *   <Input label="City" name="city" />
+ * </Fieldset>
+ *
+ * @example
+ * // A form that's saving
+ * <Fieldset disabled={saving} variant="unstyled">
+ *   <Input label="Name" name="name" />
+ *   <Rate label="Rating" name="rating" />
+ * </Fieldset>
+ */
+const Fieldset = forwardRef(({ legend, legendProps, variant = 'default', disabled, message, messageColor, textColor, bgColor, className, children, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('fieldset', {
+        'is-filled': variant === 'filled',
+        'is-unstyled': variant === 'unstyled',
+    });
+    const legendClass = usePrefixedClassNames('fieldset-legend');
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    // The legend's controls take the state from outside, as the browser
+    // leaves the first legend's controls enabled, and the content takes this
+    // Fieldset's on top of it, as a disabled one disables those inside it.
+    const outerDisabled = useFieldsetDisabled(undefined);
+    const groupDisabled = !!disabled || outerDisabled;
+    const messageId = `${useId()}-message`;
+    const describedBy = [ariaDescribedBy, message ? messageId : undefined]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (jsx(FieldProvider, { value: false, children: jsx(ControlProvider, { value: false, children: jsx(FieldLabelIdProvider, { value: undefined, children: jsx(FieldLabelElementIdProvider, { value: undefined, children: jsx(FieldLabelForProvider, { value: NO_LABEL, children: jsx(FieldLabelForReportProvider, { value: undefined, children: jsxs("fieldset", { ref: ref, className: classNames(mainClass, bulmaHelperClasses, className), disabled: disabled, "aria-describedby": describedBy, ...rest, children: [legend ? (jsx("legend", { ...legendProps, className: classNames(legendClass, legendProps?.className), children: legend })) : null, jsx(FieldsetDisabledProvider, { value: groupDisabled, children: children }), message ? (jsx("p", { id: messageId, className: helpClass, children: message })) : null] }) }) }) }) }) }) }));
+});
+Fieldset.displayName = 'Fieldset';
+
+export { Fieldset };
+//# sourceMappingURL=Fieldset.js.map

package/dist/esm/form/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sources":["../../../src/form/Fieldset.tsx"],"sourcesContent":["import React, { forwardRef, useId } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport {\n  ControlProvider,\n  FieldLabelElementIdProvider,\n  FieldLabelFor,\n  FieldLabelForProvider,\n  FieldLabelForReportProvider,\n  FieldLabelIdProvider,\n  FieldProvider,\n  FieldsetDisabledProvider,\n  useFieldsetDisabled,\n} from './FormContext';\nimport type { FormFieldProps } from './fieldProps';\n\n/** The looks a Fieldset comes in. */\nexport type FieldsetVariant = 'default' | 'filled' | 'unstyled';\n\n/**\n * Props for the Fieldset component. The helper props, the other attributes\n * and the `ref` land on its `<fieldset>`.\n *\n * @extraProp {React.Ref<HTMLFieldSetElement>} [ref] - Ref forwarded to the `<fieldset>`, whose `elements` lists the controls inside.\n * @extraProp {string} [aria-describedby] - Ids of more text that describes the group. The `message`'s id is added after them.\n * @extraProp {string} [name] - The fieldset's name in its form's `elements`. Nothing is submitted under it.\n */\nexport interface FieldsetProps\n  extends\n    Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * The group's name, shown in a `<legend>`, which names the fieldset with no\n   * ids to wire. The `default` and `filled` variants draw it on the border,\n   * and `unstyled` above the content. Controls you put in it, such as a\n   * `Checkbox` that turns the section on, stay enabled when the Fieldset is\n   * disabled, as the browser leaves them.\n   */\n  legend?: React.ReactNode;\n  /** Props for the `<legend>`, such as an `id` or a `className`. */\n  legendProps?: React.HTMLAttributes<HTMLLegendElement>;\n  /**\n   * The look: `default` draws a border round the group, `filled` adds a\n   * tinted background, and `unstyled` draws no box at all, which suits a\n   * Fieldset that's there to name or disable a group.\n   */\n  variant?: FieldsetVariant;\n  /**\n   * Disables every control inside. The browser disables the native ones and\n   * leaves them out of the form's data, and each bestax input with a\n   * `disabled` prop takes this as that prop's default, which also stops\n   * widgets the browser doesn't reach, such as `Rate`'s stars and the time\n   * wheels, and gives them their disabled look. An input's own `disabled`\n   * still wins when you set it, though the browser keeps its native parts\n   * disabled whatever it says. Links and `LinkButton`s stay operable, as in\n   * plain HTML.\n   */\n  disabled?: boolean;\n  /**\n   * Help text under the group. It describes the fieldset through\n   * `aria-describedby`, alongside any ids you pass there. Nothing passes it\n   * to the inputs, so each still shows its own errors.\n   */\n  message?: React.ReactNode;\n  /** Bulma color for the message. */\n  messageColor?: FormFieldProps['messageColor'];\n  /** Text color helper, for the text in the group. The legend keeps its own color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** The group's content, such as `Field`s and inputs. */\n  children?: React.ReactNode;\n}\n\n// What an unlabeled Field passes on: no label names anything inside.\nconst NO_LABEL: FieldLabelFor = {};\n\n/**\n * The `Fieldset` component groups a section of a form in a native\n * `<fieldset>`, named by its `legend`, which a `disabled` switches off as a\n * whole.\n *\n * It starts its own Field scope: inside it, nothing reads as inside a\n * `Field` or `Control`, so the convenience inputs render their own `Field`,\n * and a labeled `Field` around the Fieldset names nothing in it.\n *\n * @function\n * @param {FieldsetProps} props - Props for the Fieldset component.\n * @returns {JSX.Element} The rendered fieldset.\n *\n * @example\n * <Fieldset legend=\"Shipping address\" message=\"We only ship within the EU.\">\n *   <Input label=\"Street\" name=\"street\" />\n *   <Input label=\"City\" name=\"city\" />\n * </Fieldset>\n *\n * @example\n * // A form that's saving\n * <Fieldset disabled={saving} variant=\"unstyled\">\n *   <Input label=\"Name\" name=\"name\" />\n *   <Rate label=\"Rating\" name=\"rating\" />\n * </Fieldset>\n */\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n  (\n    {\n      legend,\n      legendProps,\n      variant = 'default',\n      disabled,\n      message,\n      messageColor,\n      textColor,\n      bgColor,\n      className,\n      children,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      backgroundColor: bgColor,\n      ...props,\n    });\n\n    const mainClass = usePrefixedClassNames('fieldset', {\n      'is-filled': variant === 'filled',\n      'is-unstyled': variant === 'unstyled',\n    });\n    const legendClass = usePrefixedClassNames('fieldset-legend');\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n\n    // The legend's controls take the state from outside, as the browser\n    // leaves the first legend's controls enabled, and the content takes this\n    // Fieldset's on top of it, as a disabled one disables those inside it.\n    const outerDisabled = useFieldsetDisabled(undefined);\n    const groupDisabled = !!disabled || outerDisabled;\n\n    const messageId = `${useId()}-message`;\n    const describedBy =\n      [ariaDescribedBy, message ? messageId : undefined]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return (\n      <FieldProvider value={false}>\n        <ControlProvider value={false}>\n          <FieldLabelIdProvider value={undefined}>\n            <FieldLabelElementIdProvider value={undefined}>\n              <FieldLabelForProvider value={NO_LABEL}>\n                <FieldLabelForReportProvider value={undefined}>\n                  <fieldset\n                    ref={ref}\n                    className={classNames(\n                      mainClass,\n                      bulmaHelperClasses,\n                      className\n                    )}\n                    disabled={disabled}\n                    aria-describedby={describedBy}\n                    {...rest}\n                  >\n                    {legend ? (\n                      <legend\n                        {...legendProps}\n                        className={classNames(\n                          legendClass,\n                          legendProps?.className\n                        )}\n                      >\n                        {legend}\n                      </legend>\n                    ) : null}\n                    <FieldsetDisabledProvider value={groupDisabled}>\n                      {children}\n                    </FieldsetDisabledProvider>\n                    {message ? (\n                      <p id={messageId} className={helpClass}>\n                        {message}\n                      </p>\n                    ) : null}\n                  </fieldset>\n                </FieldLabelForReportProvider>\n              </FieldLabelForProvider>\n            </FieldLabelElementIdProvider>\n          </FieldLabelIdProvider>\n        </ControlProvider>\n      </FieldProvider>\n    );\n  }\n);\n\nFieldset.displayName = 'Fieldset';\n\nexport default Fieldset;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;AAgFA;AACA,MAAM,QAAQ,GAAkB,EAAE;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,MAAM,EACN,WAAW,EACX,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,EAAE;QAClD,WAAW,EAAE,OAAO,KAAK,QAAQ;QACjC,aAAa,EAAE,OAAO,KAAK,UAAU;AACtC,KAAA,CAAC;AACF,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,iBAAiB,CAAC;AAC5D,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAC9C,QAAA,CAAC,MAAM,YAAY,CAAA,CAAE,GAAG,CAAC,CAAC,YAAY;AACvC,KAAA,CAAC;;;;AAKF,IAAA,MAAM,aAAa,GAAG,mBAAmB,CAAC,SAAS,CAAC;AACpD,IAAA,MAAM,aAAa,GAAG,CAAC,CAAC,QAAQ,IAAI,aAAa;AAEjD,IAAA,MAAM,SAAS,GAAG,CAAA,EAAG,KAAK,EAAE,UAAU;AACtC,IAAA,MAAM,WAAW,GACf,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS;SAC9C,MAAM,CAAC,OAAO;AACd,SAAA,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS;AAE3B,IAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACzBA,GAAA,CAAC,eAAe,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAC3BA,GAAA,CAAC,oBAAoB,EAAA,EAAC,KAAK,EAAE,SAAS,EAAA,QAAA,EACpCA,GAAA,CAAC,2BAA2B,EAAA,EAAC,KAAK,EAAE,SAAS,EAAA,QAAA,EAC3CA,IAAC,qBAAqB,EAAA,EAAC,KAAK,EAAE,QAAQ,EAAA,QAAA,EACpCA,GAAA,CAAC,2BAA2B,EAAA,EAAC,KAAK,EAAE,SAAS,EAAA,QAAA,EAC3CC,IAAA,CAAA,UAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,kBAAkB,EAClB,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAAA,kBAAA,EACA,WAAW,EAAA,GACzB,IAAI,EAAA,QAAA,EAAA,CAEP,MAAM,IACLD,GAAA,CAAA,QAAA,EAAA,EAAA,GACM,WAAW,EACf,SAAS,EAAE,UAAU,CACnB,WAAW,EACX,WAAW,EAAE,SAAS,CACvB,EAAA,QAAA,EAEA,MAAM,EAAA,CACA,IACP,IAAI,EACRA,GAAA,CAAC,wBAAwB,EAAA,EAAC,KAAK,EAAE,aAAa,EAAA,QAAA,EAC3C,QAAQ,EAAA,CACgB,EAC1B,OAAO,IACNA,GAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAA,QAAA,EACnC,OAAO,EAAA,CACN,IACF,IAAI,CAAA,EAAA,CACC,EAAA,CACiB,EAAA,CACR,EAAA,CACI,EAAA,CACT,EAAA,CACP,EAAA,CACJ;AAEpB,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;"}

package/dist/esm/form/File.js

@@ -4,6 +4,7 @@ import { forwardRef, useState, useEffect } from 'react';
 import { prefixedClassNames, usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { useConfig } from '../helpers/Config.js';
+import { useNumberFormat } from '../helpers/localeFormat.js';
 import { useInsideField, useInsideControl, rendersOwnField } from './FormContext.js';
 import { Field } from './Field.js';
 import { useAutoLabelId } from './useAutoLabelId.js';
@@ -47,10 +48,12 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
             : undefined);
         onChange?.(event);
     };
+    const formatNumber = useNumberFormat();
     const pickedText = picked &&
         (picked.count === 1
             ? picked.firstName
-            : (pickedFilesLabel?.(picked.count) ?? `${picked.count} files`));
+            : (pickedFilesLabel?.(picked.count) ??
+                `${formatNumber ? formatNumber(picked.count) : picked.count} files`));
     const shownName = fileName ?? pickedText;
     const insideField = useInsideField();
     const insideControl = useInsideControl();

package/dist/esm/form/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sources":["../../../src/form/File.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n} from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the File component.\n * Inside an outer `Field`, or a `Control` with no `Field` around it, it\n * renders no `Field` of its own. The exception is `label`, `message`,\n * `horizontal` or `fieldClassName` in that bare `Control`: it keeps a `Field`\n * for them, nested in the `.control`, and warns in development. Wrap the\n * `Control` in a `Field` instead, and set the `label`, `horizontal` and class\n * name on that `Field`.\n *\n * @helperProps Helper props go on the `.file` wrapper `<div>`, with\n * `className`. The other attributes go on the `<input>`.\n */\nexport interface FileProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'color' | 'type'\n    >,\n    Omit<BulmaClassesProps, 'color'>,\n    FormFieldProps {\n  /** 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`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Bulma color modifier for the file input. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size modifier for the file input. */\n  size?: 'small' | 'medium' | 'large';\n  /** Boxed file input. */\n  isBoxed?: boolean;\n  /** Whether the file input expands to full width. */\n  isFullwidth?: boolean;\n  /** Whether the file input expands to full width. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Position the CTA on the right (with `hasName`). */\n  isRight?: boolean;\n  /** Center the file input within its container. */\n  isCentered?: boolean;\n  /**\n   * Show a file name area. Without `fileName` it shows what the user picked: the file's name, or\n   * a count when `multiple` lets them pick several (see `pickedFilesLabel`). Before a pick there is\n   * no name area, and the root takes Bulma's `is-empty`. A reset of the input's form clears the\n   * name, but clearing the input from code fires no change event and leaves it showing, so pass\n   * `fileName` to control the text then.\n   */\n  hasName?: boolean;\n  /** Text on the file CTA button (defaults to \"Choose a file…\"). */\n  buttonLabel?: React.ReactNode;\n  /**\n   * Left icon element. It renders inside the `<label>` that names the file input, beside\n   * `buttonLabel`, so leave an `Icon` here unnamed (`<Icon name=\"upload\" />`): it is then\n   * `aria-hidden`, while an `ariaLabel` would join the input's accessible name.\n   */\n  iconLeft?: React.ReactNode;\n  /**\n   * Right icon element. Sits inside the same `<label>` as `iconLeft`, so the same applies:\n   * an `Icon` here with an `ariaLabel` joins the input's accessible name.\n   */\n  iconRight?: React.ReactNode;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Additional CSS classes for the `<input>`. */\n  inputClassName?: string;\n  /**\n   * Text for the file name area (with `hasName`), for a file chosen earlier or your own wording.\n   * Setting it takes over from the picked file's name; an empty string shows no name area.\n   */\n  fileName?: string;\n  /**\n   * Builds the text `hasName` shows when several files are picked, from their count, for\n   * localization. Default: `` `${count} files` ``. A single pick shows its file's name.\n   */\n  pickedFilesLabel?: (count: number) => string;\n}\n\n/**\n * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, \"has name\", and filename display.\n *\n * @function\n * @param {FileProps} props - Props for the File component.\n * @returns {JSX.Element} The rendered file upload field.\n * @see {@link https://bulma.io/documentation/form/file/ | Bulma File documentation}\n */\nexport const File = forwardRef<HTMLInputElement, FileProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      color,\n      size,\n      isBoxed,\n      isFullwidth,\n      isFullWidth,\n      isRight,\n      isCentered,\n      hasName,\n      buttonLabel,\n      iconLeft,\n      iconRight,\n      className,\n      inputClassName,\n      fileName,\n      pickedFilesLabel,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // What the user last picked, and the form a reset of which clears it.\n    const [picked, setPicked] = useState<{\n      count: number;\n      firstName: string;\n      form: HTMLFormElement | null;\n    }>();\n    const pickedForm = picked?.form;\n    useEffect(() => {\n      if (!pickedForm) return;\n      let timer: ReturnType<typeof setTimeout> | undefined;\n      // The reset event fires before the form resets, and a listener after this one can still\n      // cancel it, so the name is cleared a task later, and only if the reset went ahead.\n      const onReset = (event: Event) => {\n        timer = setTimeout(() => {\n          if (!event.defaultPrevented) setPicked(undefined);\n        });\n      };\n      pickedForm.addEventListener('reset', onReset);\n      return () => {\n        pickedForm.removeEventListener('reset', onReset);\n        clearTimeout(timer);\n      };\n    }, [pickedForm]);\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const { files, form } = event.target;\n      setPicked(\n        files?.length\n          ? { count: files.length, firstName: files[0].name, form }\n          : undefined\n      );\n      onChange?.(event);\n    };\n    const pickedText =\n      picked &&\n      (picked.count === 1\n        ? picked.firstName\n        : (pickedFilesLabel?.(picked.count) ?? `${picked.count} files`));\n    const shownName = fileName ?? pickedText;\n\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('File', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: ownField,\n    });\n    const { classPrefix } = useConfig();\n    // The input takes `controlId`, so `id` stays out of the spread, where an\n    // undefined `id` key would wipe the id the label points at.\n    const { id: _id, ...inputProps } = props;\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color,\n      ...inputProps,\n    });\n\n    // Mutually exclusive alignment\n    let alignmentClass: string | undefined;\n    if (isRight && isCentered) {\n      // If both are set, prefer isRight and warn in dev\n      alignmentClass = prefixedClassNames(classPrefix, 'is-right');\n    } else if (isRight) {\n      alignmentClass = prefixedClassNames(classPrefix, 'is-right');\n    } else if (isCentered) {\n      alignmentClass = prefixedClassNames(classPrefix, 'is-centered');\n    }\n\n    const mainClass = usePrefixedClassNames('file', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-boxed': isBoxed,\n      'is-fullwidth': isFullwidth ?? isFullWidth,\n      'has-name': hasName,\n      'is-empty': hasName && !shownName,\n    });\n    const fileClass = classNames(\n      mainClass,\n      bulmaHelperClasses,\n      alignmentClass,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    const fileElement = (\n      <div className={fileClass}>\n        <label className={usePrefixedClassNames('file-label')}>\n          <input\n            ref={ref}\n            className={classNames(\n              usePrefixedClassNames('file-input'),\n              inputClassName\n            )}\n            type=\"file\"\n            id={controlId}\n            onChange={handleChange}\n            {...rest}\n          />\n          <span className={usePrefixedClassNames('file-cta')}>\n            {iconLeft && (\n              <span className={prefixedClassNames(classPrefix, 'file-icon')}>\n                {iconLeft}\n              </span>\n            )}\n            <span className={usePrefixedClassNames('file-label')}>\n              {buttonLabel || 'Choose a file\\u2026'}\n            </span>\n            {iconRight && (\n              <span className={prefixedClassNames(classPrefix, 'file-icon')}>\n                {iconRight}\n              </span>\n            )}\n          </span>\n          {hasName && shownName && (\n            <span className={prefixedClassNames(classPrefix, 'file-name')}>\n              {shownName}\n            </span>\n          )}\n        </label>\n      </div>\n    );\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {fileElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {fileElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nFile.displayName = 'File';\n\nexport default File;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"File.js","sources":["../../../src/form/File.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport { useNumberFormat } from '../helpers/localeFormat';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n} from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the File component.\n * Inside an outer `Field`, or a `Control` with no `Field` around it, it\n * renders no `Field` of its own. The exception is `label`, `message`,\n * `horizontal` or `fieldClassName` in that bare `Control`: it keeps a `Field`\n * for them, nested in the `.control`, and warns in development. Wrap the\n * `Control` in a `Field` instead, and set the `label`, `horizontal` and class\n * name on that `Field`.\n *\n * @helperProps Helper props go on the `.file` wrapper `<div>`, with\n * `className`. The other attributes go on the `<input>`.\n */\nexport interface FileProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'color' | 'type'\n    >,\n    Omit<BulmaClassesProps, 'color'>,\n    FormFieldProps {\n  /** 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`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Bulma color modifier for the file input. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size modifier for the file input. */\n  size?: 'small' | 'medium' | 'large';\n  /** Boxed file input. */\n  isBoxed?: boolean;\n  /** Whether the file input expands to full width. */\n  isFullwidth?: boolean;\n  /** Whether the file input expands to full width. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Position the CTA on the right (with `hasName`). */\n  isRight?: boolean;\n  /** Center the file input within its container. */\n  isCentered?: boolean;\n  /**\n   * Show a file name area. Without `fileName` it shows what the user picked: the file's name, or\n   * a count when `multiple` lets them pick several (see `pickedFilesLabel`). Before a pick there is\n   * no name area, and the root takes Bulma's `is-empty`. A reset of the input's form clears the\n   * name, but clearing the input from code fires no change event and leaves it showing, so pass\n   * `fileName` to control the text then.\n   */\n  hasName?: boolean;\n  /** Text on the file CTA button (defaults to \"Choose a file…\"). */\n  buttonLabel?: React.ReactNode;\n  /**\n   * Left icon element. It renders inside the `<label>` that names the file input, beside\n   * `buttonLabel`, so leave an `Icon` here unnamed (`<Icon name=\"upload\" />`): it is then\n   * `aria-hidden`, while an `ariaLabel` would join the input's accessible name.\n   */\n  iconLeft?: React.ReactNode;\n  /**\n   * Right icon element. Sits inside the same `<label>` as `iconLeft`, so the same applies:\n   * an `Icon` here with an `ariaLabel` joins the input's accessible name.\n   */\n  iconRight?: React.ReactNode;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Additional CSS classes for the `<input>`. */\n  inputClassName?: string;\n  /**\n   * Text for the file name area (with `hasName`), for a file chosen earlier or your own wording.\n   * Setting it takes over from the picked file's name; an empty string shows no name area.\n   */\n  fileName?: string;\n  /**\n   * Builds the text `hasName` shows when several files are picked, from their count, for\n   * localization. Default: `` `${count} files` ``, with the count written the way the `locale`\n   * of a `LocaleProvider` around it writes numbers. A single pick shows its file's name.\n   */\n  pickedFilesLabel?: (count: number) => string;\n}\n\n/**\n * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, \"has name\", and filename display.\n *\n * @function\n * @param {FileProps} props - Props for the File component.\n * @returns {JSX.Element} The rendered file upload field.\n * @see {@link https://bulma.io/documentation/form/file/ | Bulma File documentation}\n */\nexport const File = forwardRef<HTMLInputElement, FileProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      color,\n      size,\n      isBoxed,\n      isFullwidth,\n      isFullWidth,\n      isRight,\n      isCentered,\n      hasName,\n      buttonLabel,\n      iconLeft,\n      iconRight,\n      className,\n      inputClassName,\n      fileName,\n      pickedFilesLabel,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // What the user last picked, and the form a reset of which clears it.\n    const [picked, setPicked] = useState<{\n      count: number;\n      firstName: string;\n      form: HTMLFormElement | null;\n    }>();\n    const pickedForm = picked?.form;\n    useEffect(() => {\n      if (!pickedForm) return;\n      let timer: ReturnType<typeof setTimeout> | undefined;\n      // The reset event fires before the form resets, and a listener after this one can still\n      // cancel it, so the name is cleared a task later, and only if the reset went ahead.\n      const onReset = (event: Event) => {\n        timer = setTimeout(() => {\n          if (!event.defaultPrevented) setPicked(undefined);\n        });\n      };\n      pickedForm.addEventListener('reset', onReset);\n      return () => {\n        pickedForm.removeEventListener('reset', onReset);\n        clearTimeout(timer);\n      };\n    }, [pickedForm]);\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const { files, form } = event.target;\n      setPicked(\n        files?.length\n          ? { count: files.length, firstName: files[0].name, form }\n          : undefined\n      );\n      onChange?.(event);\n    };\n    const formatNumber = useNumberFormat();\n    const pickedText =\n      picked &&\n      (picked.count === 1\n        ? picked.firstName\n        : (pickedFilesLabel?.(picked.count) ??\n          `${formatNumber ? formatNumber(picked.count) : picked.count} files`));\n    const shownName = fileName ?? pickedText;\n\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('File', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: ownField,\n    });\n    const { classPrefix } = useConfig();\n    // The input takes `controlId`, so `id` stays out of the spread, where an\n    // undefined `id` key would wipe the id the label points at.\n    const { id: _id, ...inputProps } = props;\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color,\n      ...inputProps,\n    });\n\n    // Mutually exclusive alignment\n    let alignmentClass: string | undefined;\n    if (isRight && isCentered) {\n      // If both are set, prefer isRight and warn in dev\n      alignmentClass = prefixedClassNames(classPrefix, 'is-right');\n    } else if (isRight) {\n      alignmentClass = prefixedClassNames(classPrefix, 'is-right');\n    } else if (isCentered) {\n      alignmentClass = prefixedClassNames(classPrefix, 'is-centered');\n    }\n\n    const mainClass = usePrefixedClassNames('file', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-boxed': isBoxed,\n      'is-fullwidth': isFullwidth ?? isFullWidth,\n      'has-name': hasName,\n      'is-empty': hasName && !shownName,\n    });\n    const fileClass = classNames(\n      mainClass,\n      bulmaHelperClasses,\n      alignmentClass,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    const fileElement = (\n      <div className={fileClass}>\n        <label className={usePrefixedClassNames('file-label')}>\n          <input\n            ref={ref}\n            className={classNames(\n              usePrefixedClassNames('file-input'),\n              inputClassName\n            )}\n            type=\"file\"\n            id={controlId}\n            onChange={handleChange}\n            {...rest}\n          />\n          <span className={usePrefixedClassNames('file-cta')}>\n            {iconLeft && (\n              <span className={prefixedClassNames(classPrefix, 'file-icon')}>\n                {iconLeft}\n              </span>\n            )}\n            <span className={usePrefixedClassNames('file-label')}>\n              {buttonLabel || 'Choose a file\\u2026'}\n            </span>\n            {iconRight && (\n              <span className={prefixedClassNames(classPrefix, 'file-icon')}>\n                {iconRight}\n              </span>\n            )}\n          </span>\n          {hasName && shownName && (\n            <span className={prefixedClassNames(classPrefix, 'file-name')}>\n              {shownName}\n            </span>\n          )}\n        </label>\n      </div>\n    );\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {fileElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {fileElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nFile.displayName = 'File';\n\nexport default File;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/form/FormContext.js

@@ -19,6 +19,22 @@ const useInsideControl = () => useContext(ControlContext);
 const FieldProvider = FieldContext.Provider;
 /** Provider for Control context — used internally by Control component. */
 const ControlProvider = ControlContext.Provider;
+const FieldsetDisabledContext = createContext(false);
+/**
+ * An input's `disabled`: its own prop when the caller set one, otherwise
+ * whether a disabled `Fieldset` holds it. A `<fieldset disabled>` disables the
+ * native controls inside on its own, and this carries the same state to what
+ * the browser doesn't reach, such as Rate's stars, the time wheels, and the
+ * `is-disabled` classes. The content of a Fieldset's legend reads the state
+ * from outside that Fieldset, as the browser leaves the first legend's
+ * controls enabled. Internal; not part of the public API.
+ */
+const useFieldsetDisabled = (disabled) => {
+    const inherited = useContext(FieldsetDisabledContext);
+    return disabled ?? inherited;
+};
+/** Provider for a Fieldset's disabled state, used internally by Fieldset. */
+const FieldsetDisabledProvider = FieldsetDisabledContext.Provider;
 // Each Field-shaping prop, with what takes its place on a `Field` the caller
 // wraps around the `Control`. `message` needs nothing there, because the
 // wrapper still renders it inside `Field > Control`. The other Field-level
@@ -243,5 +259,5 @@ const RadiosProvider = RadiosContext.Provider;
 /** Provider for the Checkboxes group context — used internally by Checkboxes. */
 const CheckboxesProvider = CheckboxesContext.Provider;
 
-export { CheckboxesProvider, ControlProvider, FieldLabelElementIdProvider, FieldLabelForProvider, FieldLabelForReportProvider, FieldLabelIdProvider, FieldProvider, RadiosProvider, rendersOwnControl, rendersOwnField, useCheckboxesGroup, useFieldLabelElementId, useFieldLabelFor, useFieldLabelId, useFieldLabelTarget, useInsideControl, useInsideField, useRadiosGroup, useReportFieldLabelFor };
+export { CheckboxesProvider, ControlProvider, FieldLabelElementIdProvider, FieldLabelForProvider, FieldLabelForReportProvider, FieldLabelIdProvider, FieldProvider, FieldsetDisabledProvider, RadiosProvider, rendersOwnControl, rendersOwnField, useCheckboxesGroup, useFieldLabelElementId, useFieldLabelFor, useFieldLabelId, useFieldLabelTarget, useFieldsetDisabled, useInsideControl, useInsideField, useRadiosGroup, useReportFieldLabelFor };
 //# sourceMappingURL=FormContext.js.map

package/dist/esm/form/FormContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormContext.js","sources":["../../../src/form/FormContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport type { ControlBaseProps } from './Control';\n\nconst FieldContext = createContext(false);\nconst ControlContext = createContext(false);\n\n/**\n * Hook to detect if the component is inside a Field wrapper.\n * Form components use this to skip rendering their own Field.\n */\nexport const useInsideField = () => useContext(FieldContext);\n\n/**\n * Hook to detect if the component is inside a Control wrapper.\n * Form components use this to skip rendering their own Control.\n */\nexport const useInsideControl = () => useContext(ControlContext);\n\n/** Provider for Field context — used internally by Field component. */\nexport const FieldProvider = FieldContext.Provider;\n\n/** Provider for Control context — used internally by Control component. */\nexport const ControlProvider = ControlContext.Provider;\n\n/** The wrapper props that change what its own `Field` renders. */\ninterface FieldShapingProps {\n  /** Rendered as the `Field`'s label. */\n  label?: React.ReactNode;\n  /** Rendered as help text after the widget. */\n  message?: React.ReactNode;\n  /** Lays the `Field` out horizontally. */\n  horizontal?: boolean;\n  /** Set on the `Field` as its class. */\n  fieldClassName?: string;\n}\n\ninterface OwnFieldOptions extends FieldShapingProps {\n  /** `useInsideField()` as the wrapper read it. */\n  insideField: boolean;\n  /** `useInsideControl()` as the wrapper read it. */\n  insideControl: boolean;\n}\n\n// Each Field-shaping prop, with what takes its place on a `Field` the caller\n// wraps around the `Control`. `message` needs nothing there, because the\n// wrapper still renders it inside `Field > Control`. The other Field-level\n// props (`labelSize`, `labelProps`, `messageColor`) change nothing unless a\n// `label` or `message` renders, so on their own they keep no `Field`.\n// `bare-control.test.tsx` holds this list to what each wrapper hands its\n// `Field` and to which props change its markup, so a new Field-level prop\n// fails there until it is sorted into one group or the other.\nconst FIELD_SHAPING: ReadonlyArray<\n  [keyof FieldShapingProps, string | undefined]\n> = [\n  ['label', 'label'],\n  ['message', undefined],\n  ['horizontal', 'horizontal'],\n  ['fieldClassName', 'className (for fieldClassName)'],\n];\n\n/** `a`, `a and b`, `a, b and c`. */\nconst listOf = (items: string[]): string =>\n  items.length > 1\n    ? `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`\n    : items[0];\n\n/**\n * Whether a convenience form wrapper renders a `Field` of its own (#905).\n * Never inside an outer `Field`. Inside a `Control` with no `Field` around\n * it, a `Field` of its own would put a `.field` inside the `.control`, where\n * Bulma's control styles break (its icon rules are sibling selectors on the\n * input). So it renders one there only when a prop that shapes the `Field`'s\n * markup is set (`label`, `message`, `horizontal`, `fieldClassName`), keeping\n * the markup it always had, and warns in development that the fix is a\n * `Field` around that `Control`. A prop counts when it is truthy, the same\n * test that decides whether it changes the `Field`'s output.\n * Internal; not part of the public API.\n */\nexport const rendersOwnField = (\n  component: string,\n  options: OwnFieldOptions\n): boolean => {\n  if (options.insideField) return false;\n  if (!options.insideControl) return true;\n  const held = FIELD_SHAPING.filter(([prop]) => options[prop]);\n  if (held.length === 0) return false;\n  const names = held.map(([prop]) => prop);\n  const moved = held\n    .map(([, onField]) => onField)\n    .filter((onField): onField is string => onField !== undefined);\n  warnOnce(\n    `${component}:Field-in-bare-Control:${names.join('+')}`,\n    `[bestax-bulma] <${component} ${names.join(' ')}> inside a <Control> ` +\n      `with no <Field> around it renders its own <Field> for ` +\n      `${names.length > 1 ? 'those props' : 'that prop'}, which puts a ` +\n      `.field inside the .control, a nesting Bulma's styles are not ` +\n      `written for. Wrap the <Control> in a <Field> instead` +\n      (moved.length > 0 ? `, and set ${listOf(moved)} on that <Field>.` : '.')\n  );\n  return true;\n};\n\n/** The props a convenience form wrapper hands its own `Control`. Internal. */\nexport interface ControlLevelProps {\n  /** Shows the `Control`'s loading spinner. */\n  isLoading?: boolean;\n  /** The `Control`'s left icon. */\n  iconLeft?: ControlBaseProps['iconLeft'];\n  /** Shortcut for the left icon's name. */\n  iconLeftName?: string;\n  /** Shortcut for the left icon's size. */\n  iconLeftSize?: ControlBaseProps['iconLeftSize'];\n  /** The `Control`'s right icon. */\n  iconRight?: ControlBaseProps['iconRight'];\n  /** Shortcut for the right icon's name. */\n  iconRightName?: string;\n  /** Shortcut for the right icon's size. */\n  iconRightSize?: ControlBaseProps['iconRightSize'];\n  /** Reserves the `Control`'s left icon space. */\n  hasIconsLeft?: boolean;\n  /** Reserves the `Control`'s right icon space. */\n  hasIconsRight?: boolean;\n  /** Expands the `Control`. */\n  isExpanded?: boolean;\n  /** Set on the `Control` as its `size`. */\n  controlSize?: ControlBaseProps['size'];\n  /** Set on the `Control` as its class. */\n  controlClassName?: string;\n}\n\ninterface OwnControlOptions extends ControlLevelProps {\n  /** `useInsideControl()` as the wrapper read it. */\n  insideControl: boolean;\n  /** A picker's `inline`, which renders no `Control` inside one or out. */\n  inline?: boolean;\n  /**\n   * The left glyph the wrapper's own `Control` shows when the caller sets no\n   * `iconLeftName`; read only then. `bare-control.test.tsx` reads that glyph\n   * from what each wrapper hands its own `Control`, so a wrapper that gains\n   * one fails there until it passes it here.\n   */\n  defaultIconLeftName?: string;\n}\n\n// Each Control-level prop, with what takes its place on the `Control` the\n// caller wrapped around the wrapper. `bare-control.test.tsx` holds this to\n// what each wrapper hands its own `Control`, so a new Control-level prop\n// fails there until it is added here and passed to `rendersOwnControl`.\nconst ON_CONTROL: Record<keyof ControlLevelProps, string> = {\n  isLoading: 'isLoading',\n  iconLeft: 'iconLeft',\n  iconLeftName: 'iconLeftName',\n  iconLeftSize: 'iconLeftSize',\n  iconRight: 'iconRight',\n  iconRightName: 'iconRightName',\n  iconRightSize: 'iconRightSize',\n  hasIconsLeft: 'hasIconsLeft',\n  hasIconsRight: 'hasIconsRight',\n  isExpanded: 'isExpanded',\n  controlSize: 'size (for controlSize)',\n  controlClassName: 'className (for controlClassName)',\n};\n\n/**\n * Whether a convenience form wrapper renders a `Control` of its own (#921):\n * only outside one. Inside a `Control` it renders none, so the props it\n * would have handed its own do nothing there, and it warns in development,\n * naming them and saying to set them on that `Control`. An `inline` picker\n * renders none in either place, so it drops them inside a `Control` or not,\n * and its warning says so without pointing at a `Control`. A wrapper passes\n * only the props it hands its own `Control`, as the caller gave them, so a\n * default the wrapper fills in itself never warns. A prop counts when it is\n * truthy, since a falsy one would change nothing on a `Control` either.\n * `iconLeftSize` and `hasIconsLeft` show nothing on a `Control` without a\n * glyph, so when they move and the caller chose no left icon, the advice\n * names the wrapper's default glyph too, and following it draws what the\n * wrapper's own `Control` did.\n * Internal; not part of the public API.\n */\nexport const rendersOwnControl = (\n  component: string,\n  options: OwnControlOptions\n): boolean => {\n  if (!options.inline && !options.insideControl) return true;\n  const held = (\n    Object.keys(ON_CONTROL) as Array<keyof ControlLevelProps>\n  ).filter(prop => options[prop]);\n  if (held.length === 0) return false;\n  const names = held.join(' ');\n  const doNothing = held.length > 1 ? 'those props do' : 'that prop does';\n  let message: string;\n  if (options.inline) {\n    message =\n      `[bestax-bulma] <${component} inline ${names}> renders no <Control> ` +\n      `in inline mode, inside a <Control> or not, so ${doNothing} ` +\n      `nothing. Leave ${held.length > 1 ? 'them' : 'it'} out of an ` +\n      `inline picker.`;\n  } else {\n    const toSet = held.map(prop => ON_CONTROL[prop]);\n    const needsGlyph =\n      (options.iconLeftSize || options.hasIconsLeft) &&\n      !options.iconLeft &&\n      options.iconLeftName === undefined &&\n      options.defaultIconLeftName;\n    if (needsGlyph) {\n      toSet.push(\n        `iconLeftName=\"${options.defaultIconLeftName}\" (its default icon)`\n      );\n    }\n    message =\n      `[bestax-bulma] <${component} ${names}> inside a <Control> renders ` +\n      `no <Control> of its own, so ${doNothing} nothing there. Set ` +\n      `${listOf(toSet)} on that <Control> instead.`;\n  }\n  // Keyed by the message itself: the props named do not settle the advice\n  // (an empty `iconLeftName` and an unset one name the same props), so two\n  // calls that would advise differently must not share a key.\n  warnOnce(message, message);\n  return false;\n};\n\nconst FieldLabelIdContext = createContext<string | undefined>(undefined);\n\n/**\n * The id a labeled Field wants its single composed control to adopt (#495).\n * `undefined` outside a Field, in unlabeled/grouped/addons Fields, or when the\n * user took over the association with an explicit `labelProps.htmlFor`.\n * Consumed through `useFieldLabelTarget` by the single-control bases\n * (InputBase, SelectBase, TextAreaBase, and the date and time picker bases\n * unless inline, #968) and, through `useAutoLabelId`, by the convenience\n * inputs that render an input of their own (#939). Read it only through\n * those, which report what they take: a control that read it directly would\n * report nothing and lose its label (#1004), and\n * `__tests__/field-label-readers.test.ts` fails on one. Internal; not part of\n * the public API.\n */\nexport const useFieldLabelId = () => useContext(FieldLabelIdContext);\n\n/** Provider for the Field label-target id — used internally by Field. */\nexport const FieldLabelIdProvider = FieldLabelIdContext.Provider;\n\nconst FieldLabelElementIdContext = createContext<string | undefined>(undefined);\n\n/**\n * The id of a labeled Field's own `<label>`, for a group control (Radios,\n * Checkboxes, Rate, DateRangeInput and DateRangeInputBase) to point\n * `aria-labelledby` at, since a group cannot take the label's `htmlFor`\n * (#939, #1005). Set under the same conditions as\n * {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.\n * Internal; not part of the public API.\n */\nexport const useFieldLabelElementId = () =>\n  useContext(FieldLabelElementIdContext);\n\n/** Provider for the Field label's own id, used internally by Field. */\nexport const FieldLabelElementIdProvider = FieldLabelElementIdContext.Provider;\n\n/** The nearest labeled Field's `<label>`, as {@link useFieldLabelFor} reads it. */\nexport interface FieldLabelFor {\n  /** What the label's `htmlFor` points at, generated or the caller's. */\n  htmlFor?: string;\n  /** The id the label renders with, the caller's or a generated one, if any. */\n  id?: string;\n}\n\nconst FieldLabelForContext = createContext<FieldLabelFor>({});\n\n/**\n * The nearest labeled Field's `<label>`: what it points `htmlFor` at, the id\n * it generated or the caller's own `labelProps.htmlFor`, and the id the label\n * renders with, if it has one. An unlabeled Field passes both through\n * together, so a control in the inner Field of a horizontal layout can tell\n * the outer label names it, and point at that label by its id, as a range\n * Slider's thumbs (#981) and Autocomplete's and Taginput's suggestion lists\n * (#998, #1082) do. The\n * `htmlFor` is only ever compared with a control's own id, never adopted, so\n * it hands out no id for a control. It keeps the generated id after the\n * label drops a `for` nothing took (#1004), which no control's id matches\n * then, so the value does not change under the content that reported it.\n * The `id` is set only while that label renders with it. Unlike\n * {@link useFieldLabelId}, it is set in a `grouped` or `hasAddons` Field\n * too, so a label wired by hand names the control its `for` picks in those\n * rows as well. Consumed through `useAutoLabelId`.\n * Internal; not part of the public API.\n */\nexport const useFieldLabelFor = () => useContext(FieldLabelForContext);\n\n/** Provider for the Field label's `htmlFor` target and id, used internally by Field. */\nexport const FieldLabelForProvider = FieldLabelForContext.Provider;\n\n/**\n * Records that one piece of a labeled Field's content took the label's\n * generated id, and returns the function that forgets it.\n */\ntype FieldLabelForReport = () => () => void;\n\nconst FieldLabelForReportContext = createContext<\n  FieldLabelForReport | undefined\n>(undefined);\n\n/**\n * Tells the nearest labeled Field that this content took its generated id\n * while `takesFor` is true (#1004). Once the Field's content has mounted, its\n * label keeps the generated `for` only while something has said so, so the\n * label renders none over a group, a `Checkbox`, `Radio` or `Switch`, an\n * inner `Field`, an input with an `id` of its own, markup of your own, or\n * nothing at all. Anything that puts the id from {@link useFieldLabelId} on\n * an element has to say so, or the label drops the `for` that names it, and\n * content that takes no id has nothing to do. Set under the same conditions\n * as {@link useFieldLabelId}, so a label wired by hand and a `grouped` or\n * `hasAddons` Field hear nothing. It reports from a layout effect, which a\n * server never runs and a hydrating client runs only after its first render,\n * so that render writes the `for` the way the server did.\n * Internal; not part of the public API.\n */\nexport const useReportFieldLabelFor = (takesFor: boolean): void => {\n  const report = useContext(FieldLabelForReportContext);\n  useClientLayoutEffect(\n    () => (takesFor ? report?.() : undefined),\n    [report, takesFor]\n  );\n};\n\n/** Provider for the labeled Field's report function, used internally by Field. */\nexport const FieldLabelForReportProvider = FieldLabelForReportContext.Provider;\n\n/**\n * The id a control with one input of its own renders with: the caller's\n * `id` when one arrived, otherwise the one a labeled Field offers (#495),\n * unless it has no input to put it on (`hasInput: false`, as in an `inline`\n * picker). It also tells that Field when it took the Field's id, through\n * {@link useReportFieldLabelFor}, so the label keeps its `for` (#1004). Used\n * by the single-control bases. Internal; not part of the public API.\n */\nexport const useFieldLabelTarget = (\n  id: string | undefined,\n  hasInput = true\n): string | undefined => {\n  const fieldLabelId = useFieldLabelId();\n  const target = id ?? (hasInput ? fieldLabelId : undefined);\n  useReportFieldLabelFor(fieldLabelId !== undefined && target === fieldLabelId);\n  return target;\n};\n\n/**\n * Shape of the Radios group context. The group provides:\n * - `name`: shared form field name (Stage 1)\n * - `value`: currently-selected radio value (Stage 2 — group-managed selection)\n * - `onChange`: dispatched by child Radios when clicked (Stage 2)\n *\n * Group sets `value`/`onChange` only when actively managing selection\n * (i.e., the user passed `value`, `defaultValue`, or `onChange` to `<Radios>`).\n * When only `name` is provided, the group is in \"name-only\" mode and child\n * Radios manage their own checked state independently.\n */\nexport interface RadiosGroupContextValue {\n  name?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n}\n\n/**\n * Shape of the Checkboxes group context. Like Radios but with array semantics\n * for multi-select.\n */\nexport interface CheckboxesGroupContextValue {\n  name?: string;\n  value?: string[];\n  onChange?: (values: string[]) => void;\n}\n\nconst RadiosContext = createContext<RadiosGroupContextValue | undefined>(\n  undefined\n);\nconst CheckboxesContext = createContext<\n  CheckboxesGroupContextValue | undefined\n>(undefined);\n\n/**\n * Hook to read the full surrounding `<Radios>` group context (name + selection).\n * Returns `undefined` when not inside a `<Radios>` group.\n */\nexport const useRadiosGroup = () => useContext(RadiosContext);\n\n/**\n * Hook to read the full surrounding `<Checkboxes>` group context.\n * Returns `undefined` when not inside a `<Checkboxes>` group.\n */\nexport const useCheckboxesGroup = () => useContext(CheckboxesContext);\n\n/**\n * Hook to read just the shared `name` from a surrounding `<Radios>` group.\n * Child `<Radio>` components fall back to this when no local `name` prop is set.\n * Returns `undefined` outside of a `<Radios>` group.\n */\nexport const useRadiosName = () => useRadiosGroup()?.name;\n\n/**\n * Hook to read just the shared `name` from a surrounding `<Checkboxes>` group.\n * Returns `undefined` outside of a `<Checkboxes>` group.\n */\nexport const useCheckboxesName = () => useCheckboxesGroup()?.name;\n\n/** Provider for the Radios group context — used internally by Radios. */\nexport const RadiosProvider = RadiosContext.Provider;\n\n/** Provider for the Checkboxes group context — used internally by Checkboxes. */\nexport const CheckboxesProvider = CheckboxesContext.Provider;\n\n// --- Backward-compat aliases (Stage 1 names) -----------------------------\n// Internal callers may still import these. Both still work because they refer\n// to the same providers/hooks under the new shape.\n\n/** @deprecated Use `RadiosProvider` (provides {name, value, onChange}). */\nexport const RadiosNameProvider = RadiosProvider;\n\n/** @deprecated Use `CheckboxesProvider` (provides {name, value, onChange}). */\nexport const CheckboxesNameProvider = CheckboxesProvider;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FormContext.js","sources":["../../../src/form/FormContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport type { ControlBaseProps } from './Control';\n\nconst FieldContext = createContext(false);\nconst ControlContext = createContext(false);\n\n/**\n * Hook to detect if the component is inside a Field wrapper.\n * Form components use this to skip rendering their own Field.\n */\nexport const useInsideField = () => useContext(FieldContext);\n\n/**\n * Hook to detect if the component is inside a Control wrapper.\n * Form components use this to skip rendering their own Control.\n */\nexport const useInsideControl = () => useContext(ControlContext);\n\n/** Provider for Field context — used internally by Field component. */\nexport const FieldProvider = FieldContext.Provider;\n\n/** Provider for Control context — used internally by Control component. */\nexport const ControlProvider = ControlContext.Provider;\n\nconst FieldsetDisabledContext = createContext(false);\n\n/**\n * An input's `disabled`: its own prop when the caller set one, otherwise\n * whether a disabled `Fieldset` holds it. A `<fieldset disabled>` disables the\n * native controls inside on its own, and this carries the same state to what\n * the browser doesn't reach, such as Rate's stars, the time wheels, and the\n * `is-disabled` classes. The content of a Fieldset's legend reads the state\n * from outside that Fieldset, as the browser leaves the first legend's\n * controls enabled. Internal; not part of the public API.\n */\nexport const useFieldsetDisabled = (disabled: boolean | undefined): boolean => {\n  const inherited = useContext(FieldsetDisabledContext);\n  return disabled ?? inherited;\n};\n\n/** Provider for a Fieldset's disabled state, used internally by Fieldset. */\nexport const FieldsetDisabledProvider = FieldsetDisabledContext.Provider;\n\n/** The wrapper props that change what its own `Field` renders. */\ninterface FieldShapingProps {\n  /** Rendered as the `Field`'s label. */\n  label?: React.ReactNode;\n  /** Rendered as help text after the widget. */\n  message?: React.ReactNode;\n  /** Lays the `Field` out horizontally. */\n  horizontal?: boolean;\n  /** Set on the `Field` as its class. */\n  fieldClassName?: string;\n}\n\ninterface OwnFieldOptions extends FieldShapingProps {\n  /** `useInsideField()` as the wrapper read it. */\n  insideField: boolean;\n  /** `useInsideControl()` as the wrapper read it. */\n  insideControl: boolean;\n}\n\n// Each Field-shaping prop, with what takes its place on a `Field` the caller\n// wraps around the `Control`. `message` needs nothing there, because the\n// wrapper still renders it inside `Field > Control`. The other Field-level\n// props (`labelSize`, `labelProps`, `messageColor`) change nothing unless a\n// `label` or `message` renders, so on their own they keep no `Field`.\n// `bare-control.test.tsx` holds this list to what each wrapper hands its\n// `Field` and to which props change its markup, so a new Field-level prop\n// fails there until it is sorted into one group or the other.\nconst FIELD_SHAPING: ReadonlyArray<\n  [keyof FieldShapingProps, string | undefined]\n> = [\n  ['label', 'label'],\n  ['message', undefined],\n  ['horizontal', 'horizontal'],\n  ['fieldClassName', 'className (for fieldClassName)'],\n];\n\n/** `a`, `a and b`, `a, b and c`. */\nconst listOf = (items: string[]): string =>\n  items.length > 1\n    ? `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`\n    : items[0];\n\n/**\n * Whether a convenience form wrapper renders a `Field` of its own (#905).\n * Never inside an outer `Field`. Inside a `Control` with no `Field` around\n * it, a `Field` of its own would put a `.field` inside the `.control`, where\n * Bulma's control styles break (its icon rules are sibling selectors on the\n * input). So it renders one there only when a prop that shapes the `Field`'s\n * markup is set (`label`, `message`, `horizontal`, `fieldClassName`), keeping\n * the markup it always had, and warns in development that the fix is a\n * `Field` around that `Control`. A prop counts when it is truthy, the same\n * test that decides whether it changes the `Field`'s output.\n * Internal; not part of the public API.\n */\nexport const rendersOwnField = (\n  component: string,\n  options: OwnFieldOptions\n): boolean => {\n  if (options.insideField) return false;\n  if (!options.insideControl) return true;\n  const held = FIELD_SHAPING.filter(([prop]) => options[prop]);\n  if (held.length === 0) return false;\n  const names = held.map(([prop]) => prop);\n  const moved = held\n    .map(([, onField]) => onField)\n    .filter((onField): onField is string => onField !== undefined);\n  warnOnce(\n    `${component}:Field-in-bare-Control:${names.join('+')}`,\n    `[bestax-bulma] <${component} ${names.join(' ')}> inside a <Control> ` +\n      `with no <Field> around it renders its own <Field> for ` +\n      `${names.length > 1 ? 'those props' : 'that prop'}, which puts a ` +\n      `.field inside the .control, a nesting Bulma's styles are not ` +\n      `written for. Wrap the <Control> in a <Field> instead` +\n      (moved.length > 0 ? `, and set ${listOf(moved)} on that <Field>.` : '.')\n  );\n  return true;\n};\n\n/** The props a convenience form wrapper hands its own `Control`. Internal. */\nexport interface ControlLevelProps {\n  /** Shows the `Control`'s loading spinner. */\n  isLoading?: boolean;\n  /** The `Control`'s left icon. */\n  iconLeft?: ControlBaseProps['iconLeft'];\n  /** Shortcut for the left icon's name. */\n  iconLeftName?: string;\n  /** Shortcut for the left icon's size. */\n  iconLeftSize?: ControlBaseProps['iconLeftSize'];\n  /** The `Control`'s right icon. */\n  iconRight?: ControlBaseProps['iconRight'];\n  /** Shortcut for the right icon's name. */\n  iconRightName?: string;\n  /** Shortcut for the right icon's size. */\n  iconRightSize?: ControlBaseProps['iconRightSize'];\n  /** Reserves the `Control`'s left icon space. */\n  hasIconsLeft?: boolean;\n  /** Reserves the `Control`'s right icon space. */\n  hasIconsRight?: boolean;\n  /** Expands the `Control`. */\n  isExpanded?: boolean;\n  /** Set on the `Control` as its `size`. */\n  controlSize?: ControlBaseProps['size'];\n  /** Set on the `Control` as its class. */\n  controlClassName?: string;\n}\n\ninterface OwnControlOptions extends ControlLevelProps {\n  /** `useInsideControl()` as the wrapper read it. */\n  insideControl: boolean;\n  /** A picker's `inline`, which renders no `Control` inside one or out. */\n  inline?: boolean;\n  /**\n   * The left glyph the wrapper's own `Control` shows when the caller sets no\n   * `iconLeftName`; read only then. `bare-control.test.tsx` reads that glyph\n   * from what each wrapper hands its own `Control`, so a wrapper that gains\n   * one fails there until it passes it here.\n   */\n  defaultIconLeftName?: string;\n}\n\n// Each Control-level prop, with what takes its place on the `Control` the\n// caller wrapped around the wrapper. `bare-control.test.tsx` holds this to\n// what each wrapper hands its own `Control`, so a new Control-level prop\n// fails there until it is added here and passed to `rendersOwnControl`.\nconst ON_CONTROL: Record<keyof ControlLevelProps, string> = {\n  isLoading: 'isLoading',\n  iconLeft: 'iconLeft',\n  iconLeftName: 'iconLeftName',\n  iconLeftSize: 'iconLeftSize',\n  iconRight: 'iconRight',\n  iconRightName: 'iconRightName',\n  iconRightSize: 'iconRightSize',\n  hasIconsLeft: 'hasIconsLeft',\n  hasIconsRight: 'hasIconsRight',\n  isExpanded: 'isExpanded',\n  controlSize: 'size (for controlSize)',\n  controlClassName: 'className (for controlClassName)',\n};\n\n/**\n * Whether a convenience form wrapper renders a `Control` of its own (#921):\n * only outside one. Inside a `Control` it renders none, so the props it\n * would have handed its own do nothing there, and it warns in development,\n * naming them and saying to set them on that `Control`. An `inline` picker\n * renders none in either place, so it drops them inside a `Control` or not,\n * and its warning says so without pointing at a `Control`. A wrapper passes\n * only the props it hands its own `Control`, as the caller gave them, so a\n * default the wrapper fills in itself never warns. A prop counts when it is\n * truthy, since a falsy one would change nothing on a `Control` either.\n * `iconLeftSize` and `hasIconsLeft` show nothing on a `Control` without a\n * glyph, so when they move and the caller chose no left icon, the advice\n * names the wrapper's default glyph too, and following it draws what the\n * wrapper's own `Control` did.\n * Internal; not part of the public API.\n */\nexport const rendersOwnControl = (\n  component: string,\n  options: OwnControlOptions\n): boolean => {\n  if (!options.inline && !options.insideControl) return true;\n  const held = (\n    Object.keys(ON_CONTROL) as Array<keyof ControlLevelProps>\n  ).filter(prop => options[prop]);\n  if (held.length === 0) return false;\n  const names = held.join(' ');\n  const doNothing = held.length > 1 ? 'those props do' : 'that prop does';\n  let message: string;\n  if (options.inline) {\n    message =\n      `[bestax-bulma] <${component} inline ${names}> renders no <Control> ` +\n      `in inline mode, inside a <Control> or not, so ${doNothing} ` +\n      `nothing. Leave ${held.length > 1 ? 'them' : 'it'} out of an ` +\n      `inline picker.`;\n  } else {\n    const toSet = held.map(prop => ON_CONTROL[prop]);\n    const needsGlyph =\n      (options.iconLeftSize || options.hasIconsLeft) &&\n      !options.iconLeft &&\n      options.iconLeftName === undefined &&\n      options.defaultIconLeftName;\n    if (needsGlyph) {\n      toSet.push(\n        `iconLeftName=\"${options.defaultIconLeftName}\" (its default icon)`\n      );\n    }\n    message =\n      `[bestax-bulma] <${component} ${names}> inside a <Control> renders ` +\n      `no <Control> of its own, so ${doNothing} nothing there. Set ` +\n      `${listOf(toSet)} on that <Control> instead.`;\n  }\n  // Keyed by the message itself: the props named do not settle the advice\n  // (an empty `iconLeftName` and an unset one name the same props), so two\n  // calls that would advise differently must not share a key.\n  warnOnce(message, message);\n  return false;\n};\n\nconst FieldLabelIdContext = createContext<string | undefined>(undefined);\n\n/**\n * The id a labeled Field wants its single composed control to adopt (#495).\n * `undefined` outside a Field, in unlabeled/grouped/addons Fields, or when the\n * user took over the association with an explicit `labelProps.htmlFor`.\n * Consumed through `useFieldLabelTarget` by the single-control bases\n * (InputBase, SelectBase, TextAreaBase, and the date and time picker bases\n * unless inline, #968) and, through `useAutoLabelId`, by the convenience\n * inputs that render an input of their own (#939). Read it only through\n * those, which report what they take: a control that read it directly would\n * report nothing and lose its label (#1004), and\n * `__tests__/field-label-readers.test.ts` fails on one. Internal; not part of\n * the public API.\n */\nexport const useFieldLabelId = () => useContext(FieldLabelIdContext);\n\n/** Provider for the Field label-target id — used internally by Field. */\nexport const FieldLabelIdProvider = FieldLabelIdContext.Provider;\n\nconst FieldLabelElementIdContext = createContext<string | undefined>(undefined);\n\n/**\n * The id of a labeled Field's own `<label>`, for a group control (Radios,\n * Checkboxes, Rate, DateRangeInput and DateRangeInputBase) to point\n * `aria-labelledby` at, since a group cannot take the label's `htmlFor`\n * (#939, #1005). Set under the same conditions as\n * {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.\n * Internal; not part of the public API.\n */\nexport const useFieldLabelElementId = () =>\n  useContext(FieldLabelElementIdContext);\n\n/** Provider for the Field label's own id, used internally by Field. */\nexport const FieldLabelElementIdProvider = FieldLabelElementIdContext.Provider;\n\n/** The nearest labeled Field's `<label>`, as {@link useFieldLabelFor} reads it. */\nexport interface FieldLabelFor {\n  /** What the label's `htmlFor` points at, generated or the caller's. */\n  htmlFor?: string;\n  /** The id the label renders with, the caller's or a generated one, if any. */\n  id?: string;\n}\n\nconst FieldLabelForContext = createContext<FieldLabelFor>({});\n\n/**\n * The nearest labeled Field's `<label>`: what it points `htmlFor` at, the id\n * it generated or the caller's own `labelProps.htmlFor`, and the id the label\n * renders with, if it has one. An unlabeled Field passes both through\n * together, so a control in the inner Field of a horizontal layout can tell\n * the outer label names it, and point at that label by its id, as a range\n * Slider's thumbs (#981) and Autocomplete's and Taginput's suggestion lists\n * (#998, #1082) do. The\n * `htmlFor` is only ever compared with a control's own id, never adopted, so\n * it hands out no id for a control. It keeps the generated id after the\n * label drops a `for` nothing took (#1004), which no control's id matches\n * then, so the value does not change under the content that reported it.\n * The `id` is set only while that label renders with it. Unlike\n * {@link useFieldLabelId}, it is set in a `grouped` or `hasAddons` Field\n * too, so a label wired by hand names the control its `for` picks in those\n * rows as well. Consumed through `useAutoLabelId`.\n * Internal; not part of the public API.\n */\nexport const useFieldLabelFor = () => useContext(FieldLabelForContext);\n\n/** Provider for the Field label's `htmlFor` target and id, used internally by Field. */\nexport const FieldLabelForProvider = FieldLabelForContext.Provider;\n\n/**\n * Records that one piece of a labeled Field's content took the label's\n * generated id, and returns the function that forgets it.\n */\ntype FieldLabelForReport = () => () => void;\n\nconst FieldLabelForReportContext = createContext<\n  FieldLabelForReport | undefined\n>(undefined);\n\n/**\n * Tells the nearest labeled Field that this content took its generated id\n * while `takesFor` is true (#1004). Once the Field's content has mounted, its\n * label keeps the generated `for` only while something has said so, so the\n * label renders none over a group, a `Checkbox`, `Radio` or `Switch`, an\n * inner `Field`, an input with an `id` of its own, markup of your own, or\n * nothing at all. Anything that puts the id from {@link useFieldLabelId} on\n * an element has to say so, or the label drops the `for` that names it, and\n * content that takes no id has nothing to do. Set under the same conditions\n * as {@link useFieldLabelId}, so a label wired by hand and a `grouped` or\n * `hasAddons` Field hear nothing. It reports from a layout effect, which a\n * server never runs and a hydrating client runs only after its first render,\n * so that render writes the `for` the way the server did.\n * Internal; not part of the public API.\n */\nexport const useReportFieldLabelFor = (takesFor: boolean): void => {\n  const report = useContext(FieldLabelForReportContext);\n  useClientLayoutEffect(\n    () => (takesFor ? report?.() : undefined),\n    [report, takesFor]\n  );\n};\n\n/** Provider for the labeled Field's report function, used internally by Field. */\nexport const FieldLabelForReportProvider = FieldLabelForReportContext.Provider;\n\n/**\n * The id a control with one input of its own renders with: the caller's\n * `id` when one arrived, otherwise the one a labeled Field offers (#495),\n * unless it has no input to put it on (`hasInput: false`, as in an `inline`\n * picker). It also tells that Field when it took the Field's id, through\n * {@link useReportFieldLabelFor}, so the label keeps its `for` (#1004). Used\n * by the single-control bases. Internal; not part of the public API.\n */\nexport const useFieldLabelTarget = (\n  id: string | undefined,\n  hasInput = true\n): string | undefined => {\n  const fieldLabelId = useFieldLabelId();\n  const target = id ?? (hasInput ? fieldLabelId : undefined);\n  useReportFieldLabelFor(fieldLabelId !== undefined && target === fieldLabelId);\n  return target;\n};\n\n/**\n * Shape of the Radios group context. The group provides:\n * - `name`: shared form field name (Stage 1)\n * - `value`: currently-selected radio value (Stage 2 — group-managed selection)\n * - `onChange`: dispatched by child Radios when clicked (Stage 2)\n *\n * Group sets `value`/`onChange` only when actively managing selection\n * (i.e., the user passed `value`, `defaultValue`, or `onChange` to `<Radios>`).\n * When only `name` is provided, the group is in \"name-only\" mode and child\n * Radios manage their own checked state independently.\n */\nexport interface RadiosGroupContextValue {\n  name?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n}\n\n/**\n * Shape of the Checkboxes group context. Like Radios but with array semantics\n * for multi-select.\n */\nexport interface CheckboxesGroupContextValue {\n  name?: string;\n  value?: string[];\n  onChange?: (values: string[]) => void;\n}\n\nconst RadiosContext = createContext<RadiosGroupContextValue | undefined>(\n  undefined\n);\nconst CheckboxesContext = createContext<\n  CheckboxesGroupContextValue | undefined\n>(undefined);\n\n/**\n * Hook to read the full surrounding `<Radios>` group context (name + selection).\n * Returns `undefined` when not inside a `<Radios>` group.\n */\nexport const useRadiosGroup = () => useContext(RadiosContext);\n\n/**\n * Hook to read the full surrounding `<Checkboxes>` group context.\n * Returns `undefined` when not inside a `<Checkboxes>` group.\n */\nexport const useCheckboxesGroup = () => useContext(CheckboxesContext);\n\n/**\n * Hook to read just the shared `name` from a surrounding `<Radios>` group.\n * Child `<Radio>` components fall back to this when no local `name` prop is set.\n * Returns `undefined` outside of a `<Radios>` group.\n */\nexport const useRadiosName = () => useRadiosGroup()?.name;\n\n/**\n * Hook to read just the shared `name` from a surrounding `<Checkboxes>` group.\n * Returns `undefined` outside of a `<Checkboxes>` group.\n */\nexport const useCheckboxesName = () => useCheckboxesGroup()?.name;\n\n/** Provider for the Radios group context — used internally by Radios. */\nexport const RadiosProvider = RadiosContext.Provider;\n\n/** Provider for the Checkboxes group context — used internally by Checkboxes. */\nexport const CheckboxesProvider = CheckboxesContext.Provider;\n\n// --- Backward-compat aliases (Stage 1 names) -----------------------------\n// Internal callers may still import these. Both still work because they refer\n// to the same providers/hooks under the new shape.\n\n/** @deprecated Use `RadiosProvider` (provides {name, value, onChange}). */\nexport const RadiosNameProvider = RadiosProvider;\n\n/** @deprecated Use `CheckboxesProvider` (provides {name, value, onChange}). */\nexport const CheckboxesNameProvider = CheckboxesProvider;\n"],"names":[],"mappings":"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"}

package/dist/esm/form/InputBase.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
-import { useFieldLabelTarget } from './FormContext.js';
+import { useFieldsetDisabled, useFieldLabelTarget } from './FormContext.js';
 
 /**
  * Bulma Input component with full Bulma helper class support.
@@ -13,7 +13,8 @@ import { useFieldLabelTarget } from './FormContext.js';
  * @returns {JSX.Element} The rendered input element.
  * @see {@link https://bulma.io/documentation/form/input/ | Bulma Input documentation}
  */
-const InputBase = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled, readOnly, ...props }, ref) => {
+const InputBase = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled: disabledProp, readOnly, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,

package/dist/esm/form/InputBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputBase.js","sources":["../../../src/form/InputBase.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useFieldLabelTarget } from './FormContext';\n\n/**\n * Props for the Input component.\n */\nexport interface InputBaseProps\n  extends\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Bulma color modifier for the input. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size modifier for the input. */\n  size?: 'small' | 'medium' | 'large';\n  /** Rounded input corners. */\n  isRounded?: boolean;\n  /** Styles the input as static text. It stays editable; add `readOnly` to stop edits. */\n  isStatic?: boolean;\n  /** Applies hovered state. */\n  isHovered?: boolean;\n  /** Applies focused state. */\n  isFocused?: boolean;\n  /**\n   * Adds the `is-loading` class to the `<input>`. Bulma draws no spinner for it there: the\n   * spinner belongs to the wrapping `Control`, so set `isLoading` on that `Control`.\n   */\n  isLoading?: boolean;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Disabled input. */\n  disabled?: boolean;\n  /** Read-only input. */\n  readOnly?: boolean;\n}\n\n/**\n * Bulma Input component with full Bulma helper class support.\n *\n * @function\n * @param {InputBaseProps} props - Props for the Input component.\n * @returns {JSX.Element} The rendered input element.\n * @see {@link https://bulma.io/documentation/form/input/ | Bulma Input documentation}\n */\nexport const InputBase = forwardRef<HTMLInputElement, InputBaseProps>(\n  (\n    {\n      color,\n      size,\n      isRounded,\n      isStatic,\n      isHovered,\n      isFocused,\n      isLoading,\n      className,\n      disabled,\n      readOnly,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color,\n      ...props,\n    });\n    // A labeled Field's generated id when no user id arrived (rest.id may be\n    // an undefined own key), reported to that Field (#1004).\n    const id = useFieldLabelTarget(rest.id);\n\n    const mainClass = usePrefixedClassNames('input', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-rounded': isRounded,\n      'is-static': isStatic,\n      'is-hovered': isHovered,\n      'is-focused': isFocused,\n      'is-loading': isLoading,\n    });\n    const inputClass = classNames(mainClass, bulmaHelperClasses, className);\n\n    return (\n      <input\n        ref={ref}\n        className={inputClass}\n        disabled={disabled}\n        readOnly={readOnly}\n        {...rest}\n        // After the spread, which may carry an undefined id key.\n        id={id}\n      />\n    );\n  }\n);\nInputBase.displayName = 'InputBase';\n\nexport default InputBase;\n"],"names":["_jsx"],"mappings":";;;;;;;AA+CA;;;;;;;AAOG;AACI,MAAM,SAAS,GAAG,UAAU,CACjC,CACE,EACE,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK;AACL,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;;IAGF,MAAM,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;AAEvC,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAC/C,QAAA,CAAC,MAAM,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,KAAK;AACxB,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACxB,KAAA,CAAC;IACF,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAEvE,IAAA,QACEA,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,IAAI;;AAER,QAAA,EAAE,EAAE,EAAE,EAAA,CACN;AAEN,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW;;"}
+{"version":3,"file":"InputBase.js","sources":["../../../src/form/InputBase.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useFieldLabelTarget, useFieldsetDisabled } from './FormContext';\n\n/**\n * Props for the Input component.\n */\nexport interface InputBaseProps\n  extends\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Bulma color modifier for the input. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size modifier for the input. */\n  size?: 'small' | 'medium' | 'large';\n  /** Rounded input corners. */\n  isRounded?: boolean;\n  /** Styles the input as static text. It stays editable; add `readOnly` to stop edits. */\n  isStatic?: boolean;\n  /** Applies hovered state. */\n  isHovered?: boolean;\n  /** Applies focused state. */\n  isFocused?: boolean;\n  /**\n   * Adds the `is-loading` class to the `<input>`. Bulma draws no spinner for it there: the\n   * spinner belongs to the wrapping `Control`, so set `isLoading` on that `Control`.\n   */\n  isLoading?: boolean;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Disabled input. */\n  disabled?: boolean;\n  /** Read-only input. */\n  readOnly?: boolean;\n}\n\n/**\n * Bulma Input component with full Bulma helper class support.\n *\n * @function\n * @param {InputBaseProps} props - Props for the Input component.\n * @returns {JSX.Element} The rendered input element.\n * @see {@link https://bulma.io/documentation/form/input/ | Bulma Input documentation}\n */\nexport const InputBase = forwardRef<HTMLInputElement, InputBaseProps>(\n  (\n    {\n      color,\n      size,\n      isRounded,\n      isStatic,\n      isHovered,\n      isFocused,\n      isLoading,\n      className,\n      disabled: disabledProp,\n      readOnly,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color,\n      ...props,\n    });\n    // A labeled Field's generated id when no user id arrived (rest.id may be\n    // an undefined own key), reported to that Field (#1004).\n    const id = useFieldLabelTarget(rest.id);\n\n    const mainClass = usePrefixedClassNames('input', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-rounded': isRounded,\n      'is-static': isStatic,\n      'is-hovered': isHovered,\n      'is-focused': isFocused,\n      'is-loading': isLoading,\n    });\n    const inputClass = classNames(mainClass, bulmaHelperClasses, className);\n\n    return (\n      <input\n        ref={ref}\n        className={inputClass}\n        disabled={disabled}\n        readOnly={readOnly}\n        {...rest}\n        // After the spread, which may carry an undefined id key.\n        id={id}\n      />\n    );\n  }\n);\nInputBase.displayName = 'InputBase';\n\nexport default InputBase;\n"],"names":["_jsx"],"mappings":";;;;;;;AA+CA;;;;;;;AAOG;AACI,MAAM,SAAS,GAAG,UAAU,CACjC,CACE,EACE,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,YAAY,CAAC;AAClD,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK;AACL,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;;IAGF,MAAM,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;AAEvC,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAC/C,QAAA,CAAC,MAAM,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,KAAK;AACxB,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACxB,KAAA,CAAC;IACF,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAEvE,IAAA,QACEA,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,IAAI;;AAER,QAAA,EAAE,EAAE,EAAE,EAAA,CACN;AAEN,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW;;"}

package/dist/esm/form/Numberinput.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useCallback } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
-import { useInsideField, useInsideControl } from './FormContext.js';
+import { useFieldsetDisabled, useInsideField, useInsideControl } from './FormContext.js';
 import { Field } from './Field.js';
 import { useAutoLabelId } from './useAutoLabelId.js';
 
@@ -26,7 +26,8 @@ const ArrowDropDown = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", st
  */
 const Numberinput = forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled = false, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled: disabledProp, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     // Bare controls join their parent's row, which a `.control` does not lay
     // out. `useInsideControl()` is true anywhere below a `Control`, even past

package/dist/esm/form/Numberinput.js.map

@@ -1 +1 @@
-{"version":3,"file":"Numberinput.js","sources":["../../../src/form/Numberinput.tsx"],"sourcesContent":["import React, { forwardRef, useState, useCallback, useRef } from 'react';\nimport type { JSX } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useInsideField, useInsideControl } from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/** Valid sizes for the Numberinput component. */\nexport type NumberinputSize = 'small' | 'medium' | 'large';\n\n/** Valid colors for the Numberinput wrapper and control buttons. */\nexport type NumberinputColor =\n  | 'primary'\n  | 'link'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'light'\n  | 'dark';\n\n/** Valid colors for the Numberinput inner input element. */\nexport type NumberinputInputColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Position of the increment/decrement control buttons. */\nexport type NumberinputControlsPosition = 'left' | 'right' | 'both';\n\n/** Visual variant for the Numberinput controls. */\nexport type NumberinputVariant = 'plusminus' | 'stepper';\n\n/**\n * Props for the Numberinput component.\n * @helperProps Helper props go on the outer `.numberinput` `<div>`, with\n * `className`. The other attributes go on the `<input>`.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface NumberinputProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'color' | 'size' | 'onChange' | 'value' | 'defaultValue' | 'type'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n    FormFieldProps {\n  /** Field label. Automatically associated with the number 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`) and you set no `id` here. Not rendered either by a plusminus `bare` Numberinput outside a `Field`. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Controlled value. */\n  value?: number;\n  /** Default value for uncontrolled usage. */\n  defaultValue?: number;\n  /** Minimum allowed value. */\n  min?: number;\n  /** Maximum allowed value. */\n  max?: number;\n  /** Step increment (default: 1). */\n  step?: number;\n  /** Size variant. */\n  size?: NumberinputSize;\n  /** Color variant for buttons. */\n  color?: NumberinputColor;\n  /** Color of the input field itself. */\n  inputColor?: NumberinputInputColor;\n  /** Position of +/- buttons. */\n  controlsPosition?: NumberinputControlsPosition;\n  /** Use rounded buttons. */\n  controlsRounded?: boolean;\n  /** Uses compact button spacing. */\n  compact?: boolean;\n  /**\n   * Renders the plusminus controls without a `.field` row of their own, so\n   * they join the row of a `Field` with `hasAddons` or `grouped` they sit\n   * in. On by default inside a `Field`, unless a `Control` is anywhere above\n   * it: a `Control` stacks its children, so there the controls keep their\n   * own row.\n   * @defaultValue auto\n   */\n  bare?: boolean;\n  /** Style variant for the control buttons. */\n  variant?: NumberinputVariant;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /** Whether the input can be typed in. */\n  editable?: boolean;\n  /**\n   * Shows a loading spinner on the input's control.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   * Use this rather than `isLoading` on a `Control` around the Numberinput:\n   * that spinner sits at the `Control`'s right edge, on top of whichever\n   * button is there, while this one stays inside the input.\n   */\n  isLoading?: boolean;\n  /** Enables exponential step increments when holding buttons. */\n  exponential?: boolean;\n  /** Callback when value changes. */\n  onChange?: (value: number) => void;\n}\n\nconst ArrowDropUp = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M7 14.5l5-5 5 5\" />\n  </svg>\n);\n\nconst ArrowDropDown = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M7 9.5l5 5 5-5\" />\n  </svg>\n);\n\n/**\n * The `Numberinput` component provides a number input with increment/decrement buttons.\n *\n * @function\n * @param {NumberinputProps} props - Props for the Numberinput component.\n * @returns {JSX.Element} The rendered numeric input element.\n *\n * @example\n * // Basic number input\n * <Numberinput defaultValue={5} min={0} max={100} />\n *\n * @example\n * // Stepper variant with color\n * <Numberinput variant=\"stepper\" color=\"primary\" step={10} />\n */\nexport const Numberinput = forwardRef<HTMLInputElement, NumberinputProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      value: controlledValue,\n      defaultValue,\n      min,\n      max,\n      step = 1,\n      size,\n      color,\n      inputColor,\n      controlsPosition = 'both',\n      controlsRounded = false,\n      compact = false,\n      bare,\n      variant = 'plusminus',\n      disabled = false,\n      editable = true,\n      isLoading = false,\n      exponential = false,\n      onChange,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const insideField = useInsideField();\n    // Bare controls join their parent's row, which a `.control` does not lay\n    // out. `useInsideControl()` is true anywhere below a `Control`, even past\n    // a `Field` nested in it, so there they keep their own row as well.\n    const insideControl = useInsideControl();\n    const effectiveBare = bare ?? (insideField && !insideControl);\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const [internalValue, setInternalValue] = useState<number | undefined>(\n      defaultValue\n    );\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Determine if controlled\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n\n    // Layout mode\n    const isStepper = variant === 'stepper';\n    const isAddons = compact || isStepper;\n    const effectiveControlsPosition = isStepper ? 'right' : controlsPosition;\n\n    // The plusminus bare branch renders no Field and no label at all.\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: !insideField && (isStepper || !effectiveBare),\n    });\n\n    // Clamp value to min/max\n    const clampValue = useCallback(\n      (val: number): number => {\n        let clamped = val;\n        if (min !== undefined && clamped < min) clamped = min;\n        if (max !== undefined && clamped > max) clamped = max;\n        return clamped;\n      },\n      [min, max]\n    );\n\n    // Update value\n    const updateValue = useCallback(\n      (newValue: number) => {\n        const clampedValue = clampValue(newValue);\n        if (!isControlled) {\n          setInternalValue(clampedValue);\n        }\n        onChange?.(clampedValue);\n      },\n      [isControlled, clampValue, onChange]\n    );\n\n    // Exponential step: step grows with value magnitude\n    const getEffectiveStep = useCallback(() => {\n      if (!exponential) return step;\n      return step * Math.max(1, Math.floor(Math.abs(currentValue ?? 0)));\n    }, [exponential, step, currentValue]);\n\n    // Handle increment\n    const handleIncrement = useCallback(() => {\n      updateValue((currentValue ?? 0) + getEffectiveStep());\n    }, [currentValue, getEffectiveStep, updateValue]);\n\n    // Handle decrement\n    const handleDecrement = useCallback(() => {\n      updateValue((currentValue ?? 0) - getEffectiveStep());\n    }, [currentValue, getEffectiveStep, updateValue]);\n\n    // Handle input change\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = parseFloat(e.target.value);\n        if (!isNaN(newValue)) {\n          updateValue(newValue);\n        }\n      },\n      [updateValue]\n    );\n\n    // Handle keyboard\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          handleIncrement();\n        } else if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          handleDecrement();\n        }\n      },\n      [handleIncrement, handleDecrement]\n    );\n\n    // Check if at limits\n    const isAtMin =\n      min !== undefined && currentValue !== undefined && currentValue <= min;\n    const isAtMax =\n      max !== undefined && currentValue !== undefined && currentValue >= max;\n\n    // Generate classes\n    const fieldClasses = usePrefixedClassNames('field', {\n      'is-grouped': !isAddons,\n      'has-addons': isAddons,\n    });\n\n    const numberinputClasses = usePrefixedClassNames('numberinput', {\n      'is-compact': isAddons,\n      'is-stepper': isStepper,\n      [`is-${size}`]: !!size,\n      'is-disabled': disabled,\n      [`controls-${effectiveControlsPosition}`]:\n        effectiveControlsPosition !== 'both',\n    });\n\n    const controlClasses = usePrefixedClassNames('control');\n    const expandedControlClasses = usePrefixedClassNames('control', {\n      'is-expanded': true,\n      'is-loading': isLoading,\n    });\n\n    const buttonClasses = usePrefixedClassNames('button', {\n      [`is-${size}`]: !!size,\n      [`is-${color}`]: !!color,\n      'is-rounded': controlsRounded,\n    });\n\n    const inputClasses = usePrefixedClassNames('input', {\n      [`is-${size}`]: !!size,\n      [`is-${inputColor}`]: !!inputColor,\n    });\n\n    const iconClasses = usePrefixedClassNames('icon', 'is-small');\n    const stepperClasses = usePrefixedClassNames('numberinput-stepper');\n    const stepperButtonClasses = usePrefixedClassNames(\n      'numberinput-stepper-button'\n    );\n\n    const combinedClasses = classNames(\n      fieldClasses,\n      numberinputClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    // Use combined ref\n    const combinedRef = (node: HTMLInputElement | null) => {\n      (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n        node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      }\n    };\n\n    // Shared input element\n    const inputControl = (\n      <div className={expandedControlClasses}>\n        <input\n          ref={combinedRef}\n          type=\"number\"\n          className={inputClasses}\n          value={currentValue ?? ''}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          readOnly={!editable}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={currentValue ?? undefined}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          {...rest}\n          // After the spread: an undefined `id` key in rest would wipe it.\n          id={controlId}\n        />\n      </div>\n    );\n\n    // Stepper variant\n    if (isStepper) {\n      const stepperElement = (\n        <div className={combinedClasses}>\n          {inputControl}\n          <div className={controlClasses}>\n            <div className={stepperClasses}>\n              <button\n                type=\"button\"\n                className={stepperButtonClasses}\n                onClick={handleIncrement}\n                disabled={disabled || isAtMax}\n                tabIndex={-1}\n                aria-label=\"Increase value\"\n              >\n                <ArrowDropUp />\n              </button>\n              <button\n                type=\"button\"\n                className={stepperButtonClasses}\n                onClick={handleDecrement}\n                disabled={disabled || isAtMin}\n                tabIndex={-1}\n                aria-label=\"Decrease value\"\n              >\n                <ArrowDropDown />\n              </button>\n            </div>\n          </div>\n        </div>\n      );\n\n      if (!insideField) {\n        return (\n          <Field\n            label={label}\n            labelSize={labelSize}\n            labelProps={fieldLabelProps}\n            horizontal={horizontal}\n            className={fieldClassName}\n          >\n            {stepperElement}\n            {messageEl}\n          </Field>\n        );\n      }\n\n      return (\n        <>\n          {stepperElement}\n          {messageEl}\n        </>\n      );\n    }\n\n    // Plusminus buttons\n    const decrementButton = (\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleDecrement}\n        disabled={disabled || isAtMin}\n        tabIndex={-1}\n        aria-label=\"Decrease value\"\n      >\n        <span className={iconClasses}>\n          <span aria-hidden=\"true\">&minus;</span>\n        </span>\n      </button>\n    );\n\n    const incrementButton = (\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleIncrement}\n        disabled={disabled || isAtMax}\n        tabIndex={-1}\n        aria-label=\"Increase value\"\n      >\n        <span className={iconClasses}>\n          <span aria-hidden=\"true\">+</span>\n        </span>\n      </button>\n    );\n\n    const decrementControl = (\n      <div className={controlClasses}>{decrementButton}</div>\n    );\n    const incrementControl = (\n      <div className={controlClasses}>{incrementButton}</div>\n    );\n\n    // Bare mode: no outer .field wrapper, for composing inside a parent Field\n    if (effectiveBare) {\n      const bareClasses = classNames(\n        numberinputClasses,\n        bulmaHelperClasses,\n        className\n      );\n\n      if (effectiveControlsPosition === 'left') {\n        return (\n          <div className={bareClasses} style={{ display: 'contents' }}>\n            {decrementControl}\n            {incrementControl}\n            {inputControl}\n          </div>\n        );\n      }\n\n      if (effectiveControlsPosition === 'right') {\n        return (\n          <div className={bareClasses} style={{ display: 'contents' }}>\n            {inputControl}\n            {decrementControl}\n            {incrementControl}\n          </div>\n        );\n      }\n\n      return (\n        <div className={bareClasses} style={{ display: 'contents' }}>\n          {decrementControl}\n          {inputControl}\n          {incrementControl}\n        </div>\n      );\n    }\n\n    // Controls left: [−] [+] [input]\n    let numberinputElement: JSX.Element;\n    if (effectiveControlsPosition === 'left') {\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {decrementControl}\n          {incrementControl}\n          {inputControl}\n        </div>\n      );\n    } else if (effectiveControlsPosition === 'right') {\n      // Controls right: [input] [−] [+]\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {inputControl}\n          {decrementControl}\n          {incrementControl}\n        </div>\n      );\n    } else {\n      // Both sides (default): [−] [input] [+]\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {decrementControl}\n          {inputControl}\n          {incrementControl}\n        </div>\n      );\n    }\n\n    if (!insideField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {numberinputElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {numberinputElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nNumberinput.displayName = 'Numberinput';\n\n/** @deprecated Use `Numberinput` — same component. */\nexport const NumberInput = Numberinput;\n\n/** @deprecated Use `NumberinputProps`. */\nexport type NumberInputProps = NumberinputProps;\n\nexport default Numberinput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Numberinput.js","sources":["../../../src/form/Numberinput.tsx"],"sourcesContent":["import React, { forwardRef, useState, useCallback, useRef } from 'react';\nimport type { JSX } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  useFieldsetDisabled,\n  useInsideField,\n  useInsideControl,\n} from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/** Valid sizes for the Numberinput component. */\nexport type NumberinputSize = 'small' | 'medium' | 'large';\n\n/** Valid colors for the Numberinput wrapper and control buttons. */\nexport type NumberinputColor =\n  | 'primary'\n  | 'link'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'light'\n  | 'dark';\n\n/** Valid colors for the Numberinput inner input element. */\nexport type NumberinputInputColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Position of the increment/decrement control buttons. */\nexport type NumberinputControlsPosition = 'left' | 'right' | 'both';\n\n/** Visual variant for the Numberinput controls. */\nexport type NumberinputVariant = 'plusminus' | 'stepper';\n\n/**\n * Props for the Numberinput component.\n * @helperProps Helper props go on the outer `.numberinput` `<div>`, with\n * `className`. The other attributes go on the `<input>`.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface NumberinputProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'color' | 'size' | 'onChange' | 'value' | 'defaultValue' | 'type'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n    FormFieldProps {\n  /** Field label. Automatically associated with the number 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`) and you set no `id` here. Not rendered either by a plusminus `bare` Numberinput outside a `Field`. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Controlled value. */\n  value?: number;\n  /** Default value for uncontrolled usage. */\n  defaultValue?: number;\n  /** Minimum allowed value. */\n  min?: number;\n  /** Maximum allowed value. */\n  max?: number;\n  /** Step increment (default: 1). */\n  step?: number;\n  /** Size variant. */\n  size?: NumberinputSize;\n  /** Color variant for buttons. */\n  color?: NumberinputColor;\n  /** Color of the input field itself. */\n  inputColor?: NumberinputInputColor;\n  /** Position of +/- buttons. */\n  controlsPosition?: NumberinputControlsPosition;\n  /** Use rounded buttons. */\n  controlsRounded?: boolean;\n  /** Uses compact button spacing. */\n  compact?: boolean;\n  /**\n   * Renders the plusminus controls without a `.field` row of their own, so\n   * they join the row of a `Field` with `hasAddons` or `grouped` they sit\n   * in. On by default inside a `Field`, unless a `Control` is anywhere above\n   * it: a `Control` stacks its children, so there the controls keep their\n   * own row.\n   * @defaultValue auto\n   */\n  bare?: boolean;\n  /** Style variant for the control buttons. */\n  variant?: NumberinputVariant;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /** Whether the input can be typed in. */\n  editable?: boolean;\n  /**\n   * Shows a loading spinner on the input's control.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   * Use this rather than `isLoading` on a `Control` around the Numberinput:\n   * that spinner sits at the `Control`'s right edge, on top of whichever\n   * button is there, while this one stays inside the input.\n   */\n  isLoading?: boolean;\n  /** Enables exponential step increments when holding buttons. */\n  exponential?: boolean;\n  /** Callback when value changes. */\n  onChange?: (value: number) => void;\n}\n\nconst ArrowDropUp = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M7 14.5l5-5 5 5\" />\n  </svg>\n);\n\nconst ArrowDropDown = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M7 9.5l5 5 5-5\" />\n  </svg>\n);\n\n/**\n * The `Numberinput` component provides a number input with increment/decrement buttons.\n *\n * @function\n * @param {NumberinputProps} props - Props for the Numberinput component.\n * @returns {JSX.Element} The rendered numeric input element.\n *\n * @example\n * // Basic number input\n * <Numberinput defaultValue={5} min={0} max={100} />\n *\n * @example\n * // Stepper variant with color\n * <Numberinput variant=\"stepper\" color=\"primary\" step={10} />\n */\nexport const Numberinput = forwardRef<HTMLInputElement, NumberinputProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      value: controlledValue,\n      defaultValue,\n      min,\n      max,\n      step = 1,\n      size,\n      color,\n      inputColor,\n      controlsPosition = 'both',\n      controlsRounded = false,\n      compact = false,\n      bare,\n      variant = 'plusminus',\n      disabled: disabledProp,\n      editable = true,\n      isLoading = false,\n      exponential = false,\n      onChange,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const insideField = useInsideField();\n    // Bare controls join their parent's row, which a `.control` does not lay\n    // out. `useInsideControl()` is true anywhere below a `Control`, even past\n    // a `Field` nested in it, so there they keep their own row as well.\n    const insideControl = useInsideControl();\n    const effectiveBare = bare ?? (insideField && !insideControl);\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const [internalValue, setInternalValue] = useState<number | undefined>(\n      defaultValue\n    );\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Determine if controlled\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n\n    // Layout mode\n    const isStepper = variant === 'stepper';\n    const isAddons = compact || isStepper;\n    const effectiveControlsPosition = isStepper ? 'right' : controlsPosition;\n\n    // The plusminus bare branch renders no Field and no label at all.\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: !insideField && (isStepper || !effectiveBare),\n    });\n\n    // Clamp value to min/max\n    const clampValue = useCallback(\n      (val: number): number => {\n        let clamped = val;\n        if (min !== undefined && clamped < min) clamped = min;\n        if (max !== undefined && clamped > max) clamped = max;\n        return clamped;\n      },\n      [min, max]\n    );\n\n    // Update value\n    const updateValue = useCallback(\n      (newValue: number) => {\n        const clampedValue = clampValue(newValue);\n        if (!isControlled) {\n          setInternalValue(clampedValue);\n        }\n        onChange?.(clampedValue);\n      },\n      [isControlled, clampValue, onChange]\n    );\n\n    // Exponential step: step grows with value magnitude\n    const getEffectiveStep = useCallback(() => {\n      if (!exponential) return step;\n      return step * Math.max(1, Math.floor(Math.abs(currentValue ?? 0)));\n    }, [exponential, step, currentValue]);\n\n    // Handle increment\n    const handleIncrement = useCallback(() => {\n      updateValue((currentValue ?? 0) + getEffectiveStep());\n    }, [currentValue, getEffectiveStep, updateValue]);\n\n    // Handle decrement\n    const handleDecrement = useCallback(() => {\n      updateValue((currentValue ?? 0) - getEffectiveStep());\n    }, [currentValue, getEffectiveStep, updateValue]);\n\n    // Handle input change\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = parseFloat(e.target.value);\n        if (!isNaN(newValue)) {\n          updateValue(newValue);\n        }\n      },\n      [updateValue]\n    );\n\n    // Handle keyboard\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          handleIncrement();\n        } else if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          handleDecrement();\n        }\n      },\n      [handleIncrement, handleDecrement]\n    );\n\n    // Check if at limits\n    const isAtMin =\n      min !== undefined && currentValue !== undefined && currentValue <= min;\n    const isAtMax =\n      max !== undefined && currentValue !== undefined && currentValue >= max;\n\n    // Generate classes\n    const fieldClasses = usePrefixedClassNames('field', {\n      'is-grouped': !isAddons,\n      'has-addons': isAddons,\n    });\n\n    const numberinputClasses = usePrefixedClassNames('numberinput', {\n      'is-compact': isAddons,\n      'is-stepper': isStepper,\n      [`is-${size}`]: !!size,\n      'is-disabled': disabled,\n      [`controls-${effectiveControlsPosition}`]:\n        effectiveControlsPosition !== 'both',\n    });\n\n    const controlClasses = usePrefixedClassNames('control');\n    const expandedControlClasses = usePrefixedClassNames('control', {\n      'is-expanded': true,\n      'is-loading': isLoading,\n    });\n\n    const buttonClasses = usePrefixedClassNames('button', {\n      [`is-${size}`]: !!size,\n      [`is-${color}`]: !!color,\n      'is-rounded': controlsRounded,\n    });\n\n    const inputClasses = usePrefixedClassNames('input', {\n      [`is-${size}`]: !!size,\n      [`is-${inputColor}`]: !!inputColor,\n    });\n\n    const iconClasses = usePrefixedClassNames('icon', 'is-small');\n    const stepperClasses = usePrefixedClassNames('numberinput-stepper');\n    const stepperButtonClasses = usePrefixedClassNames(\n      'numberinput-stepper-button'\n    );\n\n    const combinedClasses = classNames(\n      fieldClasses,\n      numberinputClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    // Use combined ref\n    const combinedRef = (node: HTMLInputElement | null) => {\n      (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n        node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      }\n    };\n\n    // Shared input element\n    const inputControl = (\n      <div className={expandedControlClasses}>\n        <input\n          ref={combinedRef}\n          type=\"number\"\n          className={inputClasses}\n          value={currentValue ?? ''}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          readOnly={!editable}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={currentValue ?? undefined}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          {...rest}\n          // After the spread: an undefined `id` key in rest would wipe it.\n          id={controlId}\n        />\n      </div>\n    );\n\n    // Stepper variant\n    if (isStepper) {\n      const stepperElement = (\n        <div className={combinedClasses}>\n          {inputControl}\n          <div className={controlClasses}>\n            <div className={stepperClasses}>\n              <button\n                type=\"button\"\n                className={stepperButtonClasses}\n                onClick={handleIncrement}\n                disabled={disabled || isAtMax}\n                tabIndex={-1}\n                aria-label=\"Increase value\"\n              >\n                <ArrowDropUp />\n              </button>\n              <button\n                type=\"button\"\n                className={stepperButtonClasses}\n                onClick={handleDecrement}\n                disabled={disabled || isAtMin}\n                tabIndex={-1}\n                aria-label=\"Decrease value\"\n              >\n                <ArrowDropDown />\n              </button>\n            </div>\n          </div>\n        </div>\n      );\n\n      if (!insideField) {\n        return (\n          <Field\n            label={label}\n            labelSize={labelSize}\n            labelProps={fieldLabelProps}\n            horizontal={horizontal}\n            className={fieldClassName}\n          >\n            {stepperElement}\n            {messageEl}\n          </Field>\n        );\n      }\n\n      return (\n        <>\n          {stepperElement}\n          {messageEl}\n        </>\n      );\n    }\n\n    // Plusminus buttons\n    const decrementButton = (\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleDecrement}\n        disabled={disabled || isAtMin}\n        tabIndex={-1}\n        aria-label=\"Decrease value\"\n      >\n        <span className={iconClasses}>\n          <span aria-hidden=\"true\">&minus;</span>\n        </span>\n      </button>\n    );\n\n    const incrementButton = (\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleIncrement}\n        disabled={disabled || isAtMax}\n        tabIndex={-1}\n        aria-label=\"Increase value\"\n      >\n        <span className={iconClasses}>\n          <span aria-hidden=\"true\">+</span>\n        </span>\n      </button>\n    );\n\n    const decrementControl = (\n      <div className={controlClasses}>{decrementButton}</div>\n    );\n    const incrementControl = (\n      <div className={controlClasses}>{incrementButton}</div>\n    );\n\n    // Bare mode: no outer .field wrapper, for composing inside a parent Field\n    if (effectiveBare) {\n      const bareClasses = classNames(\n        numberinputClasses,\n        bulmaHelperClasses,\n        className\n      );\n\n      if (effectiveControlsPosition === 'left') {\n        return (\n          <div className={bareClasses} style={{ display: 'contents' }}>\n            {decrementControl}\n            {incrementControl}\n            {inputControl}\n          </div>\n        );\n      }\n\n      if (effectiveControlsPosition === 'right') {\n        return (\n          <div className={bareClasses} style={{ display: 'contents' }}>\n            {inputControl}\n            {decrementControl}\n            {incrementControl}\n          </div>\n        );\n      }\n\n      return (\n        <div className={bareClasses} style={{ display: 'contents' }}>\n          {decrementControl}\n          {inputControl}\n          {incrementControl}\n        </div>\n      );\n    }\n\n    // Controls left: [−] [+] [input]\n    let numberinputElement: JSX.Element;\n    if (effectiveControlsPosition === 'left') {\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {decrementControl}\n          {incrementControl}\n          {inputControl}\n        </div>\n      );\n    } else if (effectiveControlsPosition === 'right') {\n      // Controls right: [input] [−] [+]\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {inputControl}\n          {decrementControl}\n          {incrementControl}\n        </div>\n      );\n    } else {\n      // Both sides (default): [−] [input] [+]\n      numberinputElement = (\n        <div className={combinedClasses}>\n          {decrementControl}\n          {inputControl}\n          {incrementControl}\n        </div>\n      );\n    }\n\n    if (!insideField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {numberinputElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {numberinputElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nNumberinput.displayName = 'Numberinput';\n\n/** @deprecated Use `Numberinput` — same component. */\nexport const NumberInput = Numberinput;\n\n/** @deprecated Use `NumberinputProps`. */\nexport type NumberInputProps = NumberinputProps;\n\nexport default Numberinput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/form/PinInput.js

@@ -6,7 +6,7 @@ import { useClassPrefix } from '../helpers/Config.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
 import { getActiveElementInTree } from '../helpers/shadowDom.js';
-import { useInsideField, useInsideControl, rendersOwnField, rendersOwnControl } from './FormContext.js';
+import { useFieldsetDisabled, useInsideField, useInsideControl, rendersOwnField, rendersOwnControl } from './FormContext.js';
 import { Field } from './Field.js';
 import { Control } from './Control.js';
 import { useAutoLabelId } from './useAutoLabelId.js';
@@ -50,7 +50,8 @@ const toAsciiDigits = (text) => text.replace(/\p{Nd}/gu, digit => {
  */
 const PinInput = forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, length = 6, value: controlledValue, defaultValue = '', type = 'number', isMasked = false, color, size, isRounded = false, disabled = false, onChange, onComplete, onPaste, onFocus, onBlur, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, length = 6, value: controlledValue, defaultValue = '', type = 'number', isMasked = false, color, size, isRounded = false, disabled: disabledProp, onChange, onComplete, onPaste, onFocus, onBlur, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('PinInput', {