@base-ui/react 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,136 @@
 # Versions
 
+## v1.4.0
+
+_Apr 13, 2026_
+
+### General Changes
+
+- Improve `render` prop warning accuracy (#4324, #4363) by @atomiks
+- Fix `preventBaseUIHandler` runtime wrapping (#4330) by @atomiks
+- Fix Uncaught TypeError: Converting circular structure to JSON (#4452) by @Profesor08
+- Expose `form` prop on hidden inputs (#4352) by @atomiks
+- Add `suppressHydrationWarning` to hidden inputs (#4482) by @devxoul
+- Fix outside-press dismissal in a shared shadow root (#4333) by @atomiks
+- Fix `Positioner` not repositioning to a different trigger when reopened with `keepMounted` (#4407) by @mdm317
+- Lock scroll of full-width anchored `modal` popups with touch input (#3100) by @atomiks
+
+### Alert Dialog
+
+- Fix detached trigger HMR with recreated handles (#4472) by @atomiks
+
+### Autocomplete
+
+- Fix initial live region announcements (#4286) by @atomiks
+
+### Avatar
+
+- Fix flash when image is cached (#4469) by @mj12albert
+
+### Checkbox
+
+- Fix uncontrolled default initialization (#4535) by @atomiks
+- Prevent input state changes in `readOnly` mode (#4551) by @tsbehlman
+
+### Collapsible
+
+- Fix open state when `keepMounted` has no transitions (#4555) by @mj12albert
+
+### Combobox
+
+- Fix clicks in `Chips`/`InputGroup` areas not focusing the input or opening the popup (#4296) by @CiscoFran10
+- Fix iOS viewport settling (#4351) by @atomiks
+- Fix initial live region announcements (#4286) by @atomiks
+- Prevent scroll lock when a controlled value triggers a re-render (#4507) by @ryanrhee
+- Fix browser autofill with object values when autofill uses the label (#4560) by @mattrothenberg
+- Prevent item taps from blurring the input (#4578) by @atomiks
+- Respect rendered chips for keyboard navigation (#4572) by @atomiks
+
+### Dialog
+
+- Fix detached trigger HMR with recreated handles (#4472) by @atomiks
+
+### Drawer
+
+- Fix touch scroll in portaled popups (#4382) by @atomiks
+- Fix nested swipe cancel state (#4410) by @atomiks
+- Fix interrupted swipe dismiss cleanup (#4467) by @lunaxislu
+- Warn when a popup is missing `Viewport` (#4495) by @atomiks
+- Prevent dialogs from affecting nested drawer stack (#4493) by @atomiks
+
+### Field
+
+- Fix form error matching in `<Field.Error>` (#4494) by @atomiks
+
+### Menu
+
+- Fix `SubmenuTrigger` not respecting disabled state from `render` (#3858) by @CiscoFran10
+- Preserve dialog focus on pointer leave (#4581) by @atomiks
+
+### Navigation Menu
+
+- Remove invalid `aria-orientation` attribute (#4355) by @atomiks
+- Add generic `Value` typing (#4328) by @atomiks
+- Fix initial trigger switch size snap (#4327) by @atomiks
+- Fix top-level trigger pointer events blocking (#4362) by @atomiks
+- Fix reverse <kbd>Shift</kbd>+<kbd>Tab</kbd> submenu re-entry (#4464) by @atomiks
+- Fix nested inline submenu hover handoff (#4413) by @atomiks
+- Fix transition width when reopening (#4587) by @mdm317
+
+### Number Field
+
+- Fix format rounding error on blur (#4557) by @atomiks
+
+### OTP Field
+
+- Add preview `OTPField` component for one-time password and verification code entry (#4365) by @atomiks
+
+### Popover
+
+- Remove stray focus guards around trigger when `modal` (#4350) by @atomiks
+- Sync hover open event state (#4526) by @atomiks
+
+### Preview Card
+
+- Fix hover reopen race conditions across close transitions (#4446) by @arturbien
+
+### Select
+
+- Fix browser autofill with object values when autofill uses the label (#4560) by @mattrothenberg
+- Preserve touch exit animations (#4325) by @atomiks
+- Fix touch reopen highlight (#4356) by @atomiks
+- Fix scroll arrows stopping short of the edges (#4447) by @atomiks
+- Fix RTL-aligned popup positioning with `alignItemWithTrigger` (#4531) by @atomiks
+
+### Slider
+
+- Fix edge thumb alignment after reveal (#4354) by @atomiks
+- Remove extra TalkBack focus targets (#4242) by @atomiks
+- Fix keyboard floating-point rounding (#4548) by @atomiks
+- Skip client-only prehydration scripts (#4530) by @atomiks
+
+### Switch
+
+- Prevent input state changes in `readOnly` mode (#4551) by @tsbehlman
+
+### Tabs
+
+- Fix `activationDirection` not updating on programmatic value changes (#4347) by @LukasTy
+- Fix activation direction on first render (#4532) by @atomiks
+- Skip client-only prehydration scripts (#4530) by @atomiks
+
+### Toast
+
+- Keep viewport expanded while touch swiping (#4411) by @atomiks
+- Add upsert support to `add` method (#4440) by @atomiks
+- Fix timers not resuming after window regains focus (#4438) by @kyrregjerstad
+
+### Toggle Group
+
+- Fix incorrect keyboard nav on cross axis (#4488) by @mj12albert
+
+All contributors of this release in alphabetical order : @arturbien, @atomiks, @CiscoFran10, @devxoul, @flaviendelangle, @kyrregjerstad, @LukasTy, @lunaxislu, @mattrothenberg, @mdm317, @michaldudak, @mj12albert, @Profesor08, @ryanrhee, @sai6855, @tsbehlman
+
 ## v1.3.0
 
 _Mar 12, 2026_

package/accordion/header/AccordionHeader.js

@@ -20,6 +20,7 @@ const AccordionHeader = exports.AccordionHeader = /*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/accordion/item/AccordionItem.js

@@ -31,6 +31,7 @@ const AccordionItem = exports.AccordionItem = /*#__PURE__*/React.forwardRef(func
     onOpenChange: onOpenChangeProp,
     render,
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/accordion/panel/AccordionPanel.js

@@ -30,6 +30,7 @@ const AccordionPanel = exports.AccordionPanel = /*#__PURE__*/React.forwardRef(fu
     keepMounted: keepMountedProp,
     id: idProp,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -140,7 +141,7 @@ const AccordionPanel = exports.AccordionPanel = /*#__PURE__*/React.forwardRef(fu
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.accordionStateAttributesMapping
   });
-  const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted;
+  const shouldRender = keepMounted || hiddenUntilFound || mounted;
   if (!shouldRender) {
     return null;
   }

package/accordion/root/AccordionRoot.d.ts

@@ -45,7 +45,7 @@ export interface AccordionRootProps<Value = any> extends BaseUIComponentProps<'d
    */
   disabled?: boolean | undefined;
   /**
-   * Allows the browser’s built-in page search to find and expand the panel contents.
+   * Allows the browser's built-in page search to find and expand the panel contents.
    *
    * Overrides the `keepMounted` prop and uses `hidden="until-found"`
    * to hide the element without removing it from the DOM.

package/accordion/root/AccordionRoot.js

@@ -41,6 +41,7 @@ const AccordionRoot = exports.AccordionRoot = /*#__PURE__*/React.forwardRef(func
     orientation = 'vertical',
     value: valueProp,
     defaultValue: defaultValueProp,
+    style,
     ...elementProps
   } = componentProps;
   const direction = (0, _DirectionContext.useDirection)();

package/accordion/trigger/AccordionTrigger.js

@@ -48,6 +48,7 @@ const AccordionTrigger = exports.AccordionTrigger = /*#__PURE__*/React.forwardRe
     id: idProp,
     render,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -102,7 +103,7 @@ const AccordionTrigger = exports.AccordionTrigger = /*#__PURE__*/React.forwardRe
       const numOfEnabledTriggers = triggers.length;
       const lastIndex = numOfEnabledTriggers - 1;
       let nextIndex = -1;
-      const thisIndex = triggers.indexOf(event.target);
+      const thisIndex = triggers.indexOf(event.currentTarget);
       function toNext() {
         if (loopFocus) {
           nextIndex = thisIndex + 1 > lastIndex ? 0 : thisIndex + 1;

package/alert-dialog/index.d.ts

@@ -1,2 +1,10 @@
 export * as AlertDialog from "./index.parts.js";
-export type * from "./root/AlertDialogRoot.js";
+export type * from "./root/AlertDialogRoot.js";
+export type { DialogBackdropProps as AlertDialogBackdropProps, DialogBackdropState as AlertDialogBackdropState } from "../dialog/backdrop/DialogBackdrop.js";
+export type { DialogCloseProps as AlertDialogCloseProps, DialogCloseState as AlertDialogCloseState } from "../dialog/close/DialogClose.js";
+export type { DialogDescriptionProps as AlertDialogDescriptionProps, DialogDescriptionState as AlertDialogDescriptionState } from "../dialog/description/DialogDescription.js";
+export type { DialogPopupProps as AlertDialogPopupProps, DialogPopupState as AlertDialogPopupState } from "../dialog/popup/DialogPopup.js";
+export type { DialogPortalProps as AlertDialogPortalProps, DialogPortalState as AlertDialogPortalState } from "../dialog/portal/DialogPortal.js";
+export type { DialogTitleProps as AlertDialogTitleProps, DialogTitleState as AlertDialogTitleState } from "../dialog/title/DialogTitle.js";
+export type { DialogTriggerProps as AlertDialogTriggerProps, DialogTriggerState as AlertDialogTriggerState } from "../dialog/trigger/DialogTrigger.js";
+export type { DialogViewportProps as AlertDialogViewportProps, DialogViewportState as AlertDialogViewportState } from "../dialog/viewport/DialogViewport.js";

package/alert-dialog/root/AlertDialogRoot.d.ts

@@ -4,7 +4,7 @@ import { DialogHandle } from "../../dialog/store/DialogHandle.js";
 import type { DialogRoot } from "../../dialog/root/DialogRoot.js";
 /**
  * Groups all parts of the alert dialog.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */

package/alert-dialog/root/AlertDialogRoot.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AlertDialogRoot = AlertDialogRoot;
 var React = _interopRequireWildcard(require("react"));
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
+var _DialogRoot = require("../../dialog/root/DialogRoot");
 var _useDialogRoot = require("../../dialog/root/useDialogRoot");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
 var _DialogStore = require("../../dialog/store/DialogStore");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the alert dialog.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
@@ -30,20 +30,18 @@ function AlertDialogRoot(props) {
     triggerId: triggerIdProp,
     defaultTriggerId: defaultTriggerIdProp = null
   } = props;
-  const parentDialogRootContext = (0, _DialogRootContext.useDialogRootContext)();
+  const parentDialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);
   const nested = Boolean(parentDialogRootContext);
-  const store = (0, _useRefWithInit.useRefWithInit)(() => {
-    return handle?.store ?? new _DialogStore.DialogStore({
-      open: defaultOpen,
-      openProp,
-      activeTriggerId: defaultTriggerIdProp,
-      triggerIdProp,
-      modal: true,
-      disablePointerDismissal: true,
-      nested,
-      role: 'alertdialog'
-    });
-  }).current;
+  const store = _DialogStore.DialogStore.useStore(handle?.store, {
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp,
+    modal: true,
+    disablePointerDismissal: true,
+    nested,
+    role: 'alertdialog'
+  });
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useSyncedValue('nested', nested);
@@ -54,16 +52,20 @@ function AlertDialogRoot(props) {
     store,
     actionsRef,
     parentContext: parentDialogRootContext?.store.context,
+    isDrawer: false,
     onOpenChange,
     triggerIdProp
   });
   const contextValue = React.useMemo(() => ({
     store
   }), [store]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.DialogRootContext.Provider, {
-    value: contextValue,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRoot.IsDrawerContext.Provider, {
+    value: false,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.DialogRootContext.Provider, {
+      value: contextValue,
+      children: typeof children === 'function' ? children({
+        payload
+      }) : children
+    })
   });
 }

package/autocomplete/clear/AutocompleteClearDataAttributes.d.ts

@@ -0,0 +1 @@
+export { ComboboxClearDataAttributes as AutocompleteClearDataAttributes } from "../../combobox/clear/ComboboxClearDataAttributes.js";

package/autocomplete/clear/AutocompleteClearDataAttributes.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AutocompleteClearDataAttributes", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxClearDataAttributes.ComboboxClearDataAttributes;
+  }
+});
+var _ComboboxClearDataAttributes = require("../../combobox/clear/ComboboxClearDataAttributes");

package/autocomplete/index.d.ts

@@ -1,19 +1,22 @@
 export * as Autocomplete from "./index.parts.js";
 export type * from "./root/AutocompleteRoot.js";
+export type * from "./trigger/AutocompleteTrigger.js";
+export type * from "./input-group/AutocompleteInputGroup.js";
+export type * from "./item/AutocompleteItem.js";
 export type * from "./value/AutocompleteValue.js";
-export type { ComboboxTriggerProps as AutocompleteTriggerProps, ComboboxTriggerState as AutocompleteTriggerState } from "../combobox/trigger/ComboboxTrigger.js";
 export type { ComboboxInputProps as AutocompleteInputProps, ComboboxInputState as AutocompleteInputState } from "../combobox/input/ComboboxInput.js";
-export type { ComboboxInputGroupProps as AutocompleteInputGroupProps, ComboboxInputGroupState as AutocompleteInputGroupState } from "../combobox/input-group/ComboboxInputGroup.js";
+export type { ComboboxIconProps as AutocompleteIconProps, ComboboxIconState as AutocompleteIconState } from "../combobox/icon/ComboboxIcon.js";
+export type { ComboboxClearProps as AutocompleteClearProps, ComboboxClearState as AutocompleteClearState } from "../combobox/clear/ComboboxClear.js";
 export type { ComboboxPopupProps as AutocompletePopupProps, ComboboxPopupState as AutocompletePopupState } from "../combobox/popup/ComboboxPopup.js";
 export type { ComboboxPositionerProps as AutocompletePositionerProps, ComboboxPositionerState as AutocompletePositionerState } from "../combobox/positioner/ComboboxPositioner.js";
 export type { ComboboxListProps as AutocompleteListProps, ComboboxListState as AutocompleteListState } from "../combobox/list/ComboboxList.js";
-export type { ComboboxItemProps as AutocompleteItemProps, ComboboxItemState as AutocompleteItemState } from "../combobox/item/ComboboxItem.js";
+export type { ComboboxRowProps as AutocompleteRowProps, ComboboxRowState as AutocompleteRowState } from "../combobox/row/ComboboxRow.js";
 export type { ComboboxArrowProps as AutocompleteArrowProps, ComboboxArrowState as AutocompleteArrowState } from "../combobox/arrow/ComboboxArrow.js";
 export type { ComboboxBackdropProps as AutocompleteBackdropProps, ComboboxBackdropState as AutocompleteBackdropState } from "../combobox/backdrop/ComboboxBackdrop.js";
-export type { ComboboxPortalProps as AutocompletePortalProps } from "../combobox/portal/ComboboxPortal.js";
+export type { ComboboxPortalProps as AutocompletePortalProps, ComboboxPortalState as AutocompletePortalState } from "../combobox/portal/ComboboxPortal.js";
 export type { ComboboxGroupProps as AutocompleteGroupProps, ComboboxGroupState as AutocompleteGroupState } from "../combobox/group/ComboboxGroup.js";
 export type { ComboboxGroupLabelProps as AutocompleteGroupLabelProps, ComboboxGroupLabelState as AutocompleteGroupLabelState } from "../combobox/group-label/ComboboxGroupLabel.js";
 export type { ComboboxEmptyProps as AutocompleteEmptyProps, ComboboxEmptyState as AutocompleteEmptyState } from "../combobox/empty/ComboboxEmpty.js";
 export type { ComboboxStatusProps as AutocompleteStatusProps, ComboboxStatusState as AutocompleteStatusState } from "../combobox/status/ComboboxStatus.js";
-export type { ComboboxCollectionProps as AutocompleteCollectionProps } from "../combobox/collection/ComboboxCollection.js";
+export type { ComboboxCollectionState as AutocompleteCollectionState, ComboboxCollectionProps as AutocompleteCollectionProps } from "../combobox/collection/ComboboxCollection.js";
 export type { Filter as AutocompleteFilter, UseFilterOptions as AutocompleteFilterOptions } from "../combobox/root/utils/useFilter.js";

package/autocomplete/index.parts.d.ts

@@ -1,8 +1,8 @@
 export { AutocompleteRoot as Root } from "./root/AutocompleteRoot.js";
 export { AutocompleteValue as Value } from "./value/AutocompleteValue.js";
-export { ComboboxTrigger as Trigger } from "../combobox/trigger/ComboboxTrigger.js";
+export { AutocompleteTrigger as Trigger } from "./trigger/AutocompleteTrigger.js";
 export { ComboboxInput as Input } from "../combobox/input/ComboboxInput.js";
-export { ComboboxInputGroup as InputGroup } from "../combobox/input-group/ComboboxInputGroup.js";
+export { AutocompleteInputGroup as InputGroup } from "./input-group/AutocompleteInputGroup.js";
 export { ComboboxIcon as Icon } from "../combobox/icon/ComboboxIcon.js";
 export { ComboboxClear as Clear } from "../combobox/clear/ComboboxClear.js";
 export { ComboboxList as List } from "../combobox/list/ComboboxList.js";
@@ -14,7 +14,7 @@ export { ComboboxPopup as Popup } from "../combobox/popup/ComboboxPopup.js";
 export { ComboboxArrow as Arrow } from "../combobox/arrow/ComboboxArrow.js";
 export { ComboboxGroup as Group } from "../combobox/group/ComboboxGroup.js";
 export { ComboboxGroupLabel as GroupLabel } from "../combobox/group-label/ComboboxGroupLabel.js";
-export { ComboboxItem as Item } from "../combobox/item/ComboboxItem.js";
+export { AutocompleteItem as Item } from "./item/AutocompleteItem.js";
 export { ComboboxRow as Row } from "../combobox/row/ComboboxRow.js";
 export { ComboboxCollection as Collection } from "../combobox/collection/ComboboxCollection.js";
 export { ComboboxEmpty as Empty } from "../combobox/empty/ComboboxEmpty.js";

package/autocomplete/index.parts.js

@@ -60,13 +60,13 @@ Object.defineProperty(exports, "Input", {
 Object.defineProperty(exports, "InputGroup", {
   enumerable: true,
   get: function () {
-    return _ComboboxInputGroup.ComboboxInputGroup;
+    return _AutocompleteInputGroup.AutocompleteInputGroup;
   }
 });
 Object.defineProperty(exports, "Item", {
   enumerable: true,
   get: function () {
-    return _ComboboxItem.ComboboxItem;
+    return _AutocompleteItem.AutocompleteItem;
   }
 });
 Object.defineProperty(exports, "List", {
@@ -120,7 +120,7 @@ Object.defineProperty(exports, "Status", {
 Object.defineProperty(exports, "Trigger", {
   enumerable: true,
   get: function () {
-    return _ComboboxTrigger.ComboboxTrigger;
+    return _AutocompleteTrigger.AutocompleteTrigger;
   }
 });
 Object.defineProperty(exports, "Value", {
@@ -143,9 +143,9 @@ Object.defineProperty(exports, "useFilteredItems", {
 });
 var _AutocompleteRoot = require("./root/AutocompleteRoot");
 var _AutocompleteValue = require("./value/AutocompleteValue");
-var _ComboboxTrigger = require("../combobox/trigger/ComboboxTrigger");
+var _AutocompleteTrigger = require("./trigger/AutocompleteTrigger");
 var _ComboboxInput = require("../combobox/input/ComboboxInput");
-var _ComboboxInputGroup = require("../combobox/input-group/ComboboxInputGroup");
+var _AutocompleteInputGroup = require("./input-group/AutocompleteInputGroup");
 var _ComboboxIcon = require("../combobox/icon/ComboboxIcon");
 var _ComboboxClear = require("../combobox/clear/ComboboxClear");
 var _ComboboxList = require("../combobox/list/ComboboxList");
@@ -157,7 +157,7 @@ var _ComboboxPopup = require("../combobox/popup/ComboboxPopup");
 var _ComboboxArrow = require("../combobox/arrow/ComboboxArrow");
 var _ComboboxGroup = require("../combobox/group/ComboboxGroup");
 var _ComboboxGroupLabel = require("../combobox/group-label/ComboboxGroupLabel");
-var _ComboboxItem = require("../combobox/item/ComboboxItem");
+var _AutocompleteItem = require("./item/AutocompleteItem");
 var _ComboboxRow = require("../combobox/row/ComboboxRow");
 var _ComboboxCollection = require("../combobox/collection/ComboboxCollection");
 var _ComboboxEmpty = require("../combobox/empty/ComboboxEmpty");

package/autocomplete/input-group/AutocompleteInputGroup.d.ts

@@ -0,0 +1,41 @@
+import type * as React from 'react';
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { Side } from "../../utils/useAnchorPositioning.js";
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+export declare const AutocompleteInputGroup: AutocompleteInputGroup;
+export interface AutocompleteInputGroupState extends FieldRoot.State {
+  /**
+   * Whether the corresponding popup is open.
+   */
+  open: boolean;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the component should ignore user edits.
+   */
+  readOnly: boolean;
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   */
+  popupSide: Side | null;
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty: boolean;
+}
+export interface AutocompleteInputGroupProps extends BaseUIComponentProps<'div', AutocompleteInputGroupState> {}
+export interface AutocompleteInputGroup {
+  (componentProps: AutocompleteInputGroupProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+}
+export declare namespace AutocompleteInputGroup {
+  type State = AutocompleteInputGroupState;
+  type Props = AutocompleteInputGroupProps;
+}

package/autocomplete/input-group/AutocompleteInputGroup.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteInputGroup = void 0;
+var _ComboboxInputGroup = require("../../combobox/input-group/ComboboxInputGroup");
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+const AutocompleteInputGroup = exports.AutocompleteInputGroup = _ComboboxInputGroup.ComboboxInputGroup;

package/autocomplete/input-group/AutocompleteInputGroupDataAttributes.d.ts

@@ -0,0 +1,51 @@
+export declare enum AutocompleteInputGroupDataAttributes {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  popupOpen = "data-popup-open",
+  /**
+   * Present when the input group is pressed.
+   */
+  pressed = "data-pressed",
+  /**
+   * Present when the component is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the component is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  popupSide = "data-popup-side",
+  /**
+   * Present when the component is in valid state (when wrapped in Field.Root).
+   */
+  valid = "data-valid",
+  /**
+   * Present when the component is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the component has been touched (when wrapped in Field.Root).
+   */
+  touched = "data-touched",
+  /**
+   * Present when the component's value has changed (when wrapped in Field.Root).
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the component has a value (when wrapped in Field.Root).
+   */
+  filled = "data-filled",
+  /**
+   * Present when the component is focused (when wrapped in Field.Root).
+   */
+  focused = "data-focused",
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty = "data-list-empty",
+}

package/autocomplete/input-group/AutocompleteInputGroupDataAttributes.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteInputGroupDataAttributes = void 0;
+let AutocompleteInputGroupDataAttributes = exports.AutocompleteInputGroupDataAttributes = /*#__PURE__*/function (AutocompleteInputGroupDataAttributes) {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  AutocompleteInputGroupDataAttributes["popupOpen"] = "data-popup-open";
+  /**
+   * Present when the input group is pressed.
+   */
+  AutocompleteInputGroupDataAttributes["pressed"] = "data-pressed";
+  /**
+   * Present when the component is disabled.
+   */
+  AutocompleteInputGroupDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the component is readonly.
+   */
+  AutocompleteInputGroupDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  AutocompleteInputGroupDataAttributes["popupSide"] = "data-popup-side";
+  /**
+   * Present when the component is in valid state (when wrapped in Field.Root).
+   */
+  AutocompleteInputGroupDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the component is in invalid state (when wrapped in Field.Root).
+   */
+  AutocompleteInputGroupDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the component has been touched (when wrapped in Field.Root).
+   */
+  AutocompleteInputGroupDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the component's value has changed (when wrapped in Field.Root).
+   */
+  AutocompleteInputGroupDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the component has a value (when wrapped in Field.Root).
+   */
+  AutocompleteInputGroupDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the component is focused (when wrapped in Field.Root).
+   */
+  AutocompleteInputGroupDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  AutocompleteInputGroupDataAttributes["listEmpty"] = "data-list-empty";
+  return AutocompleteInputGroupDataAttributes;
+}({});

package/autocomplete/item/AutocompleteItem.d.ts

@@ -0,0 +1,48 @@
+import type * as React from 'react';
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+/**
+ * An individual item in the list.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+export declare const AutocompleteItem: AutocompleteItem;
+export interface AutocompleteItemState {
+  /**
+   * Whether the item should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the item is highlighted.
+   */
+  highlighted: boolean;
+}
+export interface AutocompleteItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', AutocompleteItemState>, 'id'> {
+  children?: React.ReactNode;
+  /**
+   * An optional click handler for the item when selected.
+   * It fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus.
+   */
+  onClick?: BaseUIComponentProps<'div', AutocompleteItemState>['onClick'] | undefined;
+  /**
+   * The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM.
+   */
+  index?: number | undefined;
+  /**
+   * A unique value that identifies this item.
+   * @default null
+   */
+  value?: any;
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+}
+export interface AutocompleteItem {
+  (componentProps: AutocompleteItemProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+}
+export declare namespace AutocompleteItem {
+  type State = AutocompleteItemState;
+  type Props = AutocompleteItemProps;
+}

package/autocomplete/item/AutocompleteItem.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteItem = void 0;
+var _ComboboxItem = require("../../combobox/item/ComboboxItem");
+/**
+ * An individual item in the list.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+const AutocompleteItem = exports.AutocompleteItem = _ComboboxItem.ComboboxItem;