@base-ui/react 1.0.0 → 1.2.0

package/floating-ui-react/hooks/useTypeahead.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -10,7 +11,6 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _utils = require("../utils");
-var _constants = require("../../utils/constants");
 /**
  * Provides a matching callback that can be used to focus an item as the user
  * types, often used in tandem with `useListNavigation()`.
@@ -18,17 +18,15 @@ var _constants = require("../../utils/constants");
  */
 function useTypeahead(context, props) {
   const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
   const dataRef = store.context.dataRef;
+  const open = store.useState('open');
   const {
     listRef,
     activeIndex,
     onMatch: onMatchProp,
     onTypingChange,
     enabled = true,
-    findMatch = null,
     resetMs = 750,
-    ignoreKeys = _constants.EMPTY_ARRAY,
     selectedIndex = null
   } = props;
   const timeout = (0, _useTimeout.useTimeout)();
@@ -36,12 +34,15 @@ function useTypeahead(context, props) {
   const prevIndexRef = React.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React.useRef(null);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (open) {
-      timeout.clear();
-      matchIndexRef.current = null;
+    if (!open && selectedIndex !== null) {
+      return;
+    }
+    timeout.clear();
+    matchIndexRef.current = null;
+    if (stringRef.current !== '') {
       stringRef.current = '';
     }
-  }, [open, timeout]);
+  }, [open, selectedIndex, timeout]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Sync arrow key navigation but not typeahead navigation.
     if (open && stringRef.current === '') {
@@ -61,7 +62,7 @@ function useTypeahead(context, props) {
   });
   const onKeyDown = (0, _useStableCallback.useStableCallback)(event => {
     function getMatchingIndex(list, orderedList, string) {
-      const str = findMatch ? findMatch(orderedList, string) : orderedList.find(text => text?.toLocaleLowerCase().indexOf(string.toLocaleLowerCase()) === 0);
+      const str = orderedList.find(text => text?.toLocaleLowerCase().indexOf(string.toLocaleLowerCase()) === 0);
       return str ? list.indexOf(str) : -1;
     }
     const listContent = listRef.current;
@@ -72,7 +73,7 @@ function useTypeahead(context, props) {
         (0, _utils.stopEvent)(event);
       }
     }
-    if (listContent == null || ignoreKeys.includes(event.key) ||
+    if (listContent == null ||
     // Character key.
     event.key.length !== 1 ||
     // Modifier key.
@@ -84,6 +85,12 @@ function useTypeahead(context, props) {
       setTypingChange(true);
     }
 
+    // Capture whether this is a new typing session before mutating the string.
+    const isNewSession = stringRef.current === '';
+    if (isNewSession) {
+      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
+    }
+
     // Bail out if the list contains a word like "llama" or "aaron". TODO:
     // allow it in this case, too.
     const allowRapidSuccessionOfFirstLetter = listContent.every(text => text ? text[0]?.toLocaleLowerCase() !== text[1]?.toLocaleLowerCase() : true);
@@ -100,7 +107,11 @@ function useTypeahead(context, props) {
       prevIndexRef.current = matchIndexRef.current;
       setTypingChange(false);
     });
-    const prevIndex = prevIndexRef.current;
+
+    // Compute the starting index for this search.
+    // If this is a new typing session (string is empty), base it on the current
+    // selection/active item; otherwise continue from the last matched index.
+    const prevIndex = isNewSession ? selectedIndex ?? activeIndex ?? -1 : prevIndexRef.current;
     const index = getMatchingIndex(listContent, [...listContent.slice((prevIndex || 0) + 1), ...listContent.slice(0, (prevIndex || 0) + 1)], stringRef.current);
     if (index !== -1) {
       onMatchProp?.(index);
@@ -110,9 +121,28 @@ function useTypeahead(context, props) {
       setTypingChange(false);
     }
   });
+  const onBlur = (0, _useStableCallback.useStableCallback)(event => {
+    const next = event.relatedTarget;
+    const currentDomReferenceElement = store.select('domReferenceElement');
+    const currentFloatingElement = store.select('floatingElement');
+    const withinReference = (0, _utils.contains)(currentDomReferenceElement, next);
+    const withinFloating = (0, _utils.contains)(currentFloatingElement, next);
+
+    // Keep the session if focus moves within the composite (reference <-> floating).
+    if (withinReference || withinFloating) {
+      return;
+    }
+
+    // End the current typing session when focus leaves the composite entirely.
+    timeout.clear();
+    stringRef.current = '';
+    prevIndexRef.current = matchIndexRef.current;
+    setTypingChange(false);
+  });
   const reference = React.useMemo(() => ({
-    onKeyDown
-  }), [onKeyDown]);
+    onKeyDown,
+    onBlur
+  }), [onKeyDown, onBlur]);
   const floating = React.useMemo(() => {
     return {
       onKeyDown,
@@ -120,9 +150,10 @@ function useTypeahead(context, props) {
         if (event.key === ' ') {
           setTypingChange(false);
         }
-      }
+      },
+      onBlur
     };
-  }, [onKeyDown, setTypingChange]);
+  }, [onKeyDown, onBlur, setTypingChange]);
   return React.useMemo(() => enabled ? {
     reference,
     floating

package/floating-ui-react/middleware/arrow.d.ts

@@ -10,7 +10,7 @@ export interface ArrowOptions {
    * Useful when the floating element has rounded corners.
    * @default 0
    */
-  padding?: Padding;
+  padding?: Padding | undefined;
   /**
    * Which element to use as the offset parent.
    * @default 'real'

package/floating-ui-react/safePolygon.d.ts

@@ -1,8 +1,8 @@
 import type { HandleClose } from "./hooks/useHover.js";
 export interface SafePolygonOptions {
-  buffer?: number;
-  blockPointerEvents?: boolean;
-  requireIntent?: boolean;
+  buffer?: number | undefined;
+  blockPointerEvents?: boolean | undefined;
+  requireIntent?: boolean | undefined;
 }
 /**
  * Generates a safe polygon area that the user can traverse without closing the

package/floating-ui-react/types.d.ts

@@ -48,10 +48,10 @@ export interface FloatingEvents {
   off(event: string, handler: (data: any) => void): void;
 }
 export interface ContextData {
-  openEvent?: Event;
-  floatingContext?: FloatingContext;
+  openEvent?: Event | undefined;
+  floatingContext?: FloatingContext | undefined;
   /** @deprecated use `onTypingChange` prop in `useTypeahead` */
-  typing?: boolean;
+  typing?: boolean | undefined;
   [key: string]: any;
 }
 export type FloatingRootContext = FloatingRootStore;
@@ -69,14 +69,14 @@ export type FloatingContext = Omit<UsePositionFloatingReturn<ReferenceType>, 're
 export interface FloatingNodeType {
   id: string | undefined;
   parentId: string | null;
-  context?: FloatingContext;
+  context?: FloatingContext | undefined;
 }
 export type FloatingTreeType = FloatingTreeStore;
 export interface ElementProps {
-  reference?: React.HTMLProps<Element>;
-  floating?: React.HTMLProps<HTMLElement>;
-  item?: React.HTMLProps<HTMLElement> | ((props: ExtendedUserProps) => React.HTMLProps<HTMLElement>);
-  trigger?: React.HTMLProps<Element>;
+  reference?: React.HTMLProps<Element> | undefined;
+  floating?: React.HTMLProps<HTMLElement> | undefined;
+  item?: (React.HTMLProps<HTMLElement> | ((props: ExtendedUserProps) => React.HTMLProps<HTMLElement>)) | undefined;
+  trigger?: React.HTMLProps<Element> | undefined;
 }
 export type ReferenceType = Element | VirtualElement;
 export type UseFloatingData = Prettify<UseFloatingReturn>;
@@ -92,7 +92,7 @@ export type UseFloatingReturn = Prettify<UsePositionFloatingReturn & {
   elements: ExtendedElements;
 }>;
 export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'> {
-  rootContext?: FloatingRootContext;
+  rootContext?: FloatingRootContext | undefined;
   /**
    * Object of external elements as an alternative to the `refs` object setters.
    */
@@ -100,12 +100,12 @@ export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'>
     /**
      * Externally passed reference element. Store in state.
      */
-    reference?: ReferenceType | null;
+    reference?: (ReferenceType | null) | undefined;
     /**
      * Externally passed floating element. Store in state.
      */
-    floating?: HTMLElement | null;
-  };
+    floating?: (HTMLElement | null) | undefined;
+  } | undefined;
   /**
    * An event callback that is invoked when the floating element is opened or
    * closed.
@@ -114,9 +114,9 @@ export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'>
   /**
    * Unique node id when using `FloatingTree`.
    */
