@heroui/autocomplete 2.3.21-beta.3 → 2.3.21

package/dist/autocomplete.js

@@ -45,6 +45,7 @@ var import_shared_utils = require("@heroui/shared-utils");
 var import_utils = require("@react-aria/utils");
 var import_combobox2 = require("@react-aria/combobox");
 var import_form = require("@heroui/form");
+var import_aria_utils = require("@heroui/aria-utils");
 function useAutocomplete(originalProps) {
   var _a, _b, _c, _d, _e;
   const globalContext = (0, import_system.useProviderContext)();
@@ -214,12 +215,30 @@ function useAutocomplete(originalProps) {
     }
   }, [inputRef.current]);
   (0, import_react.useEffect)(() => {
-    let key = state.collection.getFirstKey();
-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
+    let keyToFocus;
+    if (state.selectedKey !== null && state.collection.getItem(state.selectedKey) && !state.disabledKeys.has(state.selectedKey)) {
+      keyToFocus = state.selectedKey;
+    } else {
+      let firstAvailableKey = state.collection.getFirstKey();
+      while (firstAvailableKey && state.disabledKeys.has(firstAvailableKey)) {
+        firstAvailableKey = state.collection.getKeyAfter(firstAvailableKey);
+      }
+      keyToFocus = firstAvailableKey;
+    }
+    state.selectionManager.setFocusedKey(keyToFocus);
+  }, [state.collection, state.disabledKeys, state.selectedKey]);
+  (0, import_react.useEffect)(() => {
+    if (state.isOpen && popoverRef.current && listBoxRef.current) {
+      let selectedItem = listBoxRef.current.querySelector("[aria-selected=true] [data-label=true]");
+      let scrollShadow = scrollShadowRef.current;
+      if (selectedItem && scrollShadow && selectedItem.parentElement) {
+        let scrollShadowRect = scrollShadow == null ? void 0 : scrollShadow.getBoundingClientRect();
+        let scrollShadowHeight = scrollShadowRect.height;
+        scrollShadow.scrollTop = selectedItem.parentElement.offsetTop - scrollShadowHeight / 2 + selectedItem.parentElement.clientHeight / 2;
+        state.selectionManager.setFocusedKey(state.selectedKey);
+      }
     }
-    state.selectionManager.setFocusedKey(key);
-  }, [state.collection, state.disabledKeys]);
+  }, [state.isOpen, disableAnimation]);
   (0, import_react.useEffect)(() => {
     if (isOpen) {
       if (popoverRef.current && inputWrapperRef.current) {
@@ -334,6 +353,7 @@ function useAutocomplete(originalProps) {
           )
         })
       },
+      shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
       // when the popover is open, the focus should be on input instead of dialog
       // therefore, we skip dialog focus here
       disableDialogFocus: true

package/dist/autocomplete.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   autocomplete_default
-} from "./chunk-TVVBPDQE.mjs";
-import "./chunk-7QAGQGGG.mjs";
+} from "./chunk-R4R544ZH.mjs";
+import "./chunk-ORFKRCF3.mjs";
 export {
   autocomplete_default as default
 };

package/dist/{chunk-7QAGQGGG.mjs → chunk-ORFKRCF3.mjs}

@@ -12,6 +12,7 @@ import { clsx, dataAttr, objectToDeps } from "@heroui/shared-utils";
 import { chain, mergeProps } from "@react-aria/utils";
 import { useComboBox } from "@react-aria/combobox";
 import { FormContext, useSlottedContext } from "@heroui/form";
