@allxsmith/bestax-bulma 5.51.0 → 5.53.0

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/form/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { useCheckboxesGroup } from './FormContext';\n\n/**\n * The values the Checkbox `color` prop accepts, as a readonly tuple.\n *\n * `CheckboxProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Checkbox, checkboxColors } from '@allxsmith/bestax-bulma';\n *\n * checkboxColors.map(color => (\n *   <Checkbox key={color} color={color}>\n *     {color}\n *   </Checkbox>\n * ));\n */\nexport const checkboxColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * The values the Checkbox `size` prop accepts, as a readonly tuple.\n *\n * `CheckboxProps['size']` is typed from it, so the two list the same values.\n * Use it to offer a size choice or to check a value that arrives at runtime:\n * the component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { checkboxSizes } from '@allxsmith/bestax-bulma';\n *\n * type CheckboxSize = (typeof checkboxSizes)[number];\n */\nexport const checkboxSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Checkbox component.\n *\n * @helperProps Helper props go on the outer `<label>`, with `className`. The\n * other attributes go on the `<input>`.\n */\nexport interface CheckboxProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Color of the checkbox. */\n  color?: (typeof checkboxColors)[number];\n  /** Size of the checkbox. */\n  size?: (typeof checkboxSizes)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /**\n   * Shows the mixed state, as in a \"Select all\" box when some of what it\n   * covers is checked. It's a look and an announcement only: `checked` is\n   * still the value, and a click still toggles `checked`. Set to `true` or\n   * `false`, it's controlled: a browser clears the mixed state on a click,\n   * so the component sets it again from this prop after every click and\n   * every render. Unset isn't `false`. The component leaves the input's own\n   * `indeterminate` property alone, so a ref can set it, and going from set\n   * to unset clears it once and hands it back. It has no HTML attribute, so\n   * server-rendered markup can't carry it, and a mixed box renders unmixed\n   * until hydration.\n   */\n  indeterminate?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`. That's the element that\n   * declares the `--bulma-checkbox-*` variables, so a class is how to set\n   * one: `style` and the other input attributes go to the `<input>`. Name\n   * `.styled-checkbox` beside your class in the selector, so it beats the\n   * label's own declaration whatever order the stylesheets load in. A\n   * `color` prop declares the fills again on `.styled-checkbox.is-<color>`,\n   * which ties that selector, so leave `color` unset when a class sets them.\n   */\n  className?: string;\n  /** The label/content for the checkbox. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Checkbox` component provides a Bulma-styled checkbox input.\n *\n * @function\n * @param {CheckboxProps} props - Props for the Checkbox component.\n * @returns {JSX.Element} The rendered checkbox element.\n *\n * @example\n * // Basic checkbox\n * <Checkbox>Accept terms</Checkbox>\n *\n * @example\n * // Inside a group\n * <Checkboxes name=\"tags\" defaultValue={['react']}>\n *   <Checkbox value=\"react\">React</Checkbox>\n *   <Checkbox value=\"vue\">Vue</Checkbox>\n * </Checkboxes>\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      color,\n      size,\n      className,\n      children,\n      textColor,\n      disabled,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      indeterminate,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // The input's own ref, merged with the forwarded one. A callback ref's\n    // return value is handed back, so React 19 still runs a cleanup it\n    // returns, as it did when the ref went straight to the input.\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') return ref(node);\n        if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    // `indeterminate` is a DOM property with no attribute, so it's set on the\n    // input rather than rendered. A click clears it, so this runs after every\n    // render, not only when the prop changes. Unset, it's left alone, so a\n    // ref that sets the property itself still works. `ownsIndeterminateRef`\n    // remembers that this component set it, so a prop that goes back to unset\n    // clears the dash once instead of leaving it on.\n    const ownsIndeterminateRef = useRef(false);\n    useClientLayoutEffect(() => {\n      if (indeterminate !== undefined) {\n        ownsIndeterminateRef.current = true;\n        inputRef.current!.indeterminate = indeterminate;\n      } else if (ownsIndeterminateRef.current) {\n        ownsIndeterminateRef.current = false;\n        inputRef.current!.indeterminate = false;\n      }\n    });\n\n    // Inherit name + selection state from a surrounding <Checkboxes> group.\n    // Local props always win over the group (explicit > implicit).\n    const group = useCheckboxesGroup();\n    const effectiveName = name ?? group?.name;\n\n    // Group-managed checked state — only when the group is in\n    // controlled/uncontrolled mode (group.value is defined) AND this Checkbox\n    // has a value to compare against. Local `checked` always wins.\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const groupHas = groupManaged && group!.value!.includes(String(value));\n    const effectiveChecked =\n      checked !== undefined ? checked : groupManaged ? groupHas : undefined;\n    // When the group manages checked, suppress local defaultChecked to avoid\n    // the controlled/uncontrolled React warning.\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        // The click that got here cleared the mixed state. Put it back now,\n        // since a click that changes no state renders nothing to do it.\n        if (indeterminate !== undefined) e.target.indeterminate = indeterminate;\n        // Local onChange always fires.\n        onChange?.(e);\n        // Dispatch to the group additionally — toggle this value's\n        // membership in the group's array.\n        if (group?.onChange && value !== undefined) {\n          const valStr = String(value);\n          const currentArr = group.value ?? [];\n          const next = e.target.checked\n            ? currentArr.includes(valStr)\n              ? currentArr\n              : [...currentArr, valStr]\n            : currentArr.filter(v => v !== valStr);\n          group.onChange(next);\n        }\n      },\n      [onChange, group, value, indeterminate]\n    );\n\n    const mainClass = usePrefixedClassNames('styled-checkbox', 'checkbox', {\n      [`is-${color}`]: color && checkboxColors.includes(color),\n      [`is-${size}`]: size && checkboxSizes.includes(size),\n    });\n    const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);\n    const checkClass = usePrefixedClassNames('check');\n    const controlLabelClass = usePrefixedClassNames('control-label');\n\n    return (\n      <label className={checkboxClass}>\n        <input\n          ref={setRefs}\n          type=\"checkbox\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={checkClass} />\n        {children && <span className={controlLabelClass}>{children}</span>}\n      </label>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/form/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { useCheckboxesGroup, useFieldsetDisabled } from './FormContext';\n\n/**\n * The values the Checkbox `color` prop accepts, as a readonly tuple.\n *\n * `CheckboxProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Checkbox, checkboxColors } from '@allxsmith/bestax-bulma';\n *\n * checkboxColors.map(color => (\n *   <Checkbox key={color} color={color}>\n *     {color}\n *   </Checkbox>\n * ));\n */\nexport const checkboxColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * The values the Checkbox `size` prop accepts, as a readonly tuple.\n *\n * `CheckboxProps['size']` is typed from it, so the two list the same values.\n * Use it to offer a size choice or to check a value that arrives at runtime:\n * the component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { checkboxSizes } from '@allxsmith/bestax-bulma';\n *\n * type CheckboxSize = (typeof checkboxSizes)[number];\n */\nexport const checkboxSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Checkbox component.\n *\n * @helperProps Helper props go on the outer `<label>`, with `className`. The\n * other attributes go on the `<input>`.\n */\nexport interface CheckboxProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Color of the checkbox. */\n  color?: (typeof checkboxColors)[number];\n  /** Size of the checkbox. */\n  size?: (typeof checkboxSizes)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /**\n   * Shows the mixed state, as in a \"Select all\" box when some of what it\n   * covers is checked. It's a look and an announcement only: `checked` is\n   * still the value, and a click still toggles `checked`. Set to `true` or\n   * `false`, it's controlled: a browser clears the mixed state on a click,\n   * so the component sets it again from this prop after every click and\n   * every render. Unset isn't `false`. The component leaves the input's own\n   * `indeterminate` property alone, so a ref can set it, and going from set\n   * to unset clears it once and hands it back. It has no HTML attribute, so\n   * server-rendered markup can't carry it, and a mixed box renders unmixed\n   * until hydration.\n   */\n  indeterminate?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`. That's the element that\n   * declares the `--bulma-checkbox-*` variables, so a class is how to set\n   * one: `style` and the other input attributes go to the `<input>`. Name\n   * `.styled-checkbox` beside your class in the selector, so it beats the\n   * label's own declaration whatever order the stylesheets load in. A\n   * `color` prop declares the fills again on `.styled-checkbox.is-<color>`,\n   * which ties that selector, so leave `color` unset when a class sets them.\n   */\n  className?: string;\n  /** The label/content for the checkbox. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Checkbox` component provides a Bulma-styled checkbox input.\n *\n * @function\n * @param {CheckboxProps} props - Props for the Checkbox component.\n * @returns {JSX.Element} The rendered checkbox element.\n *\n * @example\n * // Basic checkbox\n * <Checkbox>Accept terms</Checkbox>\n *\n * @example\n * // Inside a group\n * <Checkboxes name=\"tags\" defaultValue={['react']}>\n *   <Checkbox value=\"react\">React</Checkbox>\n *   <Checkbox value=\"vue\">Vue</Checkbox>\n * </Checkboxes>\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      color,\n      size,\n      className,\n      children,\n      textColor,\n      disabled: disabledProp,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      indeterminate,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // The input's own ref, merged with the forwarded one. A callback ref's\n    // return value is handed back, so React 19 still runs a cleanup it\n    // returns, as it did when the ref went straight to the input.\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') return ref(node);\n        if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    // `indeterminate` is a DOM property with no attribute, so it's set on the\n    // input rather than rendered. A click clears it, so this runs after every\n    // render, not only when the prop changes. Unset, it's left alone, so a\n    // ref that sets the property itself still works. `ownsIndeterminateRef`\n    // remembers that this component set it, so a prop that goes back to unset\n    // clears the dash once instead of leaving it on.\n    const ownsIndeterminateRef = useRef(false);\n    useClientLayoutEffect(() => {\n      if (indeterminate !== undefined) {\n        ownsIndeterminateRef.current = true;\n        inputRef.current!.indeterminate = indeterminate;\n      } else if (ownsIndeterminateRef.current) {\n        ownsIndeterminateRef.current = false;\n        inputRef.current!.indeterminate = false;\n      }\n    });\n\n    // Inherit name + selection state from a surrounding <Checkboxes> group.\n    // Local props always win over the group (explicit > implicit).\n    const group = useCheckboxesGroup();\n    const effectiveName = name ?? group?.name;\n\n    // Group-managed checked state — only when the group is in\n    // controlled/uncontrolled mode (group.value is defined) AND this Checkbox\n    // has a value to compare against. Local `checked` always wins.\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const groupHas = groupManaged && group!.value!.includes(String(value));\n    const effectiveChecked =\n      checked !== undefined ? checked : groupManaged ? groupHas : undefined;\n    // When the group manages checked, suppress local defaultChecked to avoid\n    // the controlled/uncontrolled React warning.\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        // The click that got here cleared the mixed state. Put it back now,\n        // since a click that changes no state renders nothing to do it.\n        if (indeterminate !== undefined) e.target.indeterminate = indeterminate;\n        // Local onChange always fires.\n        onChange?.(e);\n        // Dispatch to the group additionally — toggle this value's\n        // membership in the group's array.\n        if (group?.onChange && value !== undefined) {\n          const valStr = String(value);\n          const currentArr = group.value ?? [];\n          const next = e.target.checked\n            ? currentArr.includes(valStr)\n              ? currentArr\n              : [...currentArr, valStr]\n            : currentArr.filter(v => v !== valStr);\n          group.onChange(next);\n        }\n      },\n      [onChange, group, value, indeterminate]\n    );\n\n    const mainClass = usePrefixedClassNames('styled-checkbox', 'checkbox', {\n      [`is-${color}`]: color && checkboxColors.includes(color),\n      [`is-${size}`]: size && checkboxSizes.includes(size),\n    });\n    const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);\n    const checkClass = usePrefixedClassNames('check');\n    const controlLabelClass = usePrefixedClassNames('control-label');\n\n    return (\n      <label className={checkboxClass}>\n        <input\n          ref={setRefs}\n          type=\"checkbox\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={checkClass} />\n        {children && <span className={controlLabelClass}>{children}</span>}\n      </label>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/form/CheckboxCard.js

