@jobber/components 9.14.4 → 9.15.0

package/dist/unstyledPrimitives/index.cjs

@@ -15,6 +15,7 @@ var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
 var ReactDOM = require('react-dom');
 var SelectGroupLabel = require('../SelectGroupLabel-cjs.js');
 var Separator = require('../Separator-cjs.js');
+var useFieldValidation = require('../useFieldValidation-cjs.js');
 var NumberFieldInput = require('../NumberFieldInput-cjs.js');
 var useLabel = require('../useLabel-cjs.js');
 require('../stringifyLocale-cjs.js');
@@ -174,7 +175,7 @@ const AutocompleteItem = ComboboxSeparator.ComboboxItem;
  */
 const AutocompleteSeparator = ComboboxSeparator.ListboxSeparator;
 
-var index_parts$7 = /*#__PURE__*/Object.freeze({
+var index_parts$8 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxSeparator.ComboboxArrow,
   Backdrop: ComboboxSeparator.ComboboxBackdrop,
@@ -201,7 +202,7 @@ var index_parts$7 = /*#__PURE__*/Object.freeze({
   useFilteredItems: ComboboxSeparator.useFilteredItems
 });
 
-var index_parts$6 = /*#__PURE__*/Object.freeze({
+var index_parts$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: DrawerDescription.DialogBackdrop,
   Close: DrawerTitle.DialogClose,
@@ -1503,7 +1504,7 @@ function createDrawerHandle() {
   return new DrawerHandle();
 }
 
-var index_parts$5 = /*#__PURE__*/Object.freeze({
+var index_parts$6 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: ScrollAreaViewport.DrawerBackdrop,
   Close: DrawerTitle.DrawerClose,
@@ -2308,7 +2309,7 @@ function createMenuHandle() {
   return new MenuHandle();
 }
 
-var index_parts$4 = /*#__PURE__*/Object.freeze({
+var index_parts$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: MenuArrow,
   Backdrop: MenuSubmenuTrigger.MenuBackdrop,
@@ -2681,7 +2682,7 @@ const ScrollAreaCorner = /*#__PURE__*/React__namespace.forwardRef(function Scrol
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaCorner.displayName = "ScrollAreaCorner";
 
-var index_parts$3 = /*#__PURE__*/Object.freeze({
+var index_parts$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Content: ScrollAreaContent,
   Corner: ScrollAreaCorner,
@@ -2691,6 +2692,689 @@ var index_parts$3 = /*#__PURE__*/Object.freeze({
   Viewport: ScrollAreaViewport.ScrollAreaViewport
 });
 
+/**
+ * Returns the default button a browser uses for implicit form submission.
+ *
+ * This is useful for custom form controls that need to mirror native Enter key behavior.
+ * Clicking the returned submitter preserves browser semantics such as the submitter's click
+ * event, `SubmitEvent.submitter`, and submitter-specific attributes.
+ *
+ * The function follows the controls exposed by `form.elements`, which includes controls associated
+ * through the `form` attribute. Disabled submitters can be returned because the default button is
+ * determined before disabled state is considered; clicking a disabled submitter is a no-op.
+ */
+function getDefaultFormSubmitter(form) {
+  if (!form) {
+    return null;
+  }
+  for (const candidate of form.elements) {
+    const tagName = candidate.tagName;
+    if (tagName === 'BUTTON' || tagName === 'INPUT') {
+      const button = candidate;
+
+      // Intentionally excludes input[type="image"]: Chromium omits it from form.elements,
+      // so supporting it would require separate traversal for an exotic submitter type.
+      if (button.type === 'submit') {
+        return button;
+      }
+    }
+  }
+  return null;
+}
+
+function getCheckboxStateAttributesMapping(state) {
+  return {
+    checked(value) {
+      if (state.indeterminate) {
+        // `data-indeterminate` is already handled by the `indeterminate` prop.
+        return {};
+      }
+      if (value) {
+        return {
+          'data-checked': ''
+        };
+      }
+      return {
+        'data-unchecked': ''
+      };
+    },
+    ...useCompositeListItem.fieldValidityMapping
+  };
+}
+
+function useAriaLabelledBy(explicitAriaLabelledBy, labelId, labelSourceRef, enableFallback = true, labelSourceId) {
+  const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = React__namespace.useState();
+  const generatedLabelId = useScrollLock.useBaseUiId(labelSourceId ? `${labelSourceId}-label` : undefined);
+  const ariaLabelledBy = explicitAriaLabelledBy ?? labelId ?? fallbackAriaLabelledBy;
+
+  // Fallback for <span> controls labelled by wrapping/sibling native <label>.
+  // Run after every commit so DOM association changes (e.g. label mount/unmount)
+  // are reflected even when props/state deps are unchanged.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useScrollLock.useIsoLayoutEffect(() => {
+    const nextAriaLabelledBy = explicitAriaLabelledBy || labelId || !enableFallback ? undefined : getAriaLabelledBy(labelSourceRef.current, generatedLabelId);
+    if (fallbackAriaLabelledBy !== nextAriaLabelledBy) {
+      setFallbackAriaLabelledBy(nextAriaLabelledBy);
+    }
+  });
+  return ariaLabelledBy;
+}
+function getAriaLabelledBy(labelSource, generatedLabelId) {
+  const label = findAssociatedLabel(labelSource);
+  if (!label) {
+    return undefined;
+  }
+  if (!label.id && generatedLabelId) {
+    label.id = generatedLabelId;
+  }
+  return label.id || undefined;
+}
+function findAssociatedLabel(labelSource) {
+  if (!labelSource) {
+    return undefined;
+  }
+
+  // Fast path before the expensive `.labels` read.
+  const parent = labelSource.parentElement;
+  if (parent && parent.tagName === 'LABEL') {
+    return parent;
+  }
+  const controlId = labelSource.id;
+  if (controlId) {
+    const nextSibling = labelSource.nextElementSibling;
+    if (nextSibling && nextSibling.htmlFor === controlId) {
+      return nextSibling;
+    }
+  }
+  const labels = labelSource.labels;
+  return labels && labels[0];
+}
+
+const CheckboxGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CheckboxGroupContext.displayName = "CheckboxGroupContext";
+function useCheckboxGroupContext() {
+  return React__namespace.useContext(CheckboxGroupContext);
+}
+
+const CheckboxRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CheckboxRootContext.displayName = "CheckboxRootContext";
+function useCheckboxRootContext() {
+  const context = React__namespace.useContext(CheckboxRootContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>.' : useRenderElement.formatErrorMessage(14));
+  }
+  return context;
+}
+
+const PARENT_CHECKBOX = 'data-parent';
+
+/**
+ * Represents the checkbox itself.
+ * Renders a `<span>` element and a hidden `<input>` beside.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+const CheckboxRoot = /*#__PURE__*/React__namespace.forwardRef(function CheckboxRoot(componentProps, forwardedRef) {
+  const {
+    checked: checkedProp,
+    className,
+    defaultChecked = false,
+    'aria-labelledby': ariaLabelledByProp,
+    disabled: disabledProp = false,
+    form,
+    id: idProp,
+    indeterminate = false,
+    inputRef: inputRefProp,
+    name: nameProp,
+    onCheckedChange,
+    parent = false,
+    readOnly = false,
+    render,
+    required = false,
+    uncheckedValue,
+    value: valueProp,
+    nativeButton = false,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    clearErrors
+  } = useCompositeListItem.useFormContext();
+  const {
+    disabled: rootDisabled,
+    name: fieldName,
+    setDirty,
+    setFilled,
+    setFocused,
+    setTouched,
+    state: fieldState,
+    validationMode,
+    validityData,
+    validation: localValidation
+  } = useCompositeListItem.useFieldRootContext();
+  const fieldItemContext = useFieldValidation.useFieldItemContext();
+  const {
+    labelId,
+    controlId,
+    registerControlId,
+    getDescriptionProps
+  } = useCompositeListItem.useLabelableContext();
+  const groupContext = useCheckboxGroupContext();
+  const parentContext = groupContext?.allValues === undefined ? undefined : groupContext.parent;
+  const isGroupedWithParent = parentContext !== undefined;
+  const disabled = rootDisabled || fieldItemContext.disabled || groupContext?.disabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const value = valueProp ?? name;
+  const id = useScrollLock.useBaseUiId();
+  const generatedInputId = useScrollLock.useBaseUiId();
+  let inputId = idProp || controlId;
+  if (isGroupedWithParent) {
+    if (parent) {
+      inputId = generatedInputId;
+    } else if (value !== undefined) {
+      inputId = `${parentContext.id}-${value}`;
+    } else {
+      inputId ||= generatedInputId;
+    }
+  }
+  let groupProps = {};
+  if (isGroupedWithParent) {
+    if (parent) {
+      groupProps = parentContext.getParentProps();
+    } else if (value !== undefined) {
+      groupProps = parentContext.getChildProps(value);
+    }
+  }
+  const {
+    checked: groupChecked = checkedProp,
+    indeterminate: groupIndeterminate = indeterminate,
+    onCheckedChange: groupOnChange,
+    ...otherGroupProps
+  } = groupProps;
+  const groupValue = groupContext?.value;
+  const controlRef = React__namespace.useRef(null);
+  const controlSourceRef = useRenderElement.useRefWithInit(() => Symbol());
+  const hasRegisteredRef = React__namespace.useRef(false);
+  const {
+    getButtonProps,
+    buttonRef
+  } = useScrollLock.useButton({
+    disabled,
+    native: nativeButton
+  });
+  const validation = groupContext?.validation ?? localValidation;
+  const [checked, setCheckedState] = useScrollLock.useControlled({
+    controlled: value !== undefined && groupValue !== undefined && !parent ? groupValue.includes(value) : groupChecked,
+    default: defaultChecked,
+    name: 'Checkbox',
+    state: 'checked'
+  });
+  const computedChecked = isGroupedWithParent ? Boolean(groupChecked) : checked;
+  const computedIndeterminate = isGroupedWithParent ? groupIndeterminate || indeterminate : indeterminate;
+
+  // can't use useLabelableId because of optional groupContext and/or parent
+  useScrollLock.useIsoLayoutEffect(() => {
+    if (registerControlId === useRenderElement.NOOP) {
+      return undefined;
+    }
+    hasRegisteredRef.current = true;
+    registerControlId(controlSourceRef.current, inputId);
+    return undefined;
+  }, [inputId, registerControlId, controlSourceRef]);
+  React__namespace.useEffect(() => {
+    const controlSource = controlSourceRef.current;
+    return () => {
+      if (!hasRegisteredRef.current || registerControlId === useRenderElement.NOOP) {
+        return;
+      }
+      hasRegisteredRef.current = false;
+      registerControlId(controlSource, undefined);
+    };
+  }, [registerControlId, controlSourceRef]);
+  useCompositeListItem.useRegisterFieldControl(controlRef, id, checked, undefined, !groupContext && !disabled, nameProp);
+  const inputRef = React__namespace.useRef(null);
+  const registerFieldInput = validation.registerInput;
+  const registeredInputValue = groupContext ? value : undefined;
+  const registerInput = React__namespace.useCallback(element => registerFieldInput(element, {
+    controlRef,
+    value: registeredInputValue
+  }), [registerFieldInput, registeredInputValue]);
+  const mergedInputRef = useRenderElement.useMergedRefs(inputRefProp, inputRef, parent ? undefined : registerInput);
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, inputId ?? undefined);
+  useScrollLock.useIsoLayoutEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = computedIndeterminate;
+      if (checked) {
+        setFilled(true);
+      }
+    }
+  }, [checked, computedIndeterminate, setFilled]);
+  useScrollLock.useValueChanged(checked, () => {
+    if (groupContext) {
+      return;
+    }
+    clearErrors(name);
+    setFilled(checked);
+    setDirty(checked !== validityData.initialValue);
+    validation.change(checked);
+  });
+  const inputProps = useRenderElement.mergeProps({
+    checked,
+    disabled,
+    form,
+    // parent checkboxes unset `name` to be excluded from form submission
+    name: parent ? undefined : name,
+    // Set `id` to stop Chrome warning about an unassociated input.
+    // When using a native button, the `id` is applied to the button instead.
+    id: nativeButton ? undefined : inputId ?? undefined,
+    required,
+    ref: mergedInputRef,
+    style: name ? useScrollLock.visuallyHiddenInput : useScrollLock.visuallyHidden,
+    tabIndex: -1,
+    type: 'checkbox',
+    'aria-hidden': true,
+    onChange(event) {
+      // Workaround for https://github.com/react/react/issues/9023
+      if (event.nativeEvent.defaultPrevented) {
+        return;
+      }
+      if (readOnly) {
+        event.preventDefault();
+        return;
+      }
+      const nextChecked = event.currentTarget.checked;
+      const details = useScrollLock.createChangeEventDetails(useScrollLock.none, event.nativeEvent);
+      onCheckedChange?.(nextChecked, details);
+      if (details.isCanceled) {
+        return;
+      }
+      groupOnChange?.(nextChecked, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setCheckedState(nextChecked);
+      if (value !== undefined && groupContext !== undefined && !parent && !isGroupedWithParent) {
+        const nextGroupValue = nextChecked ? [...groupContext.value, value] : groupContext.value.filter(item => item !== value);
+        groupContext.setValue(nextGroupValue, details);
+      }
+    },
+    onClick(event) {
+      // The click dispatched from the root's `onClick` is an implementation detail
+      // and must not reach ancestors, which already receive the original click.
+      event.stopPropagation();
+    },
+    onFocus() {
+      controlRef.current?.focus();
+    }
+  },
+  // React <19 sets an empty value if `undefined` is passed explicitly
+  // To avoid this, we only set the value if it's defined
+  valueProp !== undefined ? {
+    value: (groupContext ? checked && valueProp : valueProp) || ''
+  } : useRenderElement.EMPTY_OBJECT, getDescriptionProps, props => validation.getValidationProps(disabled, props));
+  React__namespace.useEffect(() => {
+    if (!parentContext || value === undefined) {
+      return undefined;
+    }
+    const disabledStates = parentContext.disabledStatesRef.current;
+    disabledStates.set(value, disabled);
+    return () => {
+      disabledStates.delete(value);
+    };
+  }, [parentContext, disabled, value]);
+  const state = React__namespace.useMemo(() => ({
+    ...fieldState,
+    checked: computedChecked,
+    disabled,
+    readOnly,
+    required,
+    indeterminate: computedIndeterminate
+  }), [fieldState, computedChecked, disabled, readOnly, required, computedIndeterminate]);
+  const stateAttributesMapping = getCheckboxStateAttributesMapping(state);
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    state,
+    ref: [buttonRef, controlRef, forwardedRef],
+    props: [{
+      id: nativeButton ? inputId ?? undefined : id,
+      role: 'checkbox',
+      'aria-checked': computedIndeterminate ? 'mixed' : computedChecked,
+      'aria-readonly': readOnly || undefined,
+      'aria-required': required || undefined,
+      'aria-labelledby': ariaLabelledBy,
+      [PARENT_CHECKBOX]: parent ? '' : undefined,
+      onFocus() {
+        if (!disabled) {
+          setFocused(true);
+        }
+      },
+      onBlur() {
+        const inputEl = inputRef.current;
+        if (!inputEl) {
+          return;
+        }
+        setTouched(true);
+        setFocused(false);
+        if (validationMode === 'onBlur') {
+          validation.commit(groupContext ? groupValue : inputEl.checked);
+        }
+      },
+      onKeyDown(event) {
+        if (event.key !== 'Enter') {
+          return;
+        }
+
+        // Let consumer `preventDefault()` handlers opt out while defensively stopping
+        // any remaining Base UI Enter handling from treating the checkbox as a button.
+        event.preventBaseUIHandler();
+        if (event.defaultPrevented) {
+          return;
+        }
+        const formToSubmit = inputRef.current?.form ?? null;
+        const currentTarget = event.currentTarget;
+        const nativeEvent = event.nativeEvent;
+        const originalPreventDefault = event.preventDefault;
+        const originalNativePreventDefault = nativeEvent.preventDefault;
+        let preventDefaultCalledAfterPropagation = false;
+        event.preventDefault = () => {
+          preventDefaultCalledAfterPropagation = true;
+          originalPreventDefault.call(event);
+        };
+        nativeEvent.preventDefault = () => {
+          preventDefaultCalledAfterPropagation = true;
+          originalNativePreventDefault.call(nativeEvent);
+        };
+
+        // Enter should not activate/toggle the checkbox. Cancel the native button behavior
+        // without setting React's synthetic `defaultPrevented`, so ancestor React handlers
+        // can still opt out by calling `preventDefault()` during propagation.
+        originalNativePreventDefault.call(nativeEvent);
+        useScrollLock.getWindow(currentTarget).queueMicrotask(() => {
+          event.preventDefault = originalPreventDefault;
+          nativeEvent.preventDefault = originalNativePreventDefault;
+          if (!preventDefaultCalledAfterPropagation) {
+            getDefaultFormSubmitter(formToSubmit)?.click();
+          }
+        });
+      },
+      onClick(event) {
+        if (readOnly || disabled) {
+          return;
+        }
+        event.preventDefault();
+        const input = inputRef.current;
+        if (!input) {
+          return;
+        }
+        useScrollLock.dispatchClickWithModifiers(input, event);
+      }
+    }, elementProps, otherGroupProps, getButtonProps, getDescriptionProps, props => validation.getValidationProps(disabled, props)],
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(CheckboxRootContext.Provider, {
+    value: state,
+    children: [element, !checked && !groupContext && name && !parent && uncheckedValue !== undefined && /*#__PURE__*/jsxRuntime.jsx("input", {
+      type: "hidden",
+      form: form,
+      name: name,
+      value: uncheckedValue,
+      disabled: disabled
+    }), /*#__PURE__*/jsxRuntime.jsx("input", {
+      ...inputProps,
+      suppressHydrationWarning: true
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") CheckboxRoot.displayName = "CheckboxRoot";
+
+/**
+ * Indicates whether the checkbox is ticked.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+const CheckboxIndicator = /*#__PURE__*/React__namespace.forwardRef(function CheckboxIndicator(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const rootState = useCheckboxRootContext();
+  const rendered = rootState.checked || rootState.indeterminate;
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = useScrollLock.useTransitionStatus(rendered);
+  const indicatorRef = React__namespace.useRef(null);
+  const state = {
+    ...rootState,
+    transitionStatus
+  };
+  useScrollLock.useOpenChangeComplete({
+    open: rendered,
+    ref: indicatorRef,
+    onComplete() {
+      if (!rendered) {
+        setMounted(false);
+      }
+    }
+  });
+  const baseStateAttributesMapping = getCheckboxStateAttributesMapping(rootState);
+  const stateAttributesMapping = {
+    ...baseStateAttributesMapping,
+    ...useScrollLock.transitionStatusMapping
+  };
+  const shouldRender = keepMounted || mounted;
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    ref: [forwardedRef, indicatorRef],
+    state,
+    stateAttributesMapping,
+    props: elementProps
+  });
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") CheckboxIndicator.displayName = "CheckboxIndicator";
+
+var index_parts$3 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Indicator: CheckboxIndicator,
+  Root: CheckboxRoot
+});
+
+function useCheckboxGroupParent(params) {
+  const {
+    allValues = useRenderElement.EMPTY_ARRAY,
+    value,
+    onValueChange: onValueChangeProp
+  } = params;
+  const uncontrolledStateRef = React__namespace.useRef(value);
+  const disabledStatesRef = React__namespace.useRef(new Map());
+  const [status, setStatus] = React__namespace.useState('mixed');
+  const id = useScrollLock.useBaseUiId();
+  const checked = value.length === allValues.length;
+  const indeterminate = value.length !== allValues.length && value.length > 0;
+  const onValueChange = useScrollLock.useStableCallback(onValueChangeProp);
+  const getParentProps = React__namespace.useCallback(() => ({
+    id,
+    indeterminate,
+    checked,
+    // TODO: custom `id` on child checkboxes breaks this
+    // https://github.com/mui/base-ui/issues/2691
+    'aria-controls': allValues.map(v => `${id}-${v}`).join(' '),
+    onCheckedChange(_, eventDetails) {
+      const uncontrolledState = uncontrolledStateRef.current;
+
+      // None except the disabled ones that are checked, which can't be changed.
+      const none = allValues.filter(v => disabledStatesRef.current.get(v) && uncontrolledState.includes(v));
+      // "All" that are valid:
+      // - any that aren't disabled
+      // - disabled ones that are checked
+      const all = allValues.filter(v => !disabledStatesRef.current.get(v) || uncontrolledState.includes(v));
+      const allOnOrOff = uncontrolledState.length === all.length || uncontrolledState.length === 0;
+      if (allOnOrOff) {
+        if (value.length === all.length) {
+          onValueChange(none, eventDetails);
+        } else {
+          onValueChange(all, eventDetails);
+        }
+        return;
+      }
+      let nextStatus = 'mixed';
+      let nextValue = uncontrolledState;
+      if (status === 'mixed') {
+        nextStatus = 'on';
+        nextValue = all;
+      } else if (status === 'on') {
+        nextStatus = 'off';
+        nextValue = none;
+      }
+      onValueChange(nextValue, eventDetails);
+      if (!eventDetails.isCanceled) {
+        setStatus(nextStatus);
+      }
+    }
+  }), [allValues, checked, id, indeterminate, onValueChange, status, value.length]);
+  const getChildProps = React__namespace.useCallback(childValue => ({
+    checked: value.includes(childValue),
+    onCheckedChange(nextChecked, eventDetails) {
+      const newValue = value.slice();
+      if (nextChecked) {
+        newValue.push(childValue);
+      } else {
+        newValue.splice(newValue.indexOf(childValue), 1);
+      }
+      onValueChange(newValue, eventDetails);
+      if (!eventDetails.isCanceled) {
+        uncontrolledStateRef.current = newValue;
+        setStatus('mixed');
+      }
+    }
+  }), [onValueChange, value]);
+  return React__namespace.useMemo(() => ({
+    id,
+    getParentProps,
+    getChildProps,
+    disabledStatesRef
+  }), [id, getParentProps, getChildProps]);
+}
+
+const CheckboxGroup = /*#__PURE__*/React__namespace.forwardRef(function CheckboxGroup(componentProps, forwardedRef) {
+  const {
+    allValues,
+    className,
+    defaultValue: defaultValueProp,
+    disabled: disabledProp = false,
+    id: idProp,
+    onValueChange,
+    render,
+    value: externalValue,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    disabled: fieldDisabled,
+    name: fieldName,
+    state: fieldState,
+    validation,
+    setFilled,
+    setDirty,
+    validityData
+  } = useCompositeListItem.useFieldRootContext();
+  const {
+    labelId,
+    getDescriptionProps
+  } = useCompositeListItem.useLabelableContext();
+  const {
+    clearErrors,
+    elementRef
+  } = useCompositeListItem.useFormContext();
+  const disabled = fieldDisabled || disabledProp;
+  const defaultValue = defaultValueProp ?? useRenderElement.EMPTY_ARRAY;
+
+  // A controlled value can still be `undefined` at runtime even though `useControlled`'s
+  // generic return type says otherwise. Keep the fallback to prevent group consumers from crashing.
+  const [value = useRenderElement.EMPTY_ARRAY, setValueUnwrapped] = useScrollLock.useControlled({
+    controlled: externalValue,
+    default: defaultValue,
+    name: 'CheckboxGroup',
+    state: 'value'
+  });
+  const setValue = useScrollLock.useStableCallback((v, eventDetails) => {
+    onValueChange?.(v, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setValueUnwrapped(v);
+  });
+  const parent = useCheckboxGroupParent({
+    allValues,
+    value,
+    onValueChange: setValue
+  });
+  const id = useScrollLock.useBaseUiId(idProp);
+  const getInputControl = validation.getInputControl;
+  const controlRef = React__namespace.useMemo(() => ({
+    get current() {
+      return getInputControl();
+    }
+  }), [getInputControl]);
+  const getFormValue = useScrollLock.useStableCallback(() => {
+    const formElement = elementRef.current;
+    if (!formElement) {
+      return value;
+    }
+    const successfulValues = new Set();
+    for (const [input, registration] of validation.registeredInputs) {
+      if (registration.value !== undefined && input.checked && useFieldValidation.isEligibleInput(input, formElement)) {
+        successfulValues.add(registration.value);
+      }
+    }
+    return value.filter(inputValue => successfulValues.has(inputValue));
+  });
+  useCompositeListItem.useRegisterFieldControl(controlRef, id, value, getFormValue, !!fieldName && !disabled, fieldName);
+  useScrollLock.useValueChanged(value, () => {
+    if (fieldName) {
+      clearErrors(fieldName);
+    }
+    const initialValue = Array.isArray(validityData.initialValue) ? validityData.initialValue : useRenderElement.EMPTY_ARRAY;
+    setFilled(value.length > 0);
+    setDirty(!useCompositeListItem.areArraysEqual(value, initialValue));
+    validation.change(value);
+  });
+  const state = {
+    ...fieldState,
+    disabled
+  };
+  const contextValue = React__namespace.useMemo(() => ({
+    allValues,
+    value,
+    setValue,
+    parent,
+    disabled,
+    validation
+  }), [allValues, value, setValue, parent, disabled, validation]);
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      id: idProp,
+      role: 'group',
+      'aria-labelledby': labelId
+    }, elementProps, getDescriptionProps],
+    stateAttributesMapping: useCompositeListItem.fieldValidityMapping
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(CheckboxGroupContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") CheckboxGroup.displayName = "CheckboxGroup";
+
 var index_parts$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxSeparator.ComboboxArrow,
@@ -3471,12 +4155,14 @@ function useRender(params) {
 }
 
 exports.Separator = Separator.Separator;
-exports.Autocomplete = index_parts$7;
+exports.Autocomplete = index_parts$8;
+exports.Checkbox = index_parts$3;
+exports.CheckboxGroup = CheckboxGroup;
 exports.Combobox = index_parts$2;
-exports.Dialog = index_parts$6;
-exports.Drawer = index_parts$5;
-exports.Menu = index_parts$4;
+exports.Dialog = index_parts$7;
+exports.Drawer = index_parts$6;
+exports.Menu = index_parts$5;
 exports.NumberField = index_parts$1;
-exports.ScrollArea = index_parts$3;
+exports.ScrollArea = index_parts$4;
 exports.Select = index_parts;
 exports.useRender = useRender;