-  nodeId?: string;
+  nodeId?: string | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */
-  externalTree?: FloatingTreeStore;
+  externalTree?: FloatingTreeStore | undefined;
 }

package/floating-ui-react/utils/composite.d.ts

@@ -10,10 +10,10 @@ export declare function findNonDisabledListIndex(listRef: React.RefObject<Readon
   disabledIndices,
   amount
 }?: {
-  startingIndex?: number;
-  decrement?: boolean;
-  disabledIndices?: DisabledIndices;
-  amount?: number;
+  startingIndex?: number | undefined;
+  decrement?: boolean | undefined;
+  disabledIndices?: DisabledIndices | undefined;
+  amount?: number | undefined;
 }): number;
 export declare function getGridNavigatedIndex(listRef: React.RefObject<Array<HTMLElement | null>>, {
   event,
@@ -36,7 +36,7 @@ export declare function getGridNavigatedIndex(listRef: React.RefObject<Array<HTM
   minIndex: number;
   maxIndex: number;
   prevIndex: number;
-  stopEvent?: boolean;
+  stopEvent?: boolean | undefined;
 }): number;
 /** For each cell index, gets the item index that occupies that cell */
 export declare function createGridCellMap(sizes: Dimensions[], cols: number, dense: boolean): (number | undefined)[];

package/floating-ui-react/utils/composite.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,7 +13,6 @@ exports.getMinListIndex = getMinListIndex;
 exports.isDifferentGridRow = isDifferentGridRow;
 exports.isIndexOutOfListBounds = isIndexOutOfListBounds;
 exports.isListIndexDisabled = isListIndexDisabled;
-var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var _utils = require("@floating-ui/utils");
 var _event = require("./event");
 var _constants = require("./constants");
@@ -290,7 +288,7 @@ function createGridCellMap(sizes, cols, dense) {
   }, index) => {
     if (width > cols) {
       if (process.env.NODE_ENV !== 'production') {
-        throw new Error(process.env.NODE_ENV !== "production" ? `[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns` : (0, _formatErrorMessage2.default)(29, index));
+        throw new Error(`[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns`);
       }
     }
     let itemPlaced = false;

package/floating-ui-react/utils/element.d.ts

@@ -1,9 +1,10 @@
+import { type PopupTriggerMap } from "../../utils/popups/index.js";
 export declare function activeElement(doc: Document): Element | null;
 export declare function contains(parent?: Element | null, child?: Element | null): boolean;
+export declare function isTargetInsideEnabledTrigger(target: EventTarget | null, triggerElements: PopupTriggerMap): boolean;
 export declare function getTarget(event: Event): EventTarget | null;
 export declare function isEventTargetWithin(event: Event, node: Node | null | undefined): boolean;
 export declare function isRootElement(element: Element): boolean;
-export declare function getDocument(node: Element | null): Document;
 export declare function isTypeableElement(element: unknown): boolean;
 export declare function isTypeableCombobox(element: Element | null): boolean;
 export declare function matchesFocusVisible(element: Element | null): boolean;

package/floating-ui-react/utils/element.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.activeElement = activeElement;
 exports.contains = contains;
-exports.getDocument = getDocument;
 exports.getFloatingFocusElement = getFloatingFocusElement;
 exports.getTarget = getTarget;
 exports.isEventTargetWithin = isEventTargetWithin;
 exports.isRootElement = isRootElement;
+exports.isTargetInsideEnabledTrigger = isTargetInsideEnabledTrigger;
 exports.isTypeableCombobox = isTypeableCombobox;
 exports.isTypeableElement = isTypeableElement;
 exports.matchesFocusVisible = matchesFocusVisible;
@@ -48,6 +48,21 @@ function contains(parent, child) {
   // Give up, the result is false
   return false;
 }
+function isTargetInsideEnabledTrigger(target, triggerElements) {
+  if (!(0, _dom.isElement)(target)) {
+    return false;
+  }
+  const targetElement = target;
+  if (triggerElements.hasElement(targetElement)) {
+    return !targetElement.hasAttribute('data-trigger-disabled');
+  }
+  for (const [, trigger] of triggerElements.entries()) {
+    if (contains(trigger, targetElement)) {
+      return !trigger.hasAttribute('data-trigger-disabled');
+    }
+  }
+  return false;
+}
 function getTarget(event) {
   if ('composedPath' in event) {
     return event.composedPath()[0];
@@ -72,9 +87,6 @@ function isEventTargetWithin(event, node) {
 function isRootElement(element) {
   return element.matches('html,body');
 }
-function getDocument(node) {
-  return node?.ownerDocument || document;
-}
 function isTypeableElement(element) {
   return (0, _dom.isHTMLElement)(element) && element.matches(_constants.TYPEABLE_SELECTOR);
 }

package/floating-ui-react/utils/enqueueFocus.d.ts

@@ -1,8 +1,8 @@
 import type { FocusableElement } from 'tabbable';
 interface Options {
-  preventScroll?: boolean;
-  cancelPrevious?: boolean;
-  sync?: boolean;
+  preventScroll?: boolean | undefined;
+  cancelPrevious?: boolean | undefined;
+  sync?: boolean | undefined;
 }
 export declare function enqueueFocus(el: FocusableElement | null, options?: Options): void;
 export {};

package/floating-ui-react/utils/event.js

@@ -18,11 +18,9 @@ function isReactEvent(event) {
   return 'nativeEvent' in event;
 }
 
-// License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
+// License: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/isVirtualEvent.ts
 function isVirtualClick(event) {
-  // FIXME: Firefox is now emitting a deprecation warning for `mozInputSource`.
-  // Try to find a workaround for this. `react-aria` source still has the check.
-  if (event.mozInputSource === 0 && event.isTrusted) {
+  if (event.pointerType === '' && event.isTrusted) {
     return true;
   }
   if (_detectBrowser.isAndroid && event.pointerType) {

package/floating-ui-react/utils/markOthers.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.markOthers = markOthers;
 exports.supportsInert = void 0;
 var _dom = require("@floating-ui/utils/dom");
-var _element = require("./element");
+var _owner = require("@base-ui/utils/owner");
 // Modified to add conditional `aria-hidden` support:
 // https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
 
@@ -125,6 +125,6 @@ function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, iner
   };
 }
 function markOthers(avoidElements, ariaHidden = false, inert = false) {
-  const body = (0, _element.getDocument)(avoidElements[0]).body;
+  const body = (0, _owner.ownerDocument)(avoidElements[0]).body;
   return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll('[aria-live]'))), body, ariaHidden, inert);
 }

package/floating-ui-react/utils/tabbable.js

@@ -12,6 +12,7 @@ exports.getTabbableBeforeElement = getTabbableBeforeElement;
 exports.getTabbableOptions = void 0;
 exports.isOutsideEvent = isOutsideEvent;
 var _tabbable = require("tabbable");
+var _owner = require("@base-ui/utils/owner");
 var _element = require("./element");
 const getTabbableOptions = () => ({
   getShadowRoot: true,
@@ -28,23 +29,23 @@ function getTabbableIn(container, dir) {
   if (len === 0) {
     return undefined;
   }
-  const active = (0, _element.activeElement)((0, _element.getDocument)(container));
+  const active = (0, _element.activeElement)((0, _owner.ownerDocument)(container));
   const index = list.indexOf(active);
   // eslint-disable-next-line no-nested-ternary
   const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
   return list[nextIndex];
 }
 function getNextTabbable(referenceElement) {
-  return getTabbableIn((0, _element.getDocument)(referenceElement).body, 1) || referenceElement;
+  return getTabbableIn((0, _owner.ownerDocument)(referenceElement).body, 1) || referenceElement;
 }
 function getPreviousTabbable(referenceElement) {
-  return getTabbableIn((0, _element.getDocument)(referenceElement).body, -1) || referenceElement;
+  return getTabbableIn((0, _owner.ownerDocument)(referenceElement).body, -1) || referenceElement;
 }
 function getTabbableNearElement(referenceElement, dir) {
   if (!referenceElement) {
     return null;
   }
-  const list = (0, _tabbable.tabbable)((0, _element.getDocument)(referenceElement).body, getTabbableOptions());
+  const list = (0, _tabbable.tabbable)((0, _owner.ownerDocument)(referenceElement).body, getTabbableOptions());
   const elementCount = list.length;
   if (elementCount === 0) {
     return null;

package/form/Form.d.ts

@@ -11,11 +11,15 @@ import { FormContext } from "./FormContext.js";
  */
 export declare const Form: {
   <FormValues extends Record<string, any> = Record<string, any>>(props: Form.Props<FormValues> & {
-    ref?: React.Ref<HTMLFormElement>;
+    ref?: React.Ref<HTMLFormElement> | undefined;
   }): React.JSX.Element;
 };
 export type FormSubmitEventReason = typeof REASONS.none;
 export type FormSubmitEventDetails = BaseUIGenericEventDetails<Form.SubmitEventReason>;
+export type FormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
+export interface FormActions {
+  validate: (fieldName?: string | undefined) => void;
+}
 export interface FormState {}
 export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', Form.State> {
   /**
@@ -28,23 +32,36 @@ export interface FormProps<FormValues extends Record<string, any> = Record<strin
    *
    * @default 'onSubmit'
    */
-  validationMode?: FormValidationMode;
+  validationMode?: FormValidationMode | undefined;
   /**
    * Validation errors returned externally, typically after submission by a server or a form action.
    * This should be an object where keys correspond to the `name` attribute on `<Field.Root>`,
    * and values correspond to error(s) related to that field.
    */
-  errors?: FormContext['errors'];
+  errors?: FormContext['errors'] | undefined;
   /**
    * Event handler called when the form is submitted.
    * `preventDefault()` is called on the native submit event when used.
    */
-  onFormSubmit?: (formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void;
+  onFormSubmit?: ((formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void) | undefined;
+  /**
+   * A ref to imperative actions.
+   * - `validate`: Validates all fields when called. Optionally pass a field name to validate a single field.
+   * @example
+   * ```tsx
+   * // validate all fields
+   * actionsRef.current.validate();
+   *
+   * // validate one field
+   * actionsRef.current.validate('email');
+   * ```
+   */
+  actionsRef?: React.RefObject<Form.Actions | null> | undefined;
 }
-export type FormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
 export declare namespace Form {
   type Props<FormValues extends Record<string, any> = Record<string, any>> = FormProps<FormValues>;
   type State = FormState;
+  type Actions = FormActions;
   type ValidationMode = FormValidationMode;
   type SubmitEventReason = FormSubmitEventReason;
   type SubmitEventDetails = FormSubmitEventDetails;

package/form/Form.js

@@ -29,6 +29,7 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     errors: externalErrors,
     onSubmit,
     onFormSubmit,
+    actionsRef,
     ...elementProps
   } = componentProps;
   const formRef = React.useRef({
@@ -59,6 +60,22 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
       focusControl(invalidFields[0].controlRef.current);
     }
   }, [errors, focusControl]);
+  const handleImperativeValidate = React.useCallback(fieldName => {
+    const values = Array.from(formRef.current.fields.values());
+    if (fieldName) {
+      const namedField = values.find(field => field.name === fieldName);
+      if (namedField) {
+        namedField.validate(false);
+      }
+    } else {
+      values.forEach(field => {
+        field.validate(false);
+      });
+    }
+  }, []);
+  React.useImperativeHandle(actionsRef, () => ({
+    validate: handleImperativeValidate
+  }), [handleImperativeValidate]);
   const element = (0, _useRenderElement.useRenderElement)('form', componentProps, {
     ref: forwardedRef,
     props: [{

package/form/FormContext.d.ts

@@ -8,7 +8,7 @@ export interface FormContext {
   formRef: React.RefObject<{
     fields: Map<string, {
       name: string | undefined;
-      validate: () => void;
+      validate: (flushSync?: boolean | undefined) => void;
       validityData: FieldValidityData;
       controlRef: React.RefObject<HTMLElement | null>;
       getValue: () => unknown;

package/index.d.ts

@@ -8,8 +8,10 @@ export * from "./checkbox-group/index.js";
 export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
 export * from "./context-menu/index.js";
+export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";
 export * from "./direction-provider/index.js";
+export * from "./drawer/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./form/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.0.0
+ * @base-ui/react v1.2.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -120,6 +120,17 @@ Object.keys(_contextMenu).forEach(function (key) {
     }
   });
 });
+var _cspProvider = require("./csp-provider");
+Object.keys(_cspProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cspProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _cspProvider[key];
+    }
+  });
+});
 var _dialog = require("./dialog");
 Object.keys(_dialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -142,6 +153,17 @@ Object.keys(_directionProvider).forEach(function (key) {
     }
   });
 });
+var _drawer = require("./drawer");
+Object.keys(_drawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _drawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _drawer[key];
+    }
+  });
+});
 var _field = require("./field");
 Object.keys(_field).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/input/Input.d.ts