@@ -0,0 +1,119 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, useId } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
+import { useFieldsetDisabled, useCheckboxesGroup } from './FormContext.js';
+
+// The colors `Checkbox` takes, as `checkboxColors` lists them. Declared here as
+// well, so the API page can read them off this module, and a type test holds
+// the two lists to each other.
+const checkboxCardColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+/**
+ * The `CheckboxCard` component is a checkbox drawn as a card, with a title and a description, that toggles wherever you click it.
+ *
+ * It's a `<label>` around a real checkbox, so it sends its `value` with a
+ * form and Space toggles it. The title names the checkbox and the
+ * description describes it. Alone it's one choice; inside `Checkboxes` it
+ * takes the group's name and selection, as `Checkbox` does.
+ *
+ * @function
+ * @param {CheckboxCardProps} props - Props for the CheckboxCard component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The rendered card.
+ *
+ * @example
+ * <Checkboxes label="Add-ons" name="extras" defaultValue={['backups']}>
+ *   <CheckboxCard value="backups" title="Daily backups" description="Kept for 30 days." />
+ *   <CheckboxCard value="domain" title="Custom domain" description="Bring your own." />
+ * </Checkboxes>
+ */
+const CheckboxCard = forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled: disabledProp, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    // The input's own ref, merged with the forwarded one, as Checkbox does,
+    // so the mixed state can be set on it.
+    const inputRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    // `indeterminate` is a DOM property with no attribute, and a click clears
+    // it, so it's set after every render while the prop is set, and cleared
+    // once when the prop goes back to unset. Checkbox does the same.
+    const ownsIndeterminateRef = useRef(false);
+    useClientLayoutEffect(() => {
+        if (indeterminate !== undefined) {
+            ownsIndeterminateRef.current = true;
+            inputRef.current.indeterminate = indeterminate;
+        }
+        else if (ownsIndeterminateRef.current) {
+            ownsIndeterminateRef.current = false;
+            inputRef.current.indeterminate = false;
+        }
+    });
+    // A surrounding <Checkboxes> hands down its name and, when it manages
+    // the selection, whether this card's value is in it. The card's own
+    // props win, as they do on Checkbox.
+    const group = useCheckboxesGroup();
+    const effectiveName = name ?? group?.name;
+    const groupManaged = group?.value !== undefined && value !== undefined;
+    const effectiveChecked = checked !== undefined
+        ? checked
+        : groupManaged
+            ? group.value.includes(String(value))
+            : undefined;
+    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
+    const handleChange = useCallback((e) => {
+        if (indeterminate !== undefined)
+            e.target.indeterminate = indeterminate;
+        onChange?.(e);
+        if (group?.onChange && value !== undefined) {
+            const valStr = String(value);
+            const current = group.value ?? [];
+            group.onChange(e.target.checked
+                ? current.includes(valStr)
+                    ? current
+                    : [...current, valStr]
+                : current.filter(v => v !== valStr));
+        }
+    }, [onChange, group, value, indeterminate]);
+    // The title names the input and the description describes it. A name
+    // passed in wins, and without one of either the label's own text names
+    // the input, description included, so it isn't described again.
+    const titleId = useId();
+    const descriptionId = useId();
+    const ariaLabel = rest['aria-label'];
+    const ariaLabelledBy = rest['aria-labelledby'] || (!ariaLabel && title ? titleId : undefined);
+    const ariaDescribedBy = rest['aria-describedby'] ||
+        (description && (ariaLabel || ariaLabelledBy)
+            ? descriptionId
+            : undefined);
+    const cardClass = usePrefixedClassNames('checkbox-card', 'card', {
+        [`is-${color}`]: color && checkboxCardColors.includes(color),
+    });
+    const contentClass = usePrefixedClassNames('card-content', 'checkbox-card-content');
+    const checkClass = usePrefixedClassNames('checkbox-card-check');
+    const bodyClass = usePrefixedClassNames('checkbox-card-body');
+    const titleClass = usePrefixedClassNames('checkbox-card-title');
+    const descriptionClass = usePrefixedClassNames('checkbox-card-description');
+    return (jsxs("label", { className: classNames(cardClass, bulmaHelperClasses, className), children: [jsx("input", { ref: setRefs, type: "checkbox", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }), jsxs("span", { className: contentClass, children: [hasIndicator && jsx("span", { className: checkClass }), jsxs("span", { className: bodyClass, children: [title ? (jsx("span", { id: titleId, className: titleClass, children: title })) : null, description ? (jsx("span", { id: descriptionId, className: descriptionClass, children: description })) : null, children] })] })] }));
+});
+CheckboxCard.displayName = 'CheckboxCard';
+
+export { CheckboxCard };
+//# sourceMappingURL=CheckboxCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCard.js","sources":["../../../src/form/CheckboxCard.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useId, useRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { useCheckboxesGroup, useFieldsetDisabled } from './FormContext';\n\n// The colors `Checkbox` takes, as `checkboxColors` lists them. Declared here as\n// well, so the API page can read them off this module, and a type test holds\n// the two lists to each other.\nconst checkboxCardColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * Props for the CheckboxCard component.\n *\n * @helperProps Helper props go on the outer `<label>`, the `.card`, with\n * `className`. The other attributes go on the `<input>`.\n * @extraProp {string} [name] - The form field name. Inside `Checkboxes`, the group's `name` when this is unset.\n * @extraProp {string} [value] - What a form sends for the card when it's checked. Inside a `Checkboxes` group that takes `value`, `defaultValue` or `onChange`, the card is checked while the group's value holds it.\n */\nexport interface CheckboxCardProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color' | 'title'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /**\n   * What the option is, such as \"Daily backups\". It names the checkbox, so\n   * a screen reader says it with the state. Without it, the card's whole\n   * text names the checkbox, as a label's text does.\n   */\n  title?: React.ReactNode;\n  /**\n   * A line or two about the option, read after the name and the state. It's\n   * the checkbox's description when `title`, `aria-label` or\n   * `aria-labelledby` names it. Without one of those it's part of the name\n   * already, so it isn't read twice.\n   */\n  description?: React.ReactNode;\n  /**\n   * Anything else in the card, after the description, such as a price. A\n   * label holds phrasing content only, so spans, images and links: a link\n   * works and doesn't toggle the card, but a button or another input can't\n   * go inside a label at all. It isn't read when the checkbox takes focus,\n   * so put what a screen reader should hear in `title` and `description`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Shows the checkbox at the start of the card. Without it, the card's\n   * edge alone shows the selection, and it's thicker when checked, so the\n   * selection never rests on color.\n   */\n  hasIndicator?: boolean;\n  /** The color of the checkbox and of a checked card's edge. */\n  color?: (typeof checkboxCardColors)[number];\n  /**\n   * Text color helper, on the card. The title and the children take it, and\n   * the description keeps its own color.\n   */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the card is disabled. A disabled card dims, takes no clicks, and leaves the Tab order. */\n  disabled?: boolean;\n  /**\n   * Shows the mixed state, as in a \"Select all\" card when some of what it\n   * covers is checked. It's a look and an announcement only: `checked` is\n   * still the value, and a click still toggles `checked`. Set to `true` or\n   * `false`, it's controlled: a browser clears the mixed state on a click,\n   * so the component sets it again from this prop after every click and\n   * every render. Unset isn't `false`. The component leaves the input's own\n   * `indeterminate` property alone, so a ref can set it, and going from set\n   * to unset clears it once and hands it back. It has no HTML attribute, so\n   * server-rendered markup can't carry it, and a mixed card renders unmixed\n   * until hydration.\n   */\n  indeterminate?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`, the card. That's the\n   * element that declares the `--bulma-checkbox-card-*` variables, and\n   * Bulma's `--bulma-card-*` ones, so a class is how to set one: `style` and\n   * the other input attributes go to the `<input>`. Name `.checkbox-card`\n   * beside your class in the selector, so it beats the card's own\n   * declaration whatever order the stylesheets load in. A `color` prop\n   * declares the active color again on `.checkbox-card.is-<color>`, which\n   * ties that selector, so leave `color` unset when a class sets it.\n   */\n  className?: string;\n}\n\n/**\n * The `CheckboxCard` component is a checkbox drawn as a card, with a title and a description, that toggles wherever you click it.\n *\n * It's a `<label>` around a real checkbox, so it sends its `value` with a\n * form and Space toggles it. The title names the checkbox and the\n * description describes it. Alone it's one choice; inside `Checkboxes` it\n * takes the group's name and selection, as `Checkbox` does.\n *\n * @function\n * @param {CheckboxCardProps} props - Props for the CheckboxCard component.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.\n * @returns {JSX.Element} The rendered card.\n *\n * @example\n * <Checkboxes label=\"Add-ons\" name=\"extras\" defaultValue={['backups']}>\n *   <CheckboxCard value=\"backups\" title=\"Daily backups\" description=\"Kept for 30 days.\" />\n *   <CheckboxCard value=\"domain\" title=\"Custom domain\" description=\"Bring your own.\" />\n * </Checkboxes>\n */\nexport const CheckboxCard = forwardRef<HTMLInputElement, CheckboxCardProps>(\n  (\n    {\n      title,\n      description,\n      children,\n      hasIndicator = true,\n      color,\n      className,\n      textColor,\n      disabled: disabledProp,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      indeterminate,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // The input's own ref, merged with the forwarded one, as Checkbox does,\n    // so the mixed state can be set on it.\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') return ref(node);\n        if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    // `indeterminate` is a DOM property with no attribute, and a click clears\n    // it, so it's set after every render while the prop is set, and cleared\n    // once when the prop goes back to unset. Checkbox does the same.\n    const ownsIndeterminateRef = useRef(false);\n    useClientLayoutEffect(() => {\n      if (indeterminate !== undefined) {\n        ownsIndeterminateRef.current = true;\n        inputRef.current!.indeterminate = indeterminate;\n      } else if (ownsIndeterminateRef.current) {\n        ownsIndeterminateRef.current = false;\n        inputRef.current!.indeterminate = false;\n      }\n    });\n\n    // A surrounding <Checkboxes> hands down its name and, when it manages\n    // the selection, whether this card's value is in it. The card's own\n    // props win, as they do on Checkbox.\n    const group = useCheckboxesGroup();\n    const effectiveName = name ?? group?.name;\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const effectiveChecked =\n      checked !== undefined\n        ? checked\n        : groupManaged\n          ? group!.value!.includes(String(value))\n          : undefined;\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (indeterminate !== undefined) e.target.indeterminate = indeterminate;\n        onChange?.(e);\n        if (group?.onChange && value !== undefined) {\n          const valStr = String(value);\n          const current = group.value ?? [];\n          group.onChange(\n            e.target.checked\n              ? current.includes(valStr)\n                ? current\n                : [...current, valStr]\n              : current.filter(v => v !== valStr)\n          );\n        }\n      },\n      [onChange, group, value, indeterminate]\n    );\n\n    // The title names the input and the description describes it. A name\n    // passed in wins, and without one of either the label's own text names\n    // the input, description included, so it isn't described again.\n    const titleId = useId();\n    const descriptionId = useId();\n    const ariaLabel = rest['aria-label'];\n    const ariaLabelledBy =\n      rest['aria-labelledby'] || (!ariaLabel && title ? titleId : undefined);\n    const ariaDescribedBy =\n      rest['aria-describedby'] ||\n      (description && (ariaLabel || ariaLabelledBy)\n        ? descriptionId\n        : undefined);\n\n    const cardClass = usePrefixedClassNames('checkbox-card', 'card', {\n      [`is-${color}`]: color && checkboxCardColors.includes(color),\n    });\n    const contentClass = usePrefixedClassNames(\n      'card-content',\n      'checkbox-card-content'\n    );\n    const checkClass = usePrefixedClassNames('checkbox-card-check');\n    const bodyClass = usePrefixedClassNames('checkbox-card-body');\n    const titleClass = usePrefixedClassNames('checkbox-card-title');\n    const descriptionClass = usePrefixedClassNames('checkbox-card-description');\n\n    return (\n      <label className={classNames(cardClass, bulmaHelperClasses, className)}>\n        <input\n          ref={setRefs}\n          type=\"checkbox\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n        />\n        <span className={contentClass}>\n          {hasIndicator && <span className={checkClass} />}\n          <span className={bodyClass}>\n            {title ? (\n              <span id={titleId} className={titleClass}>\n                {title}\n              </span>\n            ) : null}\n            {description ? (\n              <span id={descriptionId} className={descriptionClass}>\n                {description}\n              </span>\n            ) : null}\n            {children}\n          </span>\n        </span>\n      </label>\n    );\n  }\n);\n\nCheckboxCard.displayName = 'CheckboxCard';\n\nexport default CheckboxCard;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/form/Checkboxes.js

