@jobber/components 9.14.4 → 9.15.0

package/dist/unstyledPrimitives/index.mjs

@@ -1,18 +1,19 @@
 import * as React from 'react';
 import { B as useCoreFilter, D as AriaCombobox, E as useComboboxInputValueContext, e as ComboboxTrigger, d as ComboboxInputGroup, p as ComboboxItem, L as ListboxSeparator, l as ComboboxArrow, i as ComboboxBackdrop, x as ComboboxClear, v as ComboboxCollection, w as ComboboxEmpty, n as ComboboxGroup, o as ComboboxGroupLabel, m as ComboboxIcon, c as ComboboxInput, f as ComboboxList, k as ComboboxPopup, h as ComboboxPortal, j as ComboboxPositioner, u as ComboboxRow, g as ComboboxStatus, A as useFilteredItems, s as ComboboxChip, t as ComboboxChipRemove, r as ComboboxChips, q as ComboboxItemIndicator, a as ComboboxLabel, C as ComboboxRoot, y as ComboboxSeparator, b as ComboboxValue, z as useComboboxFilter } from '../ComboboxSeparator-es.js';
-import { n as stringifyAsLabel, A as useCompositeListItem, M as DEFAULT_SIDES, b as useFieldRootContext, f as fieldValidityMapping, K as getDefaultLabelId } from '../useCompositeListItem-es.js';
+import { n as stringifyAsLabel, A as useCompositeListItem, M as DEFAULT_SIDES, f as fieldValidityMapping, a as useFormContext, b as useFieldRootContext, u as useLabelableContext, d as useRegisterFieldControl, o as areArraysEqual, K as getDefaultLabelId } from '../useCompositeListItem-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { bX as pointer, c as useIsoLayoutEffect, d as useStableCallback, bf as CommonPopupDataAttributes, u as useBaseUiId, bS as useTriggerRegistration, o as ownerDocument, h as createChangeEventDetails, bj as swipe, ac as isVirtualClick, a8 as useAnimationFrame, q as useTimeout, I as getWindow, y as addEventListener, D as activeElement, g as getComputedStyle, a0 as contains, e as getTarget, i as isHTMLElement, bv as isInteractiveElement, b as getParentNode, a6 as popupStateMapping, v as useControlled, ad as itemPress, s as useTransitionStatus, l as useOpenChangeComplete, aw as round, bz as useAnimationsFinished, af as getSide, a7 as useDirection, a4 as inertValue, bm as mergeCleanups, bY as gecko, b$ as scrub, a9 as webkit, G as createGenericEventDetails, U as useStore, be as triggerOpenStateMapping, t as transitionStatusMapping, p as popupTransitionStateMapping } from '../useScrollLock-es.js';
+import { bX as pointer, c as useIsoLayoutEffect, d as useStableCallback, bf as CommonPopupDataAttributes, u as useBaseUiId, bS as useTriggerRegistration, o as ownerDocument, j as createChangeEventDetails, bj as swipe, ac as isVirtualClick, a8 as useAnimationFrame, f as useTimeout, I as getWindow, y as addEventListener, D as activeElement, g as getComputedStyle, a0 as contains, e as getTarget, i as isHTMLElement, bv as isInteractiveElement, b as getParentNode, a6 as popupStateMapping, v as useControlled, ad as itemPress, m as useTransitionStatus, n as useOpenChangeComplete, aw as round, bz as useAnimationsFinished, af as getSide, a7 as useDirection, a4 as inertValue, h as useButton, L as useValueChanged, B as visuallyHiddenInput, C as visuallyHidden, z as none, by as dispatchClickWithModifiers, t as transitionStatusMapping, bm as mergeCleanups, bY as gecko, b$ as scrub, a9 as webkit, G as createGenericEventDetails, U as useStore, be as triggerOpenStateMapping, q as popupTransitionStateMapping } from '../useScrollLock-es.js';
 import { b as DialogBackdrop, d as DialogDescription, f as DialogHandle, c as DialogPopup, a as DialogRoot, e as createDialogHandle, D as DrawerDescription, B as BasePopupHandle } from '../DrawerDescription-es.js';
 import { c as DialogClose, b as DialogTitle, a as DrawerClose, D as DrawerTitle } from '../DrawerTitle-es.js';
 import { i as DialogPortal, h as DialogTrigger, j as DialogViewport, r as useDrawerProviderContext, s as DrawerBackdropCssVars, t as DrawerPopupCssVars, v as DrawerProviderContext, u as useDialogRootContext, w as useDrawerRootContext, x as useSwipeDismiss, y as getDisplacement, z as DrawerPopupDataAttributes, A as getElementTransform, B as DrawerVirtualKeyboardContext, C as getElementAtPoint, c as DrawerBackdrop, g as DrawerContent, e as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, d as DrawerViewport, E as useScrollAreaRootContext, F as getOffset, G as scrollAreaStateAttributesMapping, H as useScrollAreaViewportContext, S as ScrollAreaRoot, f as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
-import { u as useRenderElement, N as NOOP, f as formatErrorMessage, E as EMPTY_OBJECT } from '../useRenderElement-es.js';
+import { u as useRenderElement, N as NOOP, f as formatErrorMessage, E as EMPTY_OBJECT, a as useRefWithInit, b as useMergedRefs, m as mergeProps, c as EMPTY_ARRAY } from '../useRenderElement-es.js';
 import { c as clamp, g as getMaxScrollOffset, n as normalizeScrollOffset, S as SCROLL_EDGE_TOLERANCE_PX } from '../scrollEdges-es.js';
 import { f as findScrollableTouchTarget } from '../scrollable-es.js';
 import { u as useMenuRootContext, o as useMenuPositionerContext, p as useMenuItem, R as REGULAR_ITEM, q as itemMapping, r as createNullMenuStore, h as MenuBackdrop, l as MenuGroup, n as MenuGroupLabel, b as MenuItem, a as MenuLinkItem, j as MenuPopup, g as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, c as MenuRadioItem, d as MenuRadioItemIndicator, f as MenuRoot, m as MenuSubmenuRoot, e as MenuSubmenuTrigger, M as MenuTrigger } from '../MenuSubmenuTrigger-es.js';
 import * as ReactDOM from 'react-dom';
 import { m as usePreviousValue, n as useSelectRootContext, s as selectors, o as useSelectPositionerContext, j as SelectGroup, k as SelectGroupLabel, g as SelectItem, i as SelectItemIndicator, h as SelectItemText, f as SelectList, e as SelectPopup, a as SelectPortal, d as SelectPositioner, S as SelectRoot, b as SelectTrigger, c as SelectValue } from '../SelectGroupLabel-es.js';
 import { S as Separator } from '../Separator-es.js';
+import { a as useFieldItemContext, i as isEligibleInput } from '../useFieldValidation-es.js';
 import { u as useNumberFieldRootContext, s as stateAttributesMapping$4, c as NumberFieldDecrement, a as NumberFieldGroup, b as NumberFieldIncrement, d as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
 import { u as useLabel } from '../useLabel-es.js';
 import '../stringifyLocale-es.js';
@@ -152,7 +153,7 @@ const AutocompleteItem = ComboboxItem;
  */
 const AutocompleteSeparator = ListboxSeparator;
 
-var index_parts$7 = /*#__PURE__*/Object.freeze({
+var index_parts$8 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxArrow,
   Backdrop: ComboboxBackdrop,
@@ -179,7 +180,7 @@ var index_parts$7 = /*#__PURE__*/Object.freeze({
   useFilteredItems: useFilteredItems
 });
 
-var index_parts$6 = /*#__PURE__*/Object.freeze({
+var index_parts$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: DialogBackdrop,
   Close: DialogClose,
@@ -1481,7 +1482,7 @@ function createDrawerHandle() {
   return new DrawerHandle();
 }
 
-var index_parts$5 = /*#__PURE__*/Object.freeze({
+var index_parts$6 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: DrawerBackdrop,
   Close: DrawerClose,
@@ -2286,7 +2287,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: MenuBackdrop,
@@ -2659,7 +2660,7 @@ const ScrollAreaCorner = /*#__PURE__*/React.forwardRef(function ScrollAreaCorner
 });
 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,
@@ -2669,6 +2670,689 @@ var index_parts$3 = /*#__PURE__*/Object.freeze({
   Viewport: 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': ''
+      };
+    },
+    ...fieldValidityMapping
+  };
+}
+
+function useAriaLabelledBy(explicitAriaLabelledBy, labelId, labelSourceRef, enableFallback = true, labelSourceId) {
+  const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = React.useState();
+  const generatedLabelId = 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
+  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.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CheckboxGroupContext.displayName = "CheckboxGroupContext";
+function useCheckboxGroupContext() {
+  return React.useContext(CheckboxGroupContext);
+}
+
+const CheckboxRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CheckboxRootContext.displayName = "CheckboxRootContext";
+function useCheckboxRootContext() {
+  const context = React.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>.' : 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.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
+  } = useFormContext();
+  const {
+    disabled: rootDisabled,
+    name: fieldName,
+    setDirty,
+    setFilled,
+    setFocused,
+    setTouched,
+    state: fieldState,
+    validationMode,
+    validityData,
+    validation: localValidation
+  } = useFieldRootContext();
+  const fieldItemContext = useFieldItemContext();
+  const {
+    labelId,
+    controlId,
+    registerControlId,
+    getDescriptionProps
+  } = 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 = useBaseUiId();
+  const generatedInputId = 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.useRef(null);
+  const controlSourceRef = useRefWithInit(() => Symbol());
+  const hasRegisteredRef = React.useRef(false);
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
+  });
+  const validation = groupContext?.validation ?? localValidation;
+  const [checked, setCheckedState] = 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
+  useIsoLayoutEffect(() => {
+    if (registerControlId === NOOP) {
+      return undefined;
+    }
+    hasRegisteredRef.current = true;
+    registerControlId(controlSourceRef.current, inputId);
+    return undefined;
+  }, [inputId, registerControlId, controlSourceRef]);
+  React.useEffect(() => {
+    const controlSource = controlSourceRef.current;
+    return () => {
+      if (!hasRegisteredRef.current || registerControlId === NOOP) {
+        return;
+      }
+      hasRegisteredRef.current = false;
+      registerControlId(controlSource, undefined);
+    };
+  }, [registerControlId, controlSourceRef]);
+  useRegisterFieldControl(controlRef, id, checked, undefined, !groupContext && !disabled, nameProp);
+  const inputRef = React.useRef(null);
+  const registerFieldInput = validation.registerInput;
+  const registeredInputValue = groupContext ? value : undefined;
+  const registerInput = React.useCallback(element => registerFieldInput(element, {
+    controlRef,
+    value: registeredInputValue
+  }), [registerFieldInput, registeredInputValue]);
+  const mergedInputRef = useMergedRefs(inputRefProp, inputRef, parent ? undefined : registerInput);
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, inputId ?? undefined);
+  useIsoLayoutEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = computedIndeterminate;
+      if (checked) {
+        setFilled(true);
+      }
+    }
+  }, [checked, computedIndeterminate, setFilled]);
+  useValueChanged(checked, () => {
+    if (groupContext) {
+      return;
+    }
+    clearErrors(name);
+    setFilled(checked);
+    setDirty(checked !== validityData.initialValue);
+    validation.change(checked);
+  });
+  const inputProps = 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 ? visuallyHiddenInput : 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 = createChangeEventDetails(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) || ''
+  } : EMPTY_OBJECT, getDescriptionProps, props => validation.getValidationProps(disabled, props));
+  React.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.useMemo(() => ({
+    ...fieldState,
+    checked: computedChecked,
+    disabled,
+    readOnly,
+    required,
+    indeterminate: computedIndeterminate
+  }), [fieldState, computedChecked, disabled, readOnly, required, computedIndeterminate]);
+  const stateAttributesMapping = getCheckboxStateAttributesMapping(state);
+  const element = 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);
+        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;
+        }
+        dispatchClickWithModifiers(input, event);
+      }
+    }, elementProps, otherGroupProps, getButtonProps, getDescriptionProps, props => validation.getValidationProps(disabled, props)],
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/jsxs(CheckboxRootContext.Provider, {
+    value: state,
+    children: [element, !checked && !groupContext && name && !parent && uncheckedValue !== undefined && /*#__PURE__*/jsx("input", {
+      type: "hidden",
+      form: form,
+      name: name,
+      value: uncheckedValue,
+      disabled: disabled
+    }), /*#__PURE__*/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.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
+  } = useTransitionStatus(rendered);
+  const indicatorRef = React.useRef(null);
+  const state = {
+    ...rootState,
+    transitionStatus
+  };
+  useOpenChangeComplete({
+    open: rendered,
+    ref: indicatorRef,
+    onComplete() {
+      if (!rendered) {
+        setMounted(false);
+      }
+    }
+  });
+  const baseStateAttributesMapping = getCheckboxStateAttributesMapping(rootState);
+  const stateAttributesMapping = {
+    ...baseStateAttributesMapping,
+    ...transitionStatusMapping
+  };
+  const shouldRender = keepMounted || mounted;
+  const element = 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 = EMPTY_ARRAY,
+    value,
+    onValueChange: onValueChangeProp
+  } = params;
+  const uncontrolledStateRef = React.useRef(value);
+  const disabledStatesRef = React.useRef(new Map());
+  const [status, setStatus] = React.useState('mixed');
+  const id = useBaseUiId();
+  const checked = value.length === allValues.length;
+  const indeterminate = value.length !== allValues.length && value.length > 0;
+  const onValueChange = useStableCallback(onValueChangeProp);
+  const getParentProps = React.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.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.useMemo(() => ({
+    id,
+    getParentProps,
+    getChildProps,
+    disabledStatesRef
+  }), [id, getParentProps, getChildProps]);
+}
+
+const CheckboxGroup = /*#__PURE__*/React.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
+  } = useFieldRootContext();
+  const {
+    labelId,
+    getDescriptionProps
+  } = useLabelableContext();
+  const {
+    clearErrors,
+    elementRef
+  } = useFormContext();
+  const disabled = fieldDisabled || disabledProp;
+  const defaultValue = defaultValueProp ?? 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 = EMPTY_ARRAY, setValueUnwrapped] = useControlled({
+    controlled: externalValue,
+    default: defaultValue,
+    name: 'CheckboxGroup',
+    state: 'value'
+  });
+  const setValue = useStableCallback((v, eventDetails) => {
+    onValueChange?.(v, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setValueUnwrapped(v);
+  });
+  const parent = useCheckboxGroupParent({
+    allValues,
+    value,
+    onValueChange: setValue
+  });
+  const id = useBaseUiId(idProp);
+  const getInputControl = validation.getInputControl;
+  const controlRef = React.useMemo(() => ({
+    get current() {
+      return getInputControl();
+    }
+  }), [getInputControl]);
+  const getFormValue = 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 && isEligibleInput(input, formElement)) {
+        successfulValues.add(registration.value);
+      }
+    }
+    return value.filter(inputValue => successfulValues.has(inputValue));
+  });
+  useRegisterFieldControl(controlRef, id, value, getFormValue, !!fieldName && !disabled, fieldName);
+  useValueChanged(value, () => {
+    if (fieldName) {
+      clearErrors(fieldName);
+    }
+    const initialValue = Array.isArray(validityData.initialValue) ? validityData.initialValue : EMPTY_ARRAY;
+    setFilled(value.length > 0);
+    setDirty(!areArraysEqual(value, initialValue));
+    validation.change(value);
+  });
+  const state = {
+    ...fieldState,
+    disabled
+  };
+  const contextValue = React.useMemo(() => ({
+    allValues,
+    value,
+    setValue,
+    parent,
+    disabled,
+    validation
+  }), [allValues, value, setValue, parent, disabled, validation]);
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      id: idProp,
+      role: 'group',
+      'aria-labelledby': labelId
+    }, elementProps, getDescriptionProps],
+    stateAttributesMapping: fieldValidityMapping
+  });
+  return /*#__PURE__*/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: ComboboxArrow,
@@ -3448,4 +4132,4 @@ function useRender(params) {
   return useRenderElement(params.defaultTagName ?? 'div', params, params);
 }
 
-export { index_parts$7 as Autocomplete, index_parts$2 as Combobox, index_parts$6 as Dialog, index_parts$5 as Drawer, index_parts$4 as Menu, index_parts$1 as NumberField, index_parts$3 as ScrollArea, index_parts as Select, Separator, useRender };
+export { index_parts$8 as Autocomplete, index_parts$3 as Checkbox, CheckboxGroup, index_parts$2 as Combobox, index_parts$7 as Dialog, index_parts$6 as Drawer, index_parts$5 as Menu, index_parts$1 as NumberField, index_parts$4 as ScrollArea, index_parts as Select, Separator, useRender };