@@ -7,13 +7,13 @@ import { Field } from "../field/index.js";
  *
  * Documentation: [Base UI Input](https://base-ui.com/react/components/input)
  */
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface InputProps extends BaseUIComponentProps<'input', Input.State> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */
-  onValueChange?: Field.Control.Props['onValueChange'];
-  defaultValue?: Field.Control.Props['defaultValue'];
+  onValueChange?: Field.Control.Props['onValueChange'] | undefined;
+  defaultValue?: Field.Control.Props['defaultValue'] | undefined;
 }
 export interface InputState extends Field.Control.State {}
 export type InputChangeEventReason = Field.Control.ChangeEventReason;

package/labelable-provider/LabelableContext.d.ts

@@ -6,7 +6,7 @@ export interface LabelableContext {
    * When `null` the association is implicit.
    */
   controlId: string | null | undefined;
-  setControlId: React.Dispatch<React.SetStateAction<string | null | undefined>>;
+  registerControlId: (source: symbol, id: string | null | undefined) => void;
   /**
    * The `id` of the label.
    */

package/labelable-provider/LabelableContext.js

@@ -15,7 +15,7 @@ var _noop = require("../utils/noop");
  */
 const LabelableContext = exports.LabelableContext = /*#__PURE__*/React.createContext({
   controlId: undefined,
-  setControlId: _noop.NOOP,
+  registerControlId: _noop.NOOP,
   labelId: undefined,
   setLabelId: _noop.NOOP,
   messageIds: [],