@@ -9,6 +9,7 @@ import { Field } from './Field.js';
 import { Control } from './Control.js';
 import { useAutoLabelledBy } from './useAutoLabelId.js';
 import { Checkbox } from './Checkbox.js';
+import { GroupFieldset } from './groupFieldset.js';
 
 /**
  * The `Checkboxes` component wraps multiple `Checkbox` components in a Bulma-styled group.
@@ -35,7 +36,7 @@ import { Checkbox } from './Checkbox.js';
  *   <Checkbox value="angular">Angular</Checkbox>
  * </Checkboxes>
  */
-const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
+const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, as, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Checkboxes', {
@@ -46,10 +47,14 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
         horizontal,
         fieldClassName,
     });
+    // As a fieldset with a Field of its own, the group's label is its legend,
+    // which names it with no id, so nothing points `aria-labelledby` at it.
+    const asFieldset = as === 'fieldset';
+    const fieldsetField = asFieldset && ownField;
     const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
         label,
         labelProps,
-        rendersLabel: ownField,
+        rendersLabel: ownField && !fieldsetField,
         callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -74,11 +79,17 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
         name,
         ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),
     }), [name, groupActive, currentValue, handleChange]);
-    const checkboxesElement = (jsx("div", { className: wrapperClass, role: "group", "aria-labelledby": ariaLabelledBy, ...rest, children: jsx(CheckboxesProvider, { value: ctx, children: children }) }));
+    const choices = (jsx(CheckboxesProvider, { value: ctx, children: children }));
+    // A fieldset is a group already, so it takes no role of its own.
+    const Group = asFieldset ? 'fieldset' : 'div';
+    const checkboxesElement = fieldsetField ? (jsx("div", { className: wrapperClass, children: choices })) : (jsx(Group, { className: wrapperClass, role: asFieldset ? undefined : 'group', "aria-labelledby": ariaLabelledBy, ...rest, children: choices }));
     let content = checkboxesElement;
     if (rendersOwnControl('Checkboxes', { insideControl })) {
         content = jsx(Control, { children: content });
     }