+import { ariaShouldCloseOnInteractOutside } from "@heroui/aria-utils";
 function useAutocomplete(originalProps) {
   var _a, _b, _c, _d, _e;
   const globalContext = useProviderContext();
@@ -181,12 +182,30 @@ function useAutocomplete(originalProps) {
     }
   }, [inputRef.current]);
   useEffect(() => {
-    let key = state.collection.getFirstKey();
-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
+    let keyToFocus;
+    if (state.selectedKey !== null && state.collection.getItem(state.selectedKey) && !state.disabledKeys.has(state.selectedKey)) {
+      keyToFocus = state.selectedKey;
+    } else {
+      let firstAvailableKey = state.collection.getFirstKey();
+      while (firstAvailableKey && state.disabledKeys.has(firstAvailableKey)) {
+        firstAvailableKey = state.collection.getKeyAfter(firstAvailableKey);
+      }
+      keyToFocus = firstAvailableKey;
+    }
+    state.selectionManager.setFocusedKey(keyToFocus);
+  }, [state.collection, state.disabledKeys, state.selectedKey]);
+  useEffect(() => {
+    if (state.isOpen && popoverRef.current && listBoxRef.current) {
+      let selectedItem = listBoxRef.current.querySelector("[aria-selected=true] [data-label=true]");
+      let scrollShadow = scrollShadowRef.current;
+      if (selectedItem && scrollShadow && selectedItem.parentElement) {
+        let scrollShadowRect = scrollShadow == null ? void 0 : scrollShadow.getBoundingClientRect();
+        let scrollShadowHeight = scrollShadowRect.height;
+        scrollShadow.scrollTop = selectedItem.parentElement.offsetTop - scrollShadowHeight / 2 + selectedItem.parentElement.clientHeight / 2;
+        state.selectionManager.setFocusedKey(state.selectedKey);
+      }
     }
-    state.selectionManager.setFocusedKey(key);
-  }, [state.collection, state.disabledKeys]);
+  }, [state.isOpen, disableAnimation]);
   useEffect(() => {
     if (isOpen) {
       if (popoverRef.current && inputWrapperRef.current) {
@@ -301,6 +320,7 @@ function useAutocomplete(originalProps) {
           )
         })
       },
+      shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state),
       // when the popover is open, the focus should be on input instead of dialog
       // therefore, we skip dialog focus here
       disableDialogFocus: true

package/dist/{chunk-TVVBPDQE.mjs → chunk-R4R544ZH.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useAutocomplete
-} from "./chunk-7QAGQGGG.mjs";
+} from "./chunk-ORFKRCF3.mjs";
 
 // src/autocomplete.tsx
 import { forwardRef } from "@heroui/system";

package/dist/index.js

@@ -51,6 +51,7 @@ var import_shared_utils = require("@heroui/shared-utils");
 var import_utils = require("@react-aria/utils");
 var import_combobox2 = require("@react-aria/combobox");
 var import_form = require("@heroui/form");
+var import_aria_utils = require("@heroui/aria-utils");
 function useAutocomplete(originalProps) {
   var _a, _b, _c, _d, _e;
   const globalContext = (0, import_system.useProviderContext)();
@@ -220,12 +221,30 @@ function useAutocomplete(originalProps) {
     }
   }, [inputRef.current]);
   (0, import_react.useEffect)(() => {
-    let key = state.collection.getFirstKey();
-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
+    let keyToFocus;
+    if (state.selectedKey !== null && state.collection.getItem(state.selectedKey) && !state.disabledKeys.has(state.selectedKey)) {
+      keyToFocus = state.selectedKey;
+    } else {
+      let firstAvailableKey = state.collection.getFirstKey();
+      while (firstAvailableKey && state.disabledKeys.has(firstAvailableKey)) {
+        firstAvailableKey = state.collection.getKeyAfter(firstAvailableKey);
+      }
+      keyToFocus = firstAvailableKey;
+    }
+    state.selectionManager.setFocusedKey(keyToFocus);
+  }, [state.collection, state.disabledKeys, state.selectedKey]);
+  (0, import_react.useEffect)(() => {
+    if (state.isOpen && popoverRef.current && listBoxRef.current) {
+      let selectedItem = listBoxRef.current.querySelector("[aria-selected=true] [data-label=true]");
+      let scrollShadow = scrollShadowRef.current;
+      if (selectedItem && scrollShadow && selectedItem.parentElement) {
+        let scrollShadowRect = scrollShadow == null ? void 0 : scrollShadow.getBoundingClientRect();
+        let scrollShadowHeight = scrollShadowRect.height;
+        scrollShadow.scrollTop = selectedItem.parentElement.offsetTop - scrollShadowHeight / 2 + selectedItem.parentElement.clientHeight / 2;
+        state.selectionManager.setFocusedKey(state.selectedKey);
+      }
     }
-    state.selectionManager.setFocusedKey(key);
-  }, [state.collection, state.disabledKeys]);
+  }, [state.isOpen, disableAnimation]);
   (0, import_react.useEffect)(() => {
     if (isOpen) {
       if (popoverRef.current && inputWrapperRef.current) {
@@ -340,6 +359,7 @@ function useAutocomplete(originalProps) {
           )
         })
       },
+      shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
       // when the popover is open, the focus should be on input instead of dialog
       // therefore, we skip dialog focus here
       disableDialogFocus: true

package/dist/index.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   autocomplete_default
-} from "./chunk-TVVBPDQE.mjs";
+} from "./chunk-R4R544ZH.mjs";
 import {
   useAutocomplete
-} from "./chunk-7QAGQGGG.mjs";
+} from "./chunk-ORFKRCF3.mjs";
 
 // src/index.ts
 import { ListboxItem, ListboxSection } from "@heroui/listbox";

package/dist/use-autocomplete.d.mts

@@ -132,77 +132,77 @@ declare function useAutocomplete<T extends object>(originalProps: UseAutocomplet
     slots: {
         base: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listboxWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listbox: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         popoverContent: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         endContentWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         clearButton: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         selectorButton: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {
         base: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listboxWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listbox: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         popoverContent: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         endContentWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         clearButton: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         selectorButton: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {};
-    classNames: SlotsToClasses<"base" | "listboxWrapper" | "listbox" | "popoverContent" | "endContentWrapper" | "selectorButton" | "clearButton"> | undefined;
+    classNames: SlotsToClasses<"base" | "clearButton" | "listbox" | "listboxWrapper" | "popoverContent" | "endContentWrapper" | "selectorButton"> | undefined;
     isLoading: boolean | undefined;
     clearIcon: ReactNode;
     isOpen: boolean;

package/dist/use-autocomplete.d.ts

@@ -132,77 +132,77 @@ declare function useAutocomplete<T extends object>(originalProps: UseAutocomplet
     slots: {
         base: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listboxWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listbox: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         popoverContent: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         endContentWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         clearButton: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         selectorButton: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {
         base: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listboxWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listbox: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         popoverContent: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         endContentWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         clearButton: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         selectorButton: (slotProps?: ({
             isClearable?: boolean | undefined;
-            disableSelectorIconRotation?: boolean | undefined;
             disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {};
-    classNames: SlotsToClasses<"base" | "listboxWrapper" | "listbox" | "popoverContent" | "endContentWrapper" | "selectorButton" | "clearButton"> | undefined;
+    classNames: SlotsToClasses<"base" | "clearButton" | "listbox" | "listboxWrapper" | "popoverContent" | "endContentWrapper" | "selectorButton"> | undefined;
     isLoading: boolean | undefined;
     clearIcon: ReactNode;
     isOpen: boolean;

package/dist/use-autocomplete.js

@@ -35,6 +35,7 @@ var import_shared_utils = require("@heroui/shared-utils");
 var import_utils = require("@react-aria/utils");
 var import_combobox2 = require("@react-aria/combobox");
 var import_form = require("@heroui/form");
+var import_aria_utils = require("@heroui/aria-utils");
 function useAutocomplete(originalProps) {
   var _a, _b, _c, _d, _e;
   const globalContext = (0, import_system.useProviderContext)();
@@ -204,12 +205,30 @@ function useAutocomplete(originalProps) {
     }
   }, [inputRef.current]);
   (0, import_react.useEffect)(() => {
-    let key = state.collection.getFirstKey();
-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
+    let keyToFocus;
+    if (state.selectedKey !== null && state.collection.getItem(state.selectedKey) && !state.disabledKeys.has(state.selectedKey)) {
+      keyToFocus = state.selectedKey;
+    } else {
+      let firstAvailableKey = state.collection.getFirstKey();
+      while (firstAvailableKey && state.disabledKeys.has(firstAvailableKey)) {
+        firstAvailableKey = state.collection.getKeyAfter(firstAvailableKey);
+      }
+      keyToFocus = firstAvailableKey;
+    }
+    state.selectionManager.setFocusedKey(keyToFocus);
+  }, [state.collection, state.disabledKeys, state.selectedKey]);
+  (0, import_react.useEffect)(() => {
+    if (state.isOpen && popoverRef.current && listBoxRef.current) {
+      let selectedItem = listBoxRef.current.querySelector("[aria-selected=true] [data-label=true]");
+      let scrollShadow = scrollShadowRef.current;
+      if (selectedItem && scrollShadow && selectedItem.parentElement) {
+        let scrollShadowRect = scrollShadow == null ? void 0 : scrollShadow.getBoundingClientRect();
+        let scrollShadowHeight = scrollShadowRect.height;
+        scrollShadow.scrollTop = selectedItem.parentElement.offsetTop - scrollShadowHeight / 2 + selectedItem.parentElement.clientHeight / 2;
+        state.selectionManager.setFocusedKey(state.selectedKey);
+      }
     }
-    state.selectionManager.setFocusedKey(key);
-  }, [state.collection, state.disabledKeys]);
+  }, [state.isOpen, disableAnimation]);
   (0, import_react.useEffect)(() => {
     if (isOpen) {
       if (popoverRef.current && inputWrapperRef.current) {
@@ -324,6 +343,7 @@ function useAutocomplete(originalProps) {
           )
         })
       },
+      shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
       // when the popover is open, the focus should be on input instead of dialog
       // therefore, we skip dialog focus here
       disableDialogFocus: true

package/dist/use-autocomplete.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   useAutocomplete
-} from "./chunk-7QAGQGGG.mjs";
+} from "./chunk-ORFKRCF3.mjs";
 export {
   useAutocomplete
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/autocomplete",
-  "version": "2.3.21-beta.3",
+  "version": "2.3.21",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"
@@ -25,8 +25,8 @@
     "url": "https://github.com/heroui-inc/heroui/issues"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.16-beta.0",
-    "@heroui/theme": ">=2.4.16-beta.0",
+    "@heroui/system": ">=2.4.7",
+    "@heroui/theme": ">=2.4.6",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0"
@@ -41,19 +41,19 @@
     "@react-stately/combobox": "3.10.5",
     "@react-types/combobox": "3.13.5",
     "@react-types/shared": "3.29.1",
-    "@heroui/form": "2.1.19-beta.3",
-    "@heroui/aria-utils": "2.2.17-beta.3",
-    "@heroui/button": "2.2.20-beta.3",
-    "@heroui/input": "2.4.20-beta.3",
-    "@heroui/listbox": "2.3.19-beta.3",
-    "@heroui/popover": "2.3.20-beta.3",
-    "@heroui/react-utils": "2.1.11-beta.0",
-    "@heroui/scroll-shadow": "2.3.14-beta.2",
-    "@heroui/shared-icons": "2.1.8-beta.0",
-    "@heroui/shared-utils": "2.1.10-beta.0",
-    "@heroui/spinner": "2.2.17-beta.3",
-    "@heroui/use-aria-button": "2.2.14-beta.1",
-    "@heroui/use-safe-layout-effect": "2.1.8-beta.0"
+    "@heroui/aria-utils": "2.2.17",
+    "@heroui/button": "2.2.20",
+    "@heroui/input": "2.4.20",
+    "@heroui/listbox": "2.3.19",
+    "@heroui/popover": "2.3.20",
+    "@heroui/form": "2.1.19",
+    "@heroui/react-utils": "2.1.10",
+    "@heroui/scroll-shadow": "2.3.13",
+    "@heroui/shared-icons": "2.1.8",
+    "@heroui/shared-utils": "2.1.9",
+    "@heroui/spinner": "2.2.17",
+    "@heroui/use-aria-button": "2.2.14",
+    "@heroui/use-safe-layout-effect": "2.1.7"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",