+    if (fieldsetField) {
+        return (jsx(GroupFieldset, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, fieldClassName: fieldClassName, attributes: rest, message: messageEl, children: content }));
+    }
     if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Checkboxes.js","sources":["../../../src/form/Checkboxes.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n  CheckboxesProvider,\n  CheckboxesGroupContextValue,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelledBy } from './useAutoLabelId';\nimport { Checkbox } from './Checkbox';\n\n/**\n * Props for the Checkboxes component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n */\nexport interface CheckboxesProps\n  extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {\n  /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role=\"group\"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Form field name shared by every Checkbox in the group (via context). */\n  name?: string;\n  /** Currently-selected values (controlled mode). */\n  value?: string[];\n  /** Initial selected values (uncontrolled mode). */\n  defaultValue?: string[];\n  /** Fires when the selection changes; receives the new array. */\n  onChange?: (values: string[]) => void;\n  /** Checkbox elements to render in the group. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Checkboxes` component wraps multiple `Checkbox` components in a Bulma-styled group.\n *\n * @function\n * @param {CheckboxesProps} props - Props for the Checkboxes component.\n * @returns {JSX.Element} The rendered checkboxes group.\n * @see {@link https://bulma.io/documentation/form/checkbox/#grouped-checkboxes | Bulma Checkboxes documentation}\n *\n * @example\n * // Controlled\n * const [tags, setTags] = useState(['react']);\n * <Checkboxes name=\"tags\" value={tags} onChange={setTags}>\n *   <Checkbox value=\"react\">React</Checkbox>\n *   <Checkbox value=\"vue\">Vue</Checkbox>\n *   <Checkbox value=\"angular\">Angular</Checkbox>\n * </Checkboxes>\n *\n * @example\n * // Uncontrolled\n * <Checkboxes name=\"tags\" defaultValue={['react', 'vue']}>\n *   <Checkbox value=\"react\">React</Checkbox>\n *   <Checkbox value=\"vue\">Vue</Checkbox>\n *   <Checkbox value=\"angular\">Angular</Checkbox>\n * </Checkboxes>\n */\nconst CheckboxesComponent: React.FC<CheckboxesProps> = ({\n  label,\n  labelSize,\n  labelProps,\n  horizontal,\n  message,\n  messageColor,\n  fieldClassName,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  children,\n  className,\n  ...props\n}) => {\n  const insideField = useInsideField();\n  const insideControl = useInsideControl();\n  const ownField = rendersOwnField('Checkboxes', {\n    insideField,\n    insideControl,\n    label,\n    message,\n    horizontal,\n    fieldClassName,\n  });\n  const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({\n    label,\n    labelProps,\n    rendersLabel: ownField,\n    callerProps: props,\n  });\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('checkboxes');\n  const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);\n\n  const helpClass = usePrefixedClassNames('help', {\n    [`is-${messageColor}`]: !!messageColor,\n  });\n  const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n  const groupActive =\n    value !== undefined || defaultValue !== undefined || onChange !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string[] | undefined>(\n    defaultValue\n  );\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const handleChange = useCallback(\n    (newValues: string[]) => {\n      if (!isControlled) setInternalValue(newValues);\n      onChange?.(newValues);\n    },\n    [isControlled, onChange]\n  );\n\n  const ctx = useMemo<CheckboxesGroupContextValue>(\n    () => ({\n      name,\n      ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),\n    }),\n    [name, groupActive, currentValue, handleChange]\n  );\n\n  const checkboxesElement = (\n    <div\n      className={wrapperClass}\n      role=\"group\"\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      <CheckboxesProvider value={ctx}>{children}</CheckboxesProvider>\n    </div>\n  );\n\n  let content = checkboxesElement;\n\n  if (rendersOwnControl('Checkboxes', { insideControl })) {\n    content = <Control>{content}</Control>;\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        {content}\n        {messageEl}\n      </Field>\n    );\n  }\n\n  return (\n    <>\n      {content}\n      {messageEl}\n    </>\n  );\n};\n\nexport const Checkboxes = withSubComponents(\n  CheckboxesComponent,\n  { Checkbox },\n  'Checkboxes'\n);\n\nexport default Checkboxes;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Checkboxes.js","sources":["../../../src/form/Checkboxes.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n  CheckboxesProvider,\n  CheckboxesGroupContextValue,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelledBy } from './useAutoLabelId';\nimport { Checkbox } from './Checkbox';\nimport { GroupFieldset } from './groupFieldset';\n\n/**\n * Props for the Checkboxes component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n */\nexport interface CheckboxesProps\n  extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {\n  /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role=\"group\"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Form field name shared by every Checkbox in the group (via context). */\n  name?: string;\n  /** Currently-selected values (controlled mode). */\n  value?: string[];\n  /** Initial selected values (uncontrolled mode). */\n  defaultValue?: string[];\n  /** Fires when the selection changes; receives the new array. */\n  onChange?: (values: string[]) => void;\n  /** Checkbox elements to render in the group. */\n  children?: React.ReactNode;\n  /**\n   * The element the group renders as. With `fieldset` it's a native\n   * `<fieldset>`. Where the group renders a `Field` of its own, that `Field`\n   * is the `<fieldset>` and the `label` is its `<legend>`, in the label\n   * column when `horizontal`, so the legend names the group with no ids to\n   * wire. Your other attributes then go on the `<fieldset>`, while\n   * `className` and the helper props stay on the box that lays out the\n   * checkboxes. Inside an outer `Field` there's no legend: the group element\n   * itself is the `<fieldset>`, named by that `Field`'s label as before.\n   * `div`, the default, renders the group as it always has.\n   * @defaultValue 'div'\n   */\n  as?: 'div' | 'fieldset';\n}\n\n/**\n * The `Checkboxes` component wraps multiple `Checkbox` components in a Bulma-styled group.\n *\n * @function\n * @param {CheckboxesProps} props - Props for the Checkboxes component.\n * @returns {JSX.Element} The rendered checkboxes group.\n * @see {@link https://bulma.io/documentation/form/checkbox/#grouped-checkboxes | Bulma Checkboxes documentation}\n *\n * @example\n * // Controlled\n * const [tags, setTags] = useState(['react']);\n * <Checkboxes name=\"tags\" value={tags} onChange={setTags}>\n *   <Checkbox value=\"react\">React</Checkbox>\n *   <Checkbox value=\"vue\">Vue</Checkbox>\n *   <Checkbox value=\"angular\">Angular</Checkbox>\n * </Checkboxes>\n *\n * @example\n * // Uncontrolled\n * <Checkboxes name=\"tags\" defaultValue={['react', 'vue']}>\n *   <Checkbox value=\"react\">React</Checkbox>\n *   <Checkbox value=\"vue\">Vue</Checkbox>\n *   <Checkbox value=\"angular\">Angular</Checkbox>\n * </Checkboxes>\n */\nconst CheckboxesComponent: React.FC<CheckboxesProps> = ({\n  label,\n  labelSize,\n  labelProps,\n  horizontal,\n  message,\n  messageColor,\n  fieldClassName,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  children,\n  className,\n  as,\n  ...props\n}) => {\n  const insideField = useInsideField();\n  const insideControl = useInsideControl();\n  const ownField = rendersOwnField('Checkboxes', {\n    insideField,\n    insideControl,\n    label,\n    message,\n    horizontal,\n    fieldClassName,\n  });\n  // As a fieldset with a Field of its own, the group's label is its legend,\n  // which names it with no id, so nothing points `aria-labelledby` at it.\n  const asFieldset = as === 'fieldset';\n  const fieldsetField = asFieldset && ownField;\n  const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({\n    label,\n    labelProps,\n    rendersLabel: ownField && !fieldsetField,\n    callerProps: props,\n  });\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('checkboxes');\n  const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);\n\n  const helpClass = usePrefixedClassNames('help', {\n    [`is-${messageColor}`]: !!messageColor,\n  });\n  const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n  const groupActive =\n    value !== undefined || defaultValue !== undefined || onChange !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string[] | undefined>(\n    defaultValue\n  );\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const handleChange = useCallback(\n    (newValues: string[]) => {\n      if (!isControlled) setInternalValue(newValues);\n      onChange?.(newValues);\n    },\n    [isControlled, onChange]\n  );\n\n  const ctx = useMemo<CheckboxesGroupContextValue>(\n    () => ({\n      name,\n      ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),\n    }),\n    [name, groupActive, currentValue, handleChange]\n  );\n\n  const choices = (\n    <CheckboxesProvider value={ctx}>{children}</CheckboxesProvider>\n  );\n  // A fieldset is a group already, so it takes no role of its own.\n  const Group = asFieldset ? 'fieldset' : 'div';\n  const checkboxesElement = fieldsetField ? (\n    <div className={wrapperClass}>{choices}</div>\n  ) : (\n    <Group\n      className={wrapperClass}\n      role={asFieldset ? undefined : 'group'}\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      {choices}\n    </Group>\n  );\n\n  let content = checkboxesElement;\n\n  if (rendersOwnControl('Checkboxes', { insideControl })) {\n    content = <Control>{content}</Control>;\n  }\n\n  if (fieldsetField) {\n    return (\n      <GroupFieldset\n        label={label}\n        labelSize={labelSize}\n        labelProps={labelProps}\n        horizontal={horizontal}\n        fieldClassName={fieldClassName}\n        attributes={rest}\n        message={messageEl}\n      >\n        {content}\n      </GroupFieldset>\n    );\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        {content}\n        {messageEl}\n      </Field>\n    );\n  }\n\n  return (\n    <>\n      {content}\n      {messageEl}\n    </>\n  );\n};\n\nexport const Checkboxes = withSubComponents(\n  CheckboxesComponent,\n  { Checkbox },\n  'Checkboxes'\n);\n\nexport default Checkboxes;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/form/Combobox.js

@@ -17,7 +17,7 @@ import { Tag } from '../elements/Tag.js';
 import { Tags } from '../elements/Tags.js';
 import { Field } from './Field.js';
 import { Input } from './Input.js';
-import { useInsideField, useInsideControl, rendersOwnField } from './FormContext.js';
+import { useInsideField, useInsideControl, rendersOwnField, useFieldsetDisabled } from './FormContext.js';
 import { useAutoLabelId } from './useAutoLabelId.js';
 import { useControlLoading } from './controlLoading.js';
 
@@ -422,7 +422,8 @@ const asList = (value) => value == null ? [] : Array.isArray(value) ? value : [v
 const ComboboxFromData = forwardRef((props, ref) => {
     const { data, value, defaultValue, 
     // Called below through `props`, which knows which value it takes.
-    onChange: _onChange, multiple = false, placeholder, name, empty, itemTemplate, onSelect, onOpenChange, inline = false, disabled = false, required = false, form, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ariaCloseLabel, children, ...rest } = props;
+    onChange: _onChange, multiple = false, placeholder, name, empty, itemTemplate, onSelect, onOpenChange, inline = false, disabled: disabledProp, required = false, form, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ariaCloseLabel, children, ...rest } = props;
+    const disabled = useFieldsetDisabled(disabledProp);
     // A name given in place of a label is the field's and the list's, not
     // the wrapper's. Only the ones given are passed, since an
     // `aria-labelledby` that's there at all, even undefined, keeps the