v2.7.9 (#5342)

* fix(date-picker): error state (#5317) * fix(date-range-picker): fixed the error state in preset * Update giant-sloths-shop.md * Removed if statement * chore(date-picker): prettier --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com> * fix(theme): clear button in mobile (#5252) * fix(toast): fixed close button hover position * fix(input): fixed the clear button rendering on smaller devices * Delete .changeset/soft-spoons-march.md * Update input.ts * Undo unrelated toast changes * fix(toast): icons (#5246) * feat(shared-icons): add loading icon * fix(toast): icons * chore(toast): revise types for icons * chore(changeset): add changeset * refactor: migrate eslint to v9 (#5267) * refactor: migrate eslint to v9 * chore: lint * chore: update eslint command * chore: fix lint warnings * chore: separate lint and lint:fix * chore: exclude contentlayer generated code * fix(scripts): add missing await * fix(autocomplete): persist last selected item position (#5286) * refactor(select): remove unnecessary code * fix(autocomplete): persist last selected item position * chore(changeset): add changeset * chore(deps): bump framer-motion version (#5287) * chore(deps): bump framer-motion version * fix: typing issues * chore(changeset): add changeset --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * chore(docs): supplement onAction & selectionBehavior (#5289) * fix(autocomplete): ensure focused item matches selected item after filter, selection (#5290) * fix(autocomplete): ensure focused item matches selected item after filter, selection * chore: apply type and default value * chore: add perpose coment in updated code * test: add focuskey management testcode * docs: add changeset * docs: update changeset * chore: remove comment * fix: broken components in stories (#5291) * chore(switch): remove xl size * chore(docs): remove xl size * chore(system-rsc): remove xl size * chore(circular-progress): remove xl size * chore: undo * chore(deps): bump RA versions (#5310) * chore(deps): ra version bump * chore(changeset): add changeset * fix(scripts): incorrect docs path --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * chore(docs): update meta data (#5311) * docs(layout.tsx): added text-foreground (#5316) * feat(tabs): add click handling for tab items in tests and implementation (#3917) Co-authored-by: WK Wong <wingkwong.code@gmail.com> * fix issues in tabs examples (#2405) Co-authored-by: WK Wong <wingkwong.code@gmail.com> * chore(docs): add missing onValueChange in CheckboxGroup (#5332) * ci(changesets): version packages (#5323) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> --------- Co-authored-by: Vishv Salvi <82429084+Vishvsalvi@users.noreply.github.com> Co-authored-by: WK Wong <wingkwong.code@gmail.com> Co-authored-by: KumJungMin <37934668+KumJungMin@users.noreply.github.com> Co-authored-by: liaoyinglong <vigossliao@gmail.com> Co-authored-by: zhengjitf <zhengjitf@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2025-12-08 19:26:11 +00:00 · 2025-06-01 16:22:36 -03:00 · 2025-06-01 16:22:36 -03:00 · 9b6566f089
commit 9b6566f089
parent afda066da8
215 changed files with 7011 additions and 4638 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,25 +0,0 @@
-.now/*
-.next/*
-*.css
-.changeset
-dist
-esm/*
-public/*
-tests/*
-scripts/*
-*.config.js
-.DS_Store
-node_modules
-coverage
-.next
-build
-!.storybook
-/**/.storybook/**
-!.commitlintrc.cjs
-!.lintstagedrc.cjs
-!jest.config.js
-!plopfile.js
-!react-shim.js
-!tsup.config.ts
-apps/docs/preinstall.js
-apps/docs/next-redirect.js
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,93 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/eslintrc.json",
-  "env": {
-    "browser": false,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:prettier/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "plugins": ["react", "unused-imports", "import", "@typescript-eslint", "jsx-a11y", "prettier"],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "no-console": "warn",
-    "react/prop-types": "off",
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off",
-    "react-hooks/exhaustive-deps": "off",
-    "jsx-a11y/click-events-have-key-events": "warn",
-    "jsx-a11y/interactive-supports-focus": "warn",
-    "prettier/prettier": "warn",
-    "no-unused-vars": "off",
-    "unused-imports/no-unused-vars": "off",
-    "unused-imports/no-unused-imports": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        "args": "after-used",
-        "ignoreRestSiblings": false,
-        "argsIgnorePattern": "^_.*?$"
-      }
-    ],
-    "import/order": [
-      "warn",
-      {
-        "groups": [
-          "type",
-          "builtin",
-          "object",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index"
-        ],
-        "pathGroups": [
-          {
-            "pattern": "~/**",
-            "group": "external",
-            "position": "after"
-          }
-        ],
-        "newlines-between": "always"
-      }
-    ],
-    "react/self-closing-comp": "warn",
-    "react/jsx-sort-props": [
-      "warn",
-      {
-        "callbacksLast": true,
-        "shorthandFirst": true,
-        "noSortAlphabetically": false,
-        "reservedFirst": true
-      }
-    ],
-    "padding-line-between-statements": [
-      "warn",
-      {"blankLine": "always", "prev": "*", "next": "return"},
-      {"blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
-      {
-        "blankLine": "any",
-        "prev": ["const", "let", "var"],
-        "next": ["const", "let", "var"]
-      }
-    ],
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"]
-  }
-}
--- a/.lintstagedrc.cjs
+++ b/.lintstagedrc.cjs
@ -16,7 +16,7 @@ module.exports = {
  "**/*.{js,ts,jsx,tsx}": async (files) => {
    const filesToLint = await removeIgnoredFiles(files);

-    return [`eslint -c .eslintrc.json --max-warnings=0 --fix ${filesToLint}`];
+    return [`eslint --max-warnings=0 --fix ${filesToLint}`];
  },
  "**/*.css": async (files) => {
    const filesToLint = await removeIgnoredFiles(files);
--- a/apps/docs/app/examples/autocomplete/async-filtering/page.tsx
+++ b/apps/docs/app/examples/autocomplete/async-filtering/page.tsx
@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 "use client";

 import * as React from "react";
--- a/apps/docs/app/examples/table/custom-styles/page.tsx
+++ b/apps/docs/app/examples/table/custom-styles/page.tsx
@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-onchange */
 "use client";

 import {
--- a/apps/docs/app/examples/table/use-case/page.tsx
+++ b/apps/docs/app/examples/table/use-case/page.tsx
@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-onchange */
 "use client";

 import {
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@ -75,7 +75,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
      <head />
      <body
        className={clsx(
-          "min-h-screen bg-background font-sans antialiased",
+          "min-h-screen text-foreground bg-background font-sans antialiased",
          fonts.sans.variable,
          fonts.mono.variable,
        )}
--- a/apps/docs/components/ads/carbon-ad/carbon-ad.tsx
+++ b/apps/docs/components/ads/carbon-ad/carbon-ad.tsx
@ -92,7 +92,7 @@ export const CarbonAd: React.FC<unknown> = () => {
              setShowEthicalAds(true);
            }
          });
-        } catch (error) {
+        } catch {
          loadCarbonAds();
        }
      } else {
--- a/apps/docs/components/ads/carbon-ad/carbon-optimize.js
+++ b/apps/docs/components/ads/carbon-ad/carbon-optimize.js
@ -47,7 +47,6 @@ export default {

    if (!document.hidden) {
      if (typeof _carbonads !== "undefined" && isElementInViewport("#carbonads")) {
-        // eslint-disable-next-line no-undef
        _carbonads.refresh();
      }
    }
--- a/apps/docs/components/blog/video-in-view.tsx
+++ b/apps/docs/components/blog/video-in-view.tsx
@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/media-has-caption */
 "use client";

 import {useInView} from "framer-motion";
--- a/apps/docs/components/cmdk.tsx
+++ b/apps/docs/components/cmdk.tsx
@ -210,7 +210,7 @@ export const Cmdk: FC<{}> = () => {
    [query],
  );

-  const items = !isEmpty(results) ? results : recentSearches ?? [];
+  const items = !isEmpty(results) ? results : (recentSearches ?? []);

  // Toggle the menu when ⌘K / CTRL K is pressed
  useEffect(() => {
--- a/apps/docs/components/docs/components/code-demo/code-demo.tsx
+++ b/apps/docs/components/docs/components/code-demo/code-demo.tsx
@ -19,14 +19,14 @@ const DynamicReactLiveDemo = dynamic(
  () => import("./react-live-demo").then((m) => m.ReactLiveDemo),
  {
    ssr: false,
-    // eslint-disable-next-line react/display-name
+
    loading: () => <Skeleton className="w-full h-24 rounded-xl" />,
  },
 );

 const DynamicSandpack = dynamic(() => import("../../../sandpack").then((m) => m.Sandpack), {
  ssr: false,
-  // eslint-disable-next-line react/display-name
+
  loading: () => <Skeleton className="w-full h-32 rounded-xl" />,
 });

--- a/apps/docs/components/docs/components/code-demo/parse-dependencies.ts
+++ b/apps/docs/components/docs/components/code-demo/parse-dependencies.ts
@ -52,6 +52,6 @@ export const parseDependencies = (content: string) => {
 };

 const fixedVersions = {
-  "@internationalized/date": "3.8.0",
-  "@react-aria/i18n": "3.12.8",
+  "@internationalized/date": "3.8.1",
+  "@react-aria/i18n": "3.12.9",
 };
--- a/apps/docs/components/marketing/a11y-otb.tsx
+++ b/apps/docs/components/marketing/a11y-otb.tsx
@ -1,6 +1,5 @@
 "use client";

-/* eslint-disable react/display-name */
 import {
  Button,
  Image,
--- a/apps/docs/components/marketing/custom-themes/custom-themes.tsx
+++ b/apps/docs/components/marketing/custom-themes/custom-themes.tsx
@ -1,6 +1,5 @@
 "use client";

-/* eslint-disable react/display-name */
 import {useMemo, useState} from "react";
 import {Tabs, Tab, Card, CardBody, Image, Button, RadioGroup, Radio} from "@heroui/react";
 import NextLink from "next/link";
--- a/apps/docs/components/marketing/customization.tsx
+++ b/apps/docs/components/marketing/customization.tsx
@ -1,6 +1,5 @@
 "use client";

-/* eslint-disable react/display-name */
 import {Button, Link} from "@heroui/react";
 import NextLink from "next/link";

--- a/apps/docs/components/marketing/dark-mode.tsx
+++ b/apps/docs/components/marketing/dark-mode.tsx
@ -1,6 +1,5 @@
 "use client";

-/* eslint-disable react/display-name */
 import {Code, Button, Tooltip} from "@heroui/react";
 import {useState} from "react";
 import NextLink from "next/link";
--- a/apps/docs/components/marketing/last-but-not-least.tsx
+++ b/apps/docs/components/marketing/last-but-not-least.tsx
@ -1,5 +1,3 @@
-/* eslint-disable react/display-name */
-
 import {title, subtitle, titleWrapper, sectionWrapper} from "@/components/primitives";
 import {FeaturesGrid} from "@/components/marketing/features-grid";
 import landingContent from "@/content/landing";
--- a/apps/docs/components/marketing/support.tsx
+++ b/apps/docs/components/marketing/support.tsx
@ -9,7 +9,7 @@ async function getData() {
    return {
      sponsors,
    };
-  } catch (error) {
+  } catch {
    throw new Error("Failed to fetch data");
  }
 }
--- a/apps/docs/components/mdx-components.tsx
+++ b/apps/docs/components/mdx-components.tsx
@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import {clsx} from "@heroui/shared-utils";
 import * as Components from "@heroui/react";
 import {Language} from "prism-react-renderer";
--- a/apps/docs/components/sandpack/use-sandpack.ts
+++ b/apps/docs/components/sandpack/use-sandpack.ts
@ -77,7 +77,7 @@ export const useSandpack = ({
  }, {});

  let dependencies = {
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
    "@heroui/react": "latest",
  };

@ -150,7 +150,7 @@ export const useSandpack = ({

  // const dependencies = useMemo(() => {
  //   let deps = {
-  //     "framer-motion": "11.9.0",
+  //     "framer-motion": "11.18.2",
  //   };

  //   if (hasComponents) {
--- a/apps/docs/config/github-info.json
+++ b/apps/docs/config/github-info.json
@ -1,6 +1,6 @@
 {
-  "stars": { "raw": 23646, "formatted": "23.6K" },
-  "forks": 1706,
+  "stars": { "raw": 24238, "formatted": "24.2K" },
+  "forks": 1769,
  "subscribers": 88,
-  "openIssues": 324
+  "openIssues": 346
 }
--- a/apps/docs/config/search-meta.json
+++ b/apps/docs/config/search-meta.json
--- a/apps/docs/content/docs/components/checkbox-group.mdx
+++ b/apps/docs/content/docs/components/checkbox-group.mdx
@ -233,6 +233,12 @@ In case you need to customize the checkbox even further, you can use the `useChe
      type: "(value: string[]) => void",
      description: "Handler that is called when the value changes.",
      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(value: T) => void",
+      description: "Handler that is called when the element's selection state changes.",
+      default: "-"
    }
  ]}
 />
--- a/apps/docs/content/docs/components/date-input.mdx
+++ b/apps/docs/content/docs/components/date-input.mdx
@ -104,9 +104,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0",
-    yarn: "yarn add @internationalized/date@3.8.0",
-    pnpm: "pnpm add @internationalized/date@3.8.0",
+    npm: "npm install @internationalized/date@3.8.1",
+    yarn: "yarn add @internationalized/date@3.8.1",
+    pnpm: "pnpm add @internationalized/date@3.8.1",
  }}
 />

@ -129,9 +129,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

@ -153,9 +153,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0",
-    yarn: "yarn add @internationalized/date@3.8.0",
-    pnpm: "pnpm add @internationalized/date@3.8.0",
+    npm: "npm install @internationalized/date@3.8.1",
+    yarn: "yarn add @internationalized/date@3.8.1",
+    pnpm: "pnpm add @internationalized/date@3.8.1",
  }}
 />

@ -177,9 +177,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

@ -200,9 +200,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0",
-    yarn: "yarn add @internationalized/date@3.8.0",
-    pnpm: "pnpm add @internationalized/date@3.8.0",
+    npm: "npm install @internationalized/date@3.8.1",
+    yarn: "yarn add @internationalized/date@3.8.1",
+    pnpm: "pnpm add @internationalized/date@3.8.1",
  }}
 />

@ -223,9 +223,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0",
-    yarn: "yarn add @internationalized/date@3.8.0",
-    pnpm: "pnpm add @internationalized/date@3.8.0",
+    npm: "npm install @internationalized/date@3.8.1",
+    yarn: "yarn add @internationalized/date@3.8.1",
+    pnpm: "pnpm add @internationalized/date@3.8.1",
  }}
 />

--- a/apps/docs/content/docs/components/date-picker.mdx
+++ b/apps/docs/content/docs/components/date-picker.mdx
@ -119,9 +119,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0",
-    yarn: "yarn add @internationalized/date@3.8.0",
-    pnpm: "pnpm add @internationalized/date@3.8.0",
+    npm: "npm install @internationalized/date@3.8.1",
+    yarn: "yarn add @internationalized/date@3.8.1",
+    pnpm: "pnpm add @internationalized/date@3.8.1",
  }}
 />

@ -144,9 +144,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

@ -168,9 +168,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0",
-    yarn: "yarn add @internationalized/date@3.8.0",
-    pnpm: "pnpm add @internationalized/date@3.8.0",
+    npm: "npm install @internationalized/date@3.8.1",
+    yarn: "yarn add @internationalized/date@3.8.1",
+    pnpm: "pnpm add @internationalized/date@3.8.1",
  }}
 />

@ -192,9 +192,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

@ -214,9 +214,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

@ -252,9 +252,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

--- a/apps/docs/content/docs/components/date-range-picker.mdx
+++ b/apps/docs/content/docs/components/date-range-picker.mdx
@ -142,9 +142,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0",
-    yarn: "yarn add @internationalized/date@3.8.0",
-    pnpm: "pnpm add @internationalized/date@3.8.0",
+    npm: "npm install @internationalized/date@3.8.1",
+    yarn: "yarn add @internationalized/date@3.8.1",
+    pnpm: "pnpm add @internationalized/date@3.8.1",
  }}
 />

@ -167,9 +167,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

@ -191,9 +191,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0",
-    yarn: "yarn add @internationalized/date@3.8.0",
-    pnpm: "pnpm add @internationalized/date@3.8.0",
+    npm: "npm install @internationalized/date@3.8.1",
+    yarn: "yarn add @internationalized/date@3.8.1",
+    pnpm: "pnpm add @internationalized/date@3.8.1",
  }}
 />

@ -215,9 +215,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

@ -237,9 +237,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

@ -262,9 +262,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

@ -282,9 +282,9 @@ in multiple formats into `ZonedDateTime` objects.

 <PackageManagers
  commands={{
-    npm: "npm install @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    yarn: "yarn add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
-    pnpm: "pnpm add @internationalized/date@3.8.0 @react-aria/i18n@3.12.8",
+    npm: "npm install @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    yarn: "yarn add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
+    pnpm: "pnpm add @internationalized/date@3.8.1 @react-aria/i18n@3.12.9",
  }}
 />

--- a/apps/docs/content/docs/components/listbox.mdx
+++ b/apps/docs/content/docs/components/listbox.mdx
@ -375,6 +375,12 @@ You can customize the `Listbox` items style by using the `itemClasses` prop and
      description: "Whether to disable the animation of the listbox items.",
      default: "false"
    },
+    {
+      attribute: "selectionBehavior",
+      type: "'toggle' | 'replace'",
+      description: "How multiple selection should behave in the collection.",
+      default: "toggle"
+    },
    {
      attribute: "classNames",
      type: "Partial<Record<\"base\" | \"list\" | \"emptyContent\", string>>",
@ -397,7 +403,7 @@ You can customize the `Listbox` items style by using the `itemClasses` prop and
    {
      attribute: "onAction",
      type: "(key: React.Key) => void",
-      description: "Handler that is called when an item is selected.",
+      description: "Handler that is called when a user performs an action on an item. The exact user event depends on the collection's selectionBehavior prop and the interaction modality.",
      default: "-"
    },
    {
--- a/apps/docs/content/docs/components/tabs.mdx
+++ b/apps/docs/content/docs/components/tabs.mdx
@ -124,7 +124,7 @@ function ExampleClientRouterWithTabs() {

  return (
    <Tabs aria-label="Options" selectedKey={pathname}>
-      <Tab key="photos" title="Photos" href="/photos">
+      <Tab key="/photos" title="Photos" href="/photos">
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@ -133,7 +133,7 @@ function ExampleClientRouterWithTabs() {
          </CardBody>
        </Card>
      </Tab>
-      <Tab key="music" title="Music" href="/music">
+      <Tab key="/music" title="Music" href="/music">
        <Card>
          <CardBody>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
@ -142,7 +142,7 @@ function ExampleClientRouterWithTabs() {
          </CardBody>
        </Card>
      </Tab>
-      <Tab key="videos" title="Videos" href="/videos">
+      <Tab key="/videos" title="Videos" href="/videos">
        <Card>
          <CardBody>
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
--- a/apps/docs/hooks/use-scroll-position.ts
+++ b/apps/docs/hooks/use-scroll-position.ts
@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import * as React from "react";

 export function useScrollPosition(ref: React.MutableRefObject<HTMLElement | null>) {
--- a/apps/docs/hooks/use-scroll-spy.ts
+++ b/apps/docs/hooks/use-scroll-spy.ts
@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import * as React from "react";

 export function useScrollSpy(selectors: string[], options?: IntersectionObserverInit) {
--- a/apps/docs/hooks/use-update-effect.ts
+++ b/apps/docs/hooks/use-update-effect.ts
@ -16,7 +16,6 @@ export const useUpdateEffect: typeof useEffect = (effect, deps) => {
      return effect();
    }
    effectCycleRef.current = true;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);

  useEffect(() => {
--- a/apps/docs/libs/github/utils.ts
+++ b/apps/docs/libs/github/utils.ts
@ -7,7 +7,7 @@ export interface GithubError extends Error {
 function getErrorText(res: Response) {
  try {
    return res.text();
-  } catch (err) {
+  } catch {
    return res.statusText;
  }
 }
--- a/apps/docs/libs/rehype-highlight-line.js
+++ b/apps/docs/libs/rehype-highlight-line.js
@ -20,7 +20,6 @@ const lineNumberify = function lineNumberify(ast, lineNum = 1) {
        const lines = node.value.split("\n");

        for (let i = 0; i < lines.length; i++) {
-          // eslint-disable-next-line no-plusplus
          if (i !== 0) ++lineNumber;
          if (i === lines.length - 1 && lines[i].length === 0) continue;
          result.nodes.push({
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@ -37,20 +37,20 @@
    "@heroui/use-is-mobile": "workspace:*",
    "@iconify/icons-solar": "1.2.3",
    "@iconify/react": "5.0.2",
-    "@internationalized/date": "3.8.0",
+    "@internationalized/date": "3.8.1",
    "@mapbox/rehype-prism": "^0.6.0",
    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/i18n": "3.12.8",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/selection": "3.24.0",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/i18n": "3.12.9",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/selection": "3.24.1",
    "@react-aria/ssr": "3.9.8",
-    "@react-aria/utils": "3.28.2",
-    "@react-aria/virtualizer": "4.1.4",
-    "@react-aria/visually-hidden": "3.8.22",
-    "@react-stately/data": "3.12.3",
-    "@react-stately/layout": "4.2.2",
-    "@react-stately/tree": "3.8.9",
+    "@react-aria/utils": "3.29.0",
+    "@react-aria/virtualizer": "4.1.5",
+    "@react-aria/visually-hidden": "3.8.23",
+    "@react-stately/data": "3.13.0",
+    "@react-stately/layout": "4.3.0",
+    "@react-stately/tree": "3.8.10",
    "@rehooks/local-storage": "^2.4.5",
    "@stackblitz/sdk": "^1.11.0",
    "@tanstack/react-virtual": "3.11.3",
@ -62,7 +62,7 @@
    "color2k": "2.0.3",
    "contentlayer2": "0.5.3",
    "date-fns": "4.1.0",
-    "framer-motion": "11.11.13",
+    "framer-motion": "11.18.2",
    "geist": "1.3.1",
    "github-slugger": "^2.0.0",
    "gray-matter": "^4.0.3",
@ -111,9 +111,9 @@
    "@docusaurus/utils": "2.0.0-beta.3",
    "@next/bundle-analyzer": "14.3.0-canary.43",
    "@next/env": "14.3.0-canary.43",
-    "@react-types/calendar": "3.7.0",
-    "@react-types/datepicker": "3.12.0",
-    "@react-types/shared": "3.29.0",
+    "@react-types/calendar": "3.7.1",
+    "@react-types/datepicker": "3.12.1",
+    "@react-types/shared": "3.29.1",
    "@tailwindcss/typography": "^0.5.9",
    "@types/canvas-confetti": "^1.4.2",
    "@types/marked": "^5.0.0",
--- a/apps/docs/scripts/build-sponsors.ts
+++ b/apps/docs/scripts/build-sponsors.ts
@ -48,7 +48,7 @@ async function build() {
  // make sure the sponsors directory exists
  try {
    await fs.access(sponsorsDir);
-  } catch (error) {
+  } catch {
    await fs.mkdir(sponsorsDir, { recursive: true });
  }
  await Promise.all([buildSponsors()])
--- a/apps/docs/scripts/update-github-info.ts
+++ b/apps/docs/scripts/update-github-info.ts
@ -35,7 +35,7 @@ async function getGithubInfo() {
    };

    // Format JSON with prettier
-    const formattedJson = prettier.format(JSON.stringify(githubInfo), {
+    const formattedJson = await prettier.format(JSON.stringify(githubInfo), {
      parser: 'json',
      printWidth: 80,
      tabWidth: 2,
--- a/apps/docs/scripts/update-search-meta.ts
+++ b/apps/docs/scripts/update-search-meta.ts
@ -101,7 +101,7 @@ async function getSearchMeta(saveMode: "algolia" | "local" = "local") {
      try {
        result = await getMDXMeta(file);
        json.push(...result);
-      } catch (error) {}
+      } catch {}
    }

    if (saveMode === "local") {
--- a/apps/docs/utils/get-sponsors.ts
+++ b/apps/docs/utils/get-sponsors.ts
@ -20,7 +20,7 @@ export const getSponsors = async () => {
    );

    return sponsors as Sponsor[];
-  } catch (error) {
+  } catch {
    return __PROD__ ? [] : mockData;
  }
 };
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,160 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import react from "eslint-plugin-react";
+import unusedImports from "eslint-plugin-unused-imports";
+import _import from "eslint-plugin-import";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import jsxA11Y from "eslint-plugin-jsx-a11y";
+import prettier from "eslint-plugin-prettier";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default defineConfig([globalIgnores([
+    ".now/*",
+    ".next/*",
+    "**/*.css",
+    "**/.changeset",
+    "**/dist",
+    "esm/*",
+    "public/*",
+    "tests/*",
+    "scripts/*",
+    "**/*.config.js",
+    "**/.DS_Store",
+    "**/node_modules",
+    "**/coverage",
+    "**/.next",
+    "**/build",
+    "!**/.storybook",
+    "**/.storybook/**/*",
+    "!**/.commitlintrc.cjs",
+    "!**/.lintstagedrc.cjs",
+    "!**/jest.config.js",
+    "!**/plopfile.js",
+    "!**/react-shim.js",
+    "!**/tsup.config.ts",
+    "apps/docs/preinstall.js",
+    "apps/docs/next-redirect.js",
+    "apps/docs/.contentlayer/**/*"
+]), {
+    extends: fixupConfigRules(compat.extends(
+        "plugin:react/recommended",
+        "plugin:prettier/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+    )),
+
+    plugins: {
+        react: fixupPluginRules(react),
+        "unused-imports": unusedImports,
+        import: fixupPluginRules(_import),
+        "@typescript-eslint": typescriptEslint,
+        "jsx-a11y": fixupPluginRules(jsxA11Y),
+        prettier: fixupPluginRules(prettier),
+    },
+
+    languageOptions: {
+        globals: {
+            ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, "off"])),
+            ...globals.node,
+        },
+
+        parser: tsParser,
+        ecmaVersion: 12,
+        sourceType: "module",
+
+        parserOptions: {
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+
+    files: [
+        "**/*.{ts,tsx,js,jsx}"
+    ],
+
+    rules: {
+        "no-console": "warn",
+        "react/prop-types": "off",
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off",
+        "react-hooks/exhaustive-deps": "off",
+        "jsx-a11y/click-events-have-key-events": "warn",
+        "jsx-a11y/interactive-supports-focus": "warn",
+        "prettier/prettier": "warn",
+        "no-unused-vars": "off",
+        "unused-imports/no-unused-vars": "off",
+        "unused-imports/no-unused-imports": "warn",
+
+        "@typescript-eslint/no-unused-vars": ["warn", {
+            args: "after-used",
+            ignoreRestSiblings: false,
+            argsIgnorePattern: "^_.*?$",
+        }],
+
+        "import/order": ["warn", {
+            groups: [
+                "type",
+                "builtin",
+                "object",
+                "external",
+                "internal",
+                "parent",
+                "sibling",
+                "index",
+            ],
+
+            pathGroups: [{
+                pattern: "~/**",
+                group: "external",
+                position: "after",
+            }],
+
+            "newlines-between": "always",
+        }],
+
+        "react/self-closing-comp": "warn",
+
+        "react/jsx-sort-props": ["warn", {
+            callbacksLast: true,
+            shorthandFirst: true,
+            noSortAlphabetically: false,
+            reservedFirst: true,
+        }],
+
+        "padding-line-between-statements": ["warn", {
+            blankLine: "always",
+            prev: "*",
+            next: "return",
+        }, {
+            blankLine: "always",
+            prev: ["const", "let", "var"],
+            next: "*",
+        }, {
+            blankLine: "any",
+            prev: ["const", "let", "var"],
+            next: ["const", "let", "var"],
+        }],
+
+        "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+    },
+}]);
--- a/package.json
+++ b/package.json
@ -24,11 +24,8 @@
    "test": "jest --verbose --config ./jest.config.js",
    "test:strict": "cross-env STRICT_MODE=true pnpm test",
    "typecheck": "turbo typecheck",
-    "lint": "pnpm lint:pkg && pnpm lint:docs",
-    "lint:pkg": "eslint -c .eslintrc.json ./packages/**/*.{ts,tsx}",
-    "lint:docs": "eslint -c .eslintrc.json ./apps/docs/**/*.{ts,tsx,js,jsx}",
-    "lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/*.{ts,tsx}",
-    "lint:docs-fix": "eslint --fix -c .eslintrc.json ./apps/docs/**/*.{ts,tsx,js,jsx}",
+    "lint": "eslint --max-warnings=0",
+    "lint:fix": "eslint --fix",
    "check:rap": "tsx scripts/check-rap-updates.ts",
    "fix:rap": "tsx scripts/fix-rap.ts",
    "format:check": "prettier --check packages/**/**/src --cache",
@ -66,9 +63,12 @@
    "@changesets/types": "6.0.0",
    "@commitlint/cli": "^17.2.0",
    "@commitlint/config-conventional": "^17.2.0",
+    "@eslint/compat": "^1.2.9",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.26.0",
    "@react-bootstrap/babel-preset": "^2.1.0",
-    "@react-types/link": "3.5.10",
-    "@react-types/shared": "3.27.0",
+    "@react-types/link": "3.6.1",
+    "@react-types/shared": "3.29.1",
    "@storybook/react": "^8.4.5",
    "@swc/core": "^1.3.35",
    "@swc/jest": "^0.2.24",
@ -81,33 +81,34 @@
    "@types/react": "^18.0.1",
    "@types/react-dom": "^18.0.0",
    "@types/shelljs": "^0.8.9",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/parser": "^8.31.1",
    "chalk": "^4.1.2",
    "commitlint-plugin-function-rules": "^1.7.1",
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3",
-    "eslint": "^7.29.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-config-react-app": "^6.0.0",
+    "eslint": "^9.26.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-config-react-app": "^7.0.1",
    "eslint-config-ts-lambdas": "^1.2.3",
-    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-import-resolver-typescript": "^4.3.4",
    "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^24.7.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
    "execa": "^5.1.1",
    "find-up": "^6.3.0",
    "fs-extra": "^10.0.0",
    "glob": "^8.0.3",
+    "globals": "^16.0.0",
    "graceful-fs": "^4.2.6",
    "gray-matter": "^4.0.3",
    "husky": "^8.0.1",
@ -121,9 +122,9 @@
    "p-iteration": "^1.1.8",
    "parcel": "^2.3.1",
    "plop": "3.1.1",
-    "prettier": "^2.2.1",
-    "prettier-eslint": "^12.0.0",
-    "prettier-eslint-cli": "^5.0.1",
+    "prettier": "^3.5.3",
+    "prettier-eslint": "^16.4.1",
+    "prettier-eslint-cli": "^8.0.1",
    "react": "18.3.0",
    "rimraf": "^3.0.2",
    "shelljs": "^0.8.4",
--- a/packages/components/accordion/CHANGELOG.md
+++ b/packages/components/accordion/CHANGELOG.md
@ -1,5 +1,21 @@
 # @heroui/accordion

+## 2.2.17
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- [#5287](https://github.com/heroui-inc/heroui/pull/5287) [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9) Thanks [@wingkwong](https://github.com/wingkwong)! - bump framer-motion version
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0), [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/shared-icons@2.1.8
+  - @heroui/use-aria-accordion@2.2.12
+  - @heroui/aria-utils@2.2.17
+  - @heroui/divider@2.2.14
+  - @heroui/dom-animation@2.1.9
+  - @heroui/framer-utils@2.1.16
+
 ## 2.2.16

 ### Patch Changes
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/accordion",
-  "version": "2.2.16",
+  "version": "2.2.17",
  "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
  "keywords": [
    "react",
@ -55,13 +55,13 @@
    "@heroui/divider": "workspace:*",
    "@heroui/use-aria-accordion": "workspace:*",
    "@heroui/dom-animation": "workspace:*",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/utils": "3.28.2",
-    "@react-stately/tree": "3.8.9",
-    "@react-aria/button": "3.13.0",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/utils": "3.29.0",
+    "@react-stately/tree": "3.8.10",
+    "@react-aria/button": "3.13.1",
    "@react-types/accordion": "3.0.0-alpha.26",
-    "@react-types/shared": "3.29.0"
+    "@react-types/shared": "3.29.1"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
@ -70,7 +70,7 @@
    "@heroui/avatar": "workspace:*",
    "@heroui/input": "workspace:*",
    "@heroui/test-utils": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
    "clean-package": "2.2.0",
    "react": "18.3.0",
    "react-dom": "18.3.0"
--- a/packages/components/accordion/src/base/accordion-item-base.tsx
+++ b/packages/components/accordion/src/base/accordion-item-base.tsx
@ -51,7 +51,7 @@ export interface Props<T extends object = {}>
  /**
   * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
   */
-  motionProps?: HTMLMotionProps<"section">;
+  motionProps?: Omit<HTMLMotionProps<"section">, "ref">;
  /**
   * Whether to keep the accordion content mounted when collapsed.
   * @default false
--- a/packages/components/alert/CHANGELOG.md
+++ b/packages/components/alert/CHANGELOG.md
@ -1,5 +1,15 @@
 # @heroui/alert

+## 2.2.20
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0), [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/shared-icons@2.1.8
+  - @heroui/button@2.2.20
+
 ## 2.2.19

 ### Patch Changes
--- a/packages/components/alert/package.json
+++ b/packages/components/alert/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/alert",
-  "version": "2.2.19",
+  "version": "2.2.20",
  "description": "Alerts are temporary notifications that provide concise feedback about an action or event.",
  "keywords": [
    "alert"
@ -48,7 +48,7 @@
    "@heroui/shared-icons": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
    "@react-stately/utils": "3.10.6",
-    "@react-aria/utils": "3.28.2",
+    "@react-aria/utils": "3.29.0",
    "@heroui/button": "workspace:*"
  },
  "devDependencies": {
--- a/packages/components/autocomplete/CHANGELOG.md
+++ b/packages/components/autocomplete/CHANGELOG.md
@ -1,5 +1,29 @@
 # @heroui/autocomplete

+## 2.3.21
+
+### Patch Changes
+
+- [#5290](https://github.com/heroui-inc/heroui/pull/5290) [`360b2e7`](https://github.com/heroui-inc/heroui/commit/360b2e77fdfa2688b96c01e1f96e2b8f918854fe) Thanks [@KumJungMin](https://github.com/KumJungMin)! - ensure focused item matches selected item after filter, selection (#5277)
+
+- [#5286](https://github.com/heroui-inc/heroui/pull/5286) [`74e4dec`](https://github.com/heroui-inc/heroui/commit/74e4deca9a5e24207076c9af3738dd1f4baecc09) Thanks [@wingkwong](https://github.com/wingkwong)! - persist last selected item position (#5282)
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- [#5287](https://github.com/heroui-inc/heroui/pull/5287) [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9) Thanks [@wingkwong](https://github.com/wingkwong)! - bump framer-motion version
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0), [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/shared-icons@2.1.8
+  - @heroui/use-aria-button@2.2.14
+  - @heroui/aria-utils@2.2.17
+  - @heroui/listbox@2.3.19
+  - @heroui/popover@2.3.20
+  - @heroui/button@2.2.20
+  - @heroui/input@2.4.20
+  - @heroui/form@2.1.19
+  - @heroui/scroll-shadow@2.3.13
+  - @heroui/spinner@2.2.17
+
 ## 2.3.20

 ### Patch Changes
--- a/packages/components/autocomplete/tests/autocomplete.test.tsx
+++ b/packages/components/autocomplete/tests/autocomplete.test.tsx
@ -940,3 +940,129 @@ describe("Autocomplete with React Hook Form", () => {
    expect(onSubmit).toHaveBeenCalledTimes(1);
  });
 });
+
+describe("focusedKey management with selected key", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  it("should set focusedKey to the first non-disabled item when selectedKey is null", async () => {
+    const wrapper = render(
+      <Autocomplete
+        aria-label="Favorite Animal"
+        data-testid="autocomplete"
+        disabledKeys={["penguin"]}
+        label="Favorite Animal"
+      >
+        <AutocompleteItem key="penguin" isDisabled>
+          Penguin
+        </AutocompleteItem>
+        <AutocompleteItem key="zebra">Zebra</AutocompleteItem>
+        <AutocompleteItem key="shark">Shark</AutocompleteItem>
+      </Autocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("autocomplete");
+
+    // open the select listbox
+    await user.click(autocomplete);
+
+    const options = wrapper.getAllByRole("option");
+
+    // first non-disabled item is zebra
+    const optionItem = options[1];
+
+    expect(optionItem).toHaveAttribute("data-focus", "true");
+  });
+
+  it("should set focusedKey to the item's key when an item is selected", async () => {
+    const wrapper = render(
+      <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
+        <AutocompleteItem key="penguin">Penguin</AutocompleteItem>
+        <AutocompleteItem key="zebra">Zebra</AutocompleteItem>
+        <AutocompleteItem key="shark">Shark</AutocompleteItem>
+      </Autocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("autocomplete");
+
+    // open the select listbox
+    await user.click(autocomplete);
+
+    // select the target item using keyboard
+    await user.keyboard("penguin");
+    await user.keyboard("{Enter}");
+    await user.click(autocomplete);
+
+    const options = wrapper.getAllByRole("option");
+    const optionItem = options[0];
+
+    expect(optionItem).toHaveAttribute("data-focus", "true");
+  });
+
+  it("should set focusedKey to the item's key when selectedKey prop is passed", async () => {
+    const wrapper = render(
+      <Autocomplete
+        aria-label="Favorite Animal"
+        data-testid="autocomplete"
+        label="Favorite Animal"
+        selectedKey="penguin"
+      >
+        <AutocompleteItem key="penguin">Penguin</AutocompleteItem>
+        <AutocompleteItem key="zebra">Zebra</AutocompleteItem>
+        <AutocompleteItem key="shark">Shark</AutocompleteItem>
+      </Autocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("autocomplete");
+
+    // open the select listbox
+    await user.click(autocomplete);
+
+    const options = wrapper.getAllByRole("option");
+    const optionItem = options[0];
+
+    expect(optionItem).toHaveAttribute("data-focus", "true");
+  });
+
+  it("should set focusedKey to the default item's key when using react-hook-form defaultValues", async () => {
+    const {result} = renderHook(() =>
+      useForm({
+        defaultValues: {
+          withDefaultValue: "zebra",
+          withoutDefaultValue: "",
+          requiredField: "",
+        },
+      }),
+    );
+
+    const {register} = result.current;
+
+    const wrapper = render(
+      <form>
+        <Autocomplete
+          {...register("withDefaultValue")}
+          aria-label="Favorite Animal"
+          data-testid="autocomplete"
+          label="Favorite Animal"
+        >
+          <AutocompleteItem key="penguin">Penguin</AutocompleteItem>
+          <AutocompleteItem key="zebra">Zebra</AutocompleteItem>
+          <AutocompleteItem key="shark">Shark</AutocompleteItem>
+        </Autocomplete>
+      </form>,
+    );
+
+    const autocomplete = wrapper.getByTestId("autocomplete");
+
+    // open the select listbox
+    await user.click(autocomplete);
+
+    const options = wrapper.getAllByRole("option");
+    const optionItem = options[1];
+
+    expect(optionItem).toHaveAttribute("data-focus", "true");
+  });
+});
--- a/packages/components/autocomplete/package.json
+++ b/packages/components/autocomplete/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/autocomplete",
-  "version": "2.3.20",
+  "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"
@ -54,15 +54,15 @@
    "@heroui/spinner": "workspace:*",
    "@heroui/use-aria-button": "workspace:*",
    "@heroui/use-safe-layout-effect": "workspace:*",
-    "@react-aria/combobox": "3.12.2",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/i18n": "3.12.8",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/utils": "3.28.2",
-    "@react-aria/visually-hidden": "3.8.22",
-    "@react-stately/combobox": "3.10.4",
-    "@react-types/combobox": "3.13.4",
-    "@react-types/shared": "3.29.0"
+    "@react-aria/combobox": "3.12.3",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/i18n": "3.12.9",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/utils": "3.29.0",
+    "@react-aria/visually-hidden": "3.8.23",
+    "@react-stately/combobox": "3.10.5",
+    "@react-types/combobox": "3.13.5",
+    "@react-types/shared": "3.29.1"
  },
  "devDependencies": {
    "@heroui/avatar": "workspace:*",
@ -72,9 +72,9 @@
    "@heroui/system": "workspace:*",
    "@heroui/theme": "workspace:*",
    "@heroui/use-infinite-scroll": "workspace:*",
-    "@react-stately/data": "3.12.3",
+    "@react-stately/data": "3.13.0",
    "clean-package": "2.2.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
    "react": "18.3.0",
    "react-dom": "18.3.0",
    "react-hook-form": "^7.51.3"
--- a/packages/components/autocomplete/src/use-autocomplete.ts
+++ b/packages/components/autocomplete/src/use-autocomplete.ts
@ -149,8 +149,8 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
    originalProps.disableClearable !== undefined
      ? !originalProps.disableClearable
      : originalProps.isReadOnly
-      ? false
-      : originalProps.isClearable;
+        ? false
+        : originalProps.isClearable;

  const {
    ref,
@ -339,15 +339,47 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
    }
  }, [inputRef.current]);

-  // focus first non-disabled item
+  // Ensure the focused item in the dropdown correctly reflects the
+  // selected key when the component mounts or relevant state changes.
  useEffect(() => {
-    let key = state.collection.getFirstKey();
+    let keyToFocus: React.Key | null;

-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
+    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(key);
-  }, [state.collection, state.disabledKeys]);
+    state.selectionManager.setFocusedKey(keyToFocus);
+  }, [state.collection, state.disabledKeys, state.selectedKey]);
+
+  // scroll the listbox to the selected item
+  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?.getBoundingClientRect();
+        let scrollShadowHeight = scrollShadowRect.height;
+
+        scrollShadow.scrollTop =
+          selectedItem.parentElement.offsetTop -
+          scrollShadowHeight / 2 +
+          selectedItem.parentElement.clientHeight / 2;
+
+        state.selectionManager.setFocusedKey(state.selectedKey);
+      }
+    }
+  }, [state.isOpen, disableAnimation]);

  useEffect(() => {
    if (isOpen) {
@ -403,7 +435,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
      className: slots.selectorButton({
        class: clsx(classNames?.selectorButton, slotsProps.selectorButtonProps?.className),
      }),
-    } as ButtonProps);
+    }) as ButtonProps;

  const getClearButtonProps = () =>
    ({
@ -426,7 +458,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
      className: slots.clearButton({
        class: clsx(classNames?.clearButton, slotsProps.clearButtonProps?.className),
      }),
-    } as ButtonProps);
+    }) as ButtonProps;

  // prevent use-input's useFormValidation hook from overwriting use-autocomplete's useFormValidation hook when there are uncommitted validation errors
  // see https://github.com/heroui-inc/heroui/pull/4452
@ -447,7 +479,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
          ? errorMessage({isInvalid, validationErrors, validationDetails})
          : errorMessage || validationErrors?.join(" "),
      onClick: chain(slotsProps.inputProps.onClick, otherProps.onClick),
-    } as unknown as InputProps);
+    }) as unknown as InputProps;

  const getListBoxProps = () => {
    // Use isVirtualized prop if defined, otherwise fallback to default behavior
--- a/packages/components/avatar/CHANGELOG.md
+++ b/packages/components/avatar/CHANGELOG.md
@ -1,5 +1,11 @@
 # @heroui/avatar

+## 2.2.16
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
 ## 2.2.15

 ### Patch Changes
--- a/packages/components/avatar/package.json
+++ b/packages/components/avatar/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/avatar",
-  "version": "2.2.15",
+  "version": "2.2.16",
  "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
  "keywords": [
    "avatar"
@ -43,9 +43,9 @@
    "@heroui/shared-utils": "workspace:*",
    "@heroui/react-utils": "workspace:*",
    "@heroui/use-image": "workspace:*",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/utils": "3.28.2"
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/utils": "3.29.0"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
--- a/packages/components/avatar/stories/avatar-group.stories.tsx
+++ b/packages/components/avatar/stories/avatar-group.stories.tsx
@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React from "react";
 import {Meta} from "@storybook/react";

--- a/packages/components/breadcrumbs/CHANGELOG.md
+++ b/packages/components/breadcrumbs/CHANGELOG.md
@ -1,5 +1,14 @@
 # @heroui/breadcrumbs

+## 2.2.16
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0)]:
+  - @heroui/shared-icons@2.1.8
+
 ## 2.2.15

 ### Patch Changes
--- a/packages/components/breadcrumbs/package.json
+++ b/packages/components/breadcrumbs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/breadcrumbs",
-  "version": "2.2.15",
+  "version": "2.2.16",
  "description": "Breadcrumbs display a hierarchy of links to the current page or resource in an application.",
  "keywords": [
    "breadcrumbs"
@ -43,11 +43,11 @@
    "@heroui/react-utils": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
    "@heroui/shared-icons": "workspace:*",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/breadcrumbs": "3.5.23",
-    "@react-aria/utils": "3.28.2",
-    "@react-types/breadcrumbs": "3.7.12",
-    "@react-types/shared": "3.29.0"
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/breadcrumbs": "3.5.24",
+    "@react-aria/utils": "3.29.0",
+    "@react-types/breadcrumbs": "3.7.13",
+    "@react-types/shared": "3.29.1"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
--- a/packages/components/button/CHANGELOG.md
+++ b/packages/components/button/CHANGELOG.md
@ -1,5 +1,18 @@
 # @heroui/button

+## 2.2.20
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- [#5287](https://github.com/heroui-inc/heroui/pull/5287) [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9) Thanks [@wingkwong](https://github.com/wingkwong)! - bump framer-motion version
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/use-aria-button@2.2.14
+  - @heroui/ripple@2.2.15
+  - @heroui/spinner@2.2.17
+
 ## 2.2.19

 ### Patch Changes
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/button",
-  "version": "2.2.19",
+  "version": "2.2.20",
  "description": "Buttons allow users to perform actions and choose with a single tap.",
  "keywords": [
    "button"
@ -46,18 +46,18 @@
    "@heroui/use-aria-button": "workspace:*",
    "@heroui/ripple": "workspace:*",
    "@heroui/spinner": "workspace:*",
-    "@react-aria/button": "3.13.0",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/utils": "3.28.2",
-    "@react-aria/focus": "3.20.2",
-    "@react-types/shared": "3.29.0",
-    "@react-types/button": "3.12.0"
+    "@react-aria/button": "3.13.1",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/utils": "3.29.0",
+    "@react-aria/focus": "3.20.3",
+    "@react-types/shared": "3.29.1",
+    "@react-types/button": "3.12.1"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
    "@heroui/system": "workspace:*",
    "@heroui/shared-icons": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
    "clean-package": "2.2.0",
    "react": "18.3.0",
    "react-dom": "18.3.0"
--- a/packages/components/calendar/CHANGELOG.md
+++ b/packages/components/calendar/CHANGELOG.md
@ -1,5 +1,20 @@
 # @heroui/calendar

+## 2.2.20
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- [#5287](https://github.com/heroui-inc/heroui/pull/5287) [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9) Thanks [@wingkwong](https://github.com/wingkwong)! - bump framer-motion version
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0), [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/shared-icons@2.1.8
+  - @heroui/use-aria-button@2.2.14
+  - @heroui/button@2.2.20
+  - @heroui/dom-animation@2.1.9
+  - @heroui/framer-utils@2.1.16
+
 ## 2.2.19

 ### Patch Changes
--- a/packages/components/calendar/tests/calendar.test.tsx
+++ b/packages/components/calendar/tests/calendar.test.tsx
@ -96,7 +96,6 @@ describe("Calendar", () => {
    });

    it("should focus the selected date if autoFocus is set", () => {
-      // eslint-disable-next-line jsx-a11y/no-autofocus
      const wrapper = render(<Calendar autoFocus value={new CalendarDate(2024, 3, 31)} />);

      const selectedDate = wrapper.getByLabelText("Selected", {exact: false});
--- a/packages/components/calendar/package.json
+++ b/packages/components/calendar/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/calendar",
-  "version": "2.2.19",
+  "version": "2.2.20",
  "description": "A calendar displays one or more date grids and allows users to select a single date.",
  "keywords": [
    "calendar"
@ -48,18 +48,18 @@
    "@heroui/use-aria-button": "workspace:*",
    "@heroui/button": "workspace:*",
    "@heroui/dom-animation": "workspace:*",
-    "@internationalized/date": "3.8.0",
-    "@react-aria/calendar": "3.8.0",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/i18n": "3.12.8",
-    "@react-stately/calendar": "3.8.0",
-    "@react-types/button": "3.12.0",
-    "@react-aria/visually-hidden": "3.8.22",
-    "@react-aria/utils": "3.28.2",
+    "@internationalized/date": "3.8.1",
+    "@react-aria/calendar": "3.8.1",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/i18n": "3.12.9",
+    "@react-stately/calendar": "3.8.1",
+    "@react-types/button": "3.12.1",
+    "@react-aria/visually-hidden": "3.8.23",
+    "@react-aria/utils": "3.29.0",
    "@react-stately/utils": "3.10.6",
-    "@react-types/calendar": "3.7.0",
-    "@react-aria/interactions": "3.25.0",
-    "@react-types/shared": "3.29.0",
+    "@react-types/calendar": "3.7.1",
+    "@react-aria/interactions": "3.25.1",
+    "@react-types/shared": "3.29.1",
    "scroll-into-view-if-needed": "3.0.10",
    "@types/lodash.debounce": "^4.0.7"
  },
@ -68,7 +68,7 @@
    "@heroui/theme": "workspace:*",
    "@heroui/radio": "workspace:*",
    "@heroui/test-utils": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
    "clean-package": "2.2.0",
    "react": "18.3.0",
    "react-dom": "18.3.0"
--- a/packages/components/card/CHANGELOG.md
+++ b/packages/components/card/CHANGELOG.md
@ -1,5 +1,17 @@
 # @heroui/card

+## 2.2.19
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- [#5287](https://github.com/heroui-inc/heroui/pull/5287) [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9) Thanks [@wingkwong](https://github.com/wingkwong)! - bump framer-motion version
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/use-aria-button@2.2.14
+  - @heroui/ripple@2.2.15
+
 ## 2.2.18

 ### Patch Changes
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/card",
-  "version": "2.2.18",
+  "version": "2.2.19",
  "description": "Card is a container for text, photos, and actions in the context of a single subject.",
  "keywords": [
    "card"
@ -45,11 +45,11 @@
    "@heroui/react-utils": "workspace:*",
    "@heroui/use-aria-button": "workspace:*",
    "@heroui/ripple": "workspace:*",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/utils": "3.28.2",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/button": "3.13.0",
-    "@react-types/shared": "3.29.0"
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/utils": "3.29.0",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/button": "3.13.1",
+    "@react-types/shared": "3.29.1"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
@ -59,7 +59,7 @@
    "@heroui/button": "workspace:*",
    "@heroui/avatar": "workspace:*",
    "@heroui/image": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
    "clean-package": "2.2.0",
    "react": "18.3.0",
    "react-dom": "18.3.0"
--- a/packages/components/card/stories/card.stories.tsx
+++ b/packages/components/card/stories/card.stories.tsx
@ -329,7 +329,6 @@ const PrimaryActionTemplate = (args: CardProps) => {
  return (
    <div className="gap-2 grid grid-cols-2 sm:grid-cols-4">
      {list.map((item, index) => (
-        // eslint-disable-next-line no-console
        <Card {...args} key={index} isPressable onPress={() => handlePress(item)}>
          <CardBody className="p-0">
            <img
@ -352,12 +351,10 @@ const PressableTemplate = (args: CardProps) => {
  // Both events should be fired when clicking on the card

  const handlePress = () => {
-    // eslint-disable-next-line no-console
    alert("card pressed");
  };

  const onClick = () => {
-    // eslint-disable-next-line no-console
    alert("card clicked");
  };

--- a/packages/components/checkbox/CHANGELOG.md
+++ b/packages/components/checkbox/CHANGELOG.md
@ -1,5 +1,14 @@
 # @heroui/checkbox

+## 2.3.19
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/form@2.1.19
+
 ## 2.3.18

 ### Patch Changes
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/checkbox",
-  "version": "2.3.18",
+  "version": "2.3.19",
  "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
  "keywords": [
    "checkbox"
@ -45,15 +45,15 @@
    "@heroui/shared-utils": "workspace:*",
    "@heroui/use-callback-ref": "workspace:*",
    "@heroui/use-safe-layout-effect": "workspace:*",
-    "@react-aria/checkbox": "3.15.4",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/utils": "3.28.2",
-    "@react-aria/visually-hidden": "3.8.22",
-    "@react-stately/checkbox": "3.6.13",
-    "@react-stately/toggle": "3.8.3",
-    "@react-types/checkbox": "3.9.3",
-    "@react-types/shared": "3.29.0"
+    "@react-aria/checkbox": "3.15.5",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/utils": "3.29.0",
+    "@react-aria/visually-hidden": "3.8.23",
+    "@react-stately/checkbox": "3.6.14",
+    "@react-stately/toggle": "3.8.4",
+    "@react-types/checkbox": "3.9.4",
+    "@react-types/shared": "3.29.1"
  },
  "devDependencies": {
    "@heroui/chip": "workspace:*",
--- a/packages/components/checkbox/src/use-checkbox.ts
+++ b/packages/components/checkbox/src/use-checkbox.ts
@ -99,11 +99,11 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
    validationState,
    isInvalid: isInvalidProp = validationState
      ? validationState === "invalid"
-      : groupContext?.isInvalid ?? false,
+      : (groupContext?.isInvalid ?? false),
    isIndeterminate = false,
    validationBehavior = isInGroup
      ? groupContext.validationBehavior
-      : formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
+      : (formValidationBehavior ?? globalContext?.validationBehavior ?? "native"),
    defaultSelected,
    classNames,
    className,
@ -330,7 +330,7 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
        isIndeterminate,
        disableAnimation,
        className: slots.icon({class: classNames?.icon}),
-      } as CheckboxIconProps),
+      }) as CheckboxIconProps,
    [slots, classNames?.icon, isSelected, isIndeterminate, disableAnimation],
  );

--- a/packages/components/checkbox/stories/checkbox.stories.tsx
+++ b/packages/components/checkbox/stories/checkbox.stories.tsx
@ -254,7 +254,7 @@ export const WithReactHookForm = {
 export const CustomIconFunction = {
  args: {
    ...defaultProps,
-    // eslint-disable-next-line react/display-name
+
    icon: (props: CheckboxIconProps) => <CloseIcon {...props} />,
  },
 };
--- a/packages/components/chip/CHANGELOG.md
+++ b/packages/components/chip/CHANGELOG.md
@ -1,5 +1,14 @@
 # @heroui/chip

+## 2.2.16
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0)]:
+  - @heroui/shared-icons@2.1.8
+
 ## 2.2.15

 ### Patch Changes
--- a/packages/components/chip/package.json
+++ b/packages/components/chip/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/chip",
-  "version": "2.2.15",
+  "version": "2.2.16",
  "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
  "keywords": [
    "chip"
@ -43,10 +43,10 @@
    "@heroui/shared-icons": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
    "@heroui/react-utils": "workspace:*",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/utils": "3.28.2",
-    "@react-types/checkbox": "3.9.3"
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/utils": "3.29.0",
+    "@react-types/checkbox": "3.9.4"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
--- a/packages/components/code/CHANGELOG.md
+++ b/packages/components/code/CHANGELOG.md
@ -1,5 +1,12 @@
 # @heroui/code

+## 2.2.15
+
+### Patch Changes
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/system-rsc@2.3.14
+
 ## 2.2.14

 ### Patch Changes
--- a/packages/components/code/package.json
+++ b/packages/components/code/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/code",
-  "version": "2.2.14",
+  "version": "2.2.15",
  "description": "Code is a component used to display inline code.",
  "keywords": [
    "code"
--- a/packages/components/date-input/CHANGELOG.md
+++ b/packages/components/date-input/CHANGELOG.md
@ -1,5 +1,14 @@
 # @heroui/date-input

+## 2.3.19
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/form@2.1.19
+
 ## 2.3.18

 ### Patch Changes
--- a/packages/components/date-input/package.json
+++ b/packages/components/date-input/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/date-input",
-  "version": "2.3.18",
+  "version": "2.3.19",
  "description": "A date input allows users to enter and edit date and time values using a keyboard.",
  "keywords": [
    "date-field"
@ -43,13 +43,13 @@
    "@heroui/form": "workspace:*",
    "@heroui/react-utils": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
-    "@internationalized/date": "3.8.0",
-    "@react-aria/datepicker": "3.14.2",
-    "@react-aria/i18n": "3.12.8",
-    "@react-stately/datepicker": "3.14.0",
-    "@react-types/datepicker": "3.12.0",
-    "@react-types/shared": "3.29.0",
-    "@react-aria/utils": "3.28.2"
+    "@internationalized/date": "3.8.1",
+    "@react-aria/datepicker": "3.14.3",
+    "@react-aria/i18n": "3.12.9",
+    "@react-stately/datepicker": "3.14.1",
+    "@react-types/datepicker": "3.12.1",
+    "@react-types/shared": "3.29.1",
+    "@react-aria/utils": "3.29.0"
  },
  "devDependencies": {
    "@heroui/system": "workspace:*",
--- a/packages/components/date-picker/CHANGELOG.md
+++ b/packages/components/date-picker/CHANGELOG.md
@ -1,5 +1,24 @@
 # @heroui/date-picker

+## 2.3.20
+
+### Patch Changes
+
+- [#5317](https://github.com/heroui-inc/heroui/pull/5317) [`d40c744`](https://github.com/heroui-inc/heroui/commit/d40c744f46f14c2212bd4c9ba116bb866c368426) Thanks [@Vishvsalvi](https://github.com/Vishvsalvi)! - fix date-range-picker error state (#5309)
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- [#5287](https://github.com/heroui-inc/heroui/pull/5287) [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9) Thanks [@wingkwong](https://github.com/wingkwong)! - bump framer-motion version
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0), [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/shared-icons@2.1.8
+  - @heroui/date-input@2.3.19
+  - @heroui/aria-utils@2.2.17
+  - @heroui/calendar@2.2.20
+  - @heroui/popover@2.3.20
+  - @heroui/button@2.2.20
+  - @heroui/form@2.1.19
+
 ## 2.3.19

 ### Patch Changes
--- a/packages/components/date-picker/package.json
+++ b/packages/components/date-picker/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/date-picker",
-  "version": "2.3.19",
+  "version": "2.3.20",
  "description": "A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.",
  "keywords": [
    "date-picker"
@ -41,7 +41,7 @@
    "react-dom": ">=18 || >=19.0.0-rc.0"
  },
  "dependencies": {
-    "@internationalized/date": "3.8.0",
+    "@internationalized/date": "3.8.1",
    "@heroui/aria-utils": "workspace:*",
    "@heroui/button": "workspace:*",
    "@heroui/calendar": "workspace:*",
@ -51,21 +51,21 @@
    "@heroui/react-utils": "workspace:*",
    "@heroui/shared-icons": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
-    "@react-aria/datepicker": "3.14.2",
-    "@react-aria/i18n": "3.12.8",
-    "@react-aria/utils": "3.28.2",
-    "@react-stately/datepicker": "3.14.0",
-    "@react-stately/overlays": "3.6.15",
+    "@react-aria/datepicker": "3.14.3",
+    "@react-aria/i18n": "3.12.9",
+    "@react-aria/utils": "3.29.0",
+    "@react-stately/datepicker": "3.14.1",
+    "@react-stately/overlays": "3.6.16",
    "@react-stately/utils": "3.10.6",
-    "@react-types/datepicker": "3.12.0",
-    "@react-types/shared": "3.29.0"
+    "@react-types/datepicker": "3.12.1",
+    "@react-types/shared": "3.29.1"
  },
  "devDependencies": {
    "@heroui/radio": "workspace:*",
    "@heroui/system": "workspace:*",
    "@heroui/test-utils": "workspace:*",
    "@heroui/theme": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
    "clean-package": "2.2.0",
    "react": "18.3.0",
    "react-dom": "18.3.0"
--- a/packages/components/date-picker/src/use-date-range-picker.ts
+++ b/packages/components/date-picker/src/use-date-range-picker.ts
@ -14,7 +14,7 @@ import type {DateRangePickerSlots, SlotsToClasses} from "@heroui/theme";
 import type {DateInputProps} from "@heroui/date-input";

 import {useLabelPlacement, useProviderContext} from "@heroui/system";
-import {useMemo, useRef} from "react";
+import {useMemo, useRef, useEffect} from "react";
 import {useDateRangePickerState} from "@react-stately/datepicker";
 import {useDateRangePicker as useAriaDateRangePicker} from "@react-aria/datepicker";
 import {clsx, dataAttr, objectToDeps} from "@heroui/shared-utils";
@ -125,6 +125,13 @@ export function useDateRangePicker<T extends DateValue>({
    isInvalid: isAriaInvalid,
  } = useAriaDateRangePicker({...originalProps, validationBehavior}, state, domRef);

+  // Force revalidation when value changes programmatically
+  useEffect(() => {
+    // Trigger revalidation to sync React Aria's internal validation state
+    // with the new programmatically set value
+    state.commitValidation();
+  }, [state.value, state.commitValidation]);
+
  const isInvalid = isInvalidProp || isAriaInvalid;

  const slots = useMemo(
--- a/packages/components/divider/CHANGELOG.md
+++ b/packages/components/divider/CHANGELOG.md
@ -1,5 +1,14 @@
 # @heroui/divider

+## 2.2.14
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/system-rsc@2.3.14
+
 ## 2.2.13

 ### Patch Changes
--- a/packages/components/divider/package.json
+++ b/packages/components/divider/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/divider",
-  "version": "2.2.13",
+  "version": "2.2.14",
  "description": ". A separator is a visual divider between two groups of content",
  "keywords": [
    "divider"
@ -42,7 +42,7 @@
    "@heroui/shared-utils": "workspace:*",
    "@heroui/react-rsc-utils": "workspace:*",
    "@heroui/system-rsc": "workspace:*",
-    "@react-types/shared": "3.29.0"
+    "@react-types/shared": "3.29.1"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
--- a/packages/components/drawer/CHANGELOG.md
+++ b/packages/components/drawer/CHANGELOG.md
@ -1,5 +1,13 @@
 # @heroui/drawer

+## 2.2.17
+
+### Patch Changes
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/modal@2.2.17
+  - @heroui/framer-utils@2.1.16
+
 ## 2.2.16

 ### Patch Changes
--- a/packages/components/drawer/package.json
+++ b/packages/components/drawer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/drawer",
-  "version": "2.2.16",
+  "version": "2.2.17",
  "description": "Used to render a content that slides in from the side of the screen.",
  "keywords": [
    "drawer"
--- a/packages/components/dropdown/CHANGELOG.md
+++ b/packages/components/dropdown/CHANGELOG.md
@ -1,5 +1,18 @@
 # @heroui/dropdown

+## 2.3.20
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- [#5287](https://github.com/heroui-inc/heroui/pull/5287) [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9) Thanks [@wingkwong](https://github.com/wingkwong)! - bump framer-motion version
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/aria-utils@2.2.17
+  - @heroui/popover@2.3.20
+  - @heroui/menu@2.2.19
+
 ## 2.3.19

 ### Patch Changes
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/dropdown",
-  "version": "2.3.19",
+  "version": "2.3.20",
  "description": "A dropdown displays a list of actions or options that a user can choose.",
  "keywords": [
    "dropdown"
@ -46,11 +46,11 @@
    "@heroui/popover": "workspace:*",
    "@heroui/react-utils": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/menu": "3.18.2",
-    "@react-aria/utils": "3.28.2",
-    "@react-stately/menu": "3.9.3",
-    "@react-types/menu": "3.10.0"
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/menu": "3.18.3",
+    "@react-aria/utils": "3.29.0",
+    "@react-stately/menu": "3.9.4",
+    "@react-types/menu": "3.10.1"
  },
  "devDependencies": {
    "@heroui/avatar": "workspace:*",
@ -62,7 +62,7 @@
    "@heroui/theme": "workspace:*",
    "@heroui/user": "workspace:*",
    "clean-package": "2.2.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
    "react": "18.3.0",
    "react-dom": "18.3.0"
  },
--- a/packages/components/form/CHANGELOG.md
+++ b/packages/components/form/CHANGELOG.md
@ -1,5 +1,15 @@
 # @heroui/form

+## 2.1.19
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`ee4d2eb`](https://github.com/heroui-inc/heroui/commit/ee4d2ebe257319ce1dd14dd96b545f27bd92d56c), [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/theme@2.4.16
+  - @heroui/system@2.4.16
+
 ## 2.1.18

 ### Patch Changes
--- a/packages/components/form/package.json
+++ b/packages/components/form/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/form",
-  "version": "2.1.18",
+  "version": "2.1.19",
  "description": "A form is a group of inputs that allows users submit data to a server and supports field validation errors.",
  "keywords": [
    "form"
@ -44,10 +44,10 @@
    "@heroui/shared-utils": "workspace:*",
    "@heroui/system": "workspace:*",
    "@heroui/theme": "workspace:*",
-    "@react-aria/utils": "3.28.2",
-    "@react-types/shared": "3.29.0",
-    "@react-stately/form": "3.1.3",
-    "@react-types/form": "3.7.11"
+    "@react-aria/utils": "3.29.0",
+    "@react-types/shared": "3.29.1",
+    "@react-stately/form": "3.1.4",
+    "@react-types/form": "3.7.12"
  },
  "devDependencies": {
    "@heroui/button": "workspace:*",
--- a/packages/components/input-otp/CHANGELOG.md
+++ b/packages/components/input-otp/CHANGELOG.md
@ -1,5 +1,14 @@
 # @heroui/input-otp

+## 2.1.19
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/form@2.1.19
+
 ## 2.1.18

 ### Patch Changes
--- a/packages/components/input-otp/package.json
+++ b/packages/components/input-otp/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/input-otp",
-  "version": "2.1.18",
+  "version": "2.1.19",
  "description": "",
  "keywords": [
    "input-otp"
@ -43,13 +43,13 @@
    "@heroui/form": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
    "@heroui/react-utils": "workspace:*",
-    "@react-aria/utils": "3.28.2",
-    "@react-aria/form": "3.0.15",
+    "@react-aria/utils": "3.29.0",
+    "@react-aria/form": "3.0.16",
    "@react-stately/utils": "3.10.6",
-    "@react-stately/form": "3.1.3",
-    "@react-types/textfield": "3.12.1",
+    "@react-stately/form": "3.1.4",
+    "@react-types/textfield": "3.12.2",
    "input-otp": "1.4.1",
-    "@react-aria/focus": "3.20.2"
+    "@react-aria/focus": "3.20.3"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
--- a/packages/components/input-otp/stories/input-otp.stories.tsx
+++ b/packages/components/input-otp/stories/input-otp.stories.tsx
@ -60,7 +60,6 @@ const ErrorMessageFunctionTemplate = (args) => {
  });

  const onSubmit = (data: any) => {
-    // eslint-disable-next-line no-console
    alert("Submitted value: " + JSON.stringify(data));
  };

--- a/packages/components/input/CHANGELOG.md
+++ b/packages/components/input/CHANGELOG.md
@ -1,5 +1,15 @@
 # @heroui/input

+## 2.4.20
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0), [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/shared-icons@2.1.8
+  - @heroui/form@2.1.19
+
 ## 2.4.19

 ### Patch Changes
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/input",
-  "version": "2.4.19",
+  "version": "2.4.20",
  "description": "The input component is designed for capturing user input within a text field.",
  "keywords": [
    "input"
@ -45,13 +45,13 @@
    "@heroui/shared-icons": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
    "@heroui/use-safe-layout-effect": "workspace:*",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/textfield": "3.17.2",
-    "@react-aria/utils": "3.28.2",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/textfield": "3.17.3",
+    "@react-aria/utils": "3.29.0",
    "@react-stately/utils": "3.10.6",
-    "@react-types/shared": "3.29.0",
-    "@react-types/textfield": "3.12.1",
+    "@react-types/shared": "3.29.1",
+    "@react-types/textfield": "3.12.2",
    "react-textarea-autosize": "^8.5.3"
  },
  "devDependencies": {
--- a/packages/components/kbd/CHANGELOG.md
+++ b/packages/components/kbd/CHANGELOG.md
@ -1,5 +1,14 @@
 # @heroui/kbd

+## 2.2.16
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/system-rsc@2.3.14
+
 ## 2.2.15

 ### Patch Changes
--- a/packages/components/kbd/package.json
+++ b/packages/components/kbd/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/kbd",
-  "version": "2.2.15",
+  "version": "2.2.16",
  "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
  "keywords": [
    "kbd"
@ -42,7 +42,7 @@
    "@heroui/system-rsc": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
    "@heroui/react-utils": "workspace:*",
-    "@react-aria/utils": "3.28.2"
+    "@react-aria/utils": "3.29.0"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
--- a/packages/components/link/CHANGELOG.md
+++ b/packages/components/link/CHANGELOG.md
@ -1,5 +1,15 @@
 # @heroui/link

+## 2.2.17
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0), [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/shared-icons@2.1.8
+  - @heroui/use-aria-link@2.2.15
+
 ## 2.2.16

 ### Patch Changes
--- a/packages/components/link/package.json
+++ b/packages/components/link/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/link",
-  "version": "2.2.16",
+  "version": "2.2.17",
  "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;",
  "keywords": [
    "link"
@ -44,10 +44,10 @@
    "@heroui/shared-icons": "workspace:*",
    "@heroui/react-utils": "workspace:*",
    "@heroui/use-aria-link": "workspace:*",
-    "@react-aria/link": "3.8.0",
-    "@react-aria/utils": "3.28.2",
-    "@react-aria/focus": "3.20.2",
-    "@react-types/link": "3.6.0"
+    "@react-aria/link": "3.8.1",
+    "@react-aria/utils": "3.29.0",
+    "@react-aria/focus": "3.20.3",
+    "@react-types/link": "3.6.1"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
--- a/packages/components/listbox/CHANGELOG.md
+++ b/packages/components/listbox/CHANGELOG.md
@ -1,5 +1,15 @@
 # @heroui/listbox

+## 2.3.19
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/aria-utils@2.2.17
+  - @heroui/divider@2.2.14
+
 ## 2.3.18

 ### Patch Changes
--- a/packages/components/listbox/package.json
+++ b/packages/components/listbox/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/listbox",
-  "version": "2.3.18",
+  "version": "2.3.19",
  "description": "A listbox displays a list of options and allows a user to select one or more of them.",
  "keywords": [
    "listbox"
@ -46,13 +46,13 @@
    "@heroui/shared-utils": "workspace:*",
    "@heroui/use-is-mobile": "workspace:*",
    "@tanstack/react-virtual": "3.11.3",
-    "@react-aria/utils": "3.28.2",
-    "@react-aria/listbox": "3.14.3",
-    "@react-stately/list": "3.12.1",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/interactions": "3.25.0",
-    "@react-types/menu": "3.10.0",
-    "@react-types/shared": "3.29.0"
+    "@react-aria/utils": "3.29.0",
+    "@react-aria/listbox": "3.14.4",
+    "@react-stately/list": "3.12.2",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/interactions": "3.25.1",
+    "@react-types/menu": "3.10.1",
+    "@react-types/shared": "3.29.1"
  },
  "devDependencies": {
    "@heroui/avatar": "workspace:*",
--- a/packages/components/menu/CHANGELOG.md
+++ b/packages/components/menu/CHANGELOG.md
@ -1,5 +1,15 @@
 # @heroui/menu

+## 2.2.19
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- Updated dependencies [[`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88)]:
+  - @heroui/aria-utils@2.2.17
+  - @heroui/divider@2.2.14
+
 ## 2.2.18

 ### Patch Changes
--- a/packages/components/menu/package.json
+++ b/packages/components/menu/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/menu",
-  "version": "2.2.18",
+  "version": "2.2.19",
  "description": "A menu displays a list of options and allows a user to select one or more of them.",
  "keywords": [
    "menu"
@ -45,14 +45,14 @@
    "@heroui/use-is-mobile": "workspace:*",
    "@heroui/shared-utils": "workspace:*",
    "@heroui/react-utils": "workspace:*",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/menu": "3.18.2",
-    "@react-aria/utils": "3.28.2",
-    "@react-stately/menu": "3.9.3",
-    "@react-stately/tree": "3.8.9",
-    "@react-types/menu": "3.10.0",
-    "@react-types/shared": "3.29.0"
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/menu": "3.18.3",
+    "@react-aria/utils": "3.29.0",
+    "@react-stately/menu": "3.9.4",
+    "@react-stately/tree": "3.8.10",
+    "@react-types/menu": "3.10.1",
+    "@react-types/shared": "3.29.1"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
--- a/packages/components/modal/CHANGELOG.md
+++ b/packages/components/modal/CHANGELOG.md
@ -1,5 +1,22 @@
 # @heroui/modal

+## 2.2.17
+
+### Patch Changes
+
+- [#5310](https://github.com/heroui-inc/heroui/pull/5310) [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88) Thanks [@wingkwong](https://github.com/wingkwong)! - bump RA versions
+
+- [#5287](https://github.com/heroui-inc/heroui/pull/5287) [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9) Thanks [@wingkwong](https://github.com/wingkwong)! - bump framer-motion version
+
+- Updated dependencies [[`8df9716`](https://github.com/heroui-inc/heroui/commit/8df9716dfa29926237682b73df59e8018843e9c0), [`1d62208`](https://github.com/heroui-inc/heroui/commit/1d62208642d06f7896724b2702ecb5a17931eb88), [`06fe3a3`](https://github.com/heroui-inc/heroui/commit/06fe3a3c4e7f2fdfb5fcbb2255c907280c892de9)]:
+  - @heroui/shared-icons@2.1.8
+  - @heroui/use-aria-modal-overlay@2.2.13
+  - @heroui/use-aria-button@2.2.14
+  - @heroui/use-disclosure@2.2.12
+  - @heroui/use-draggable@2.1.12
+  - @heroui/dom-animation@2.1.9
+  - @heroui/framer-utils@2.1.16
+
 ## 2.2.16

 ### Patch Changes
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@ -1,6 +1,6 @@
 {
  "name": "@heroui/modal",
-  "version": "2.2.16",
+  "version": "2.2.17",
  "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
  "keywords": [
    "modal"
@ -50,13 +50,13 @@
    "@heroui/shared-icons": "workspace:*",
    "@heroui/use-aria-modal-overlay": "workspace:*",
    "@heroui/dom-animation": "workspace:*",
-    "@react-aria/dialog": "3.5.24",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/overlays": "3.27.0",
-    "@react-aria/utils": "3.28.2",
-    "@react-stately/overlays": "3.6.15",
-    "@react-types/overlays": "3.8.14"
+    "@react-aria/dialog": "3.5.25",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/overlays": "3.27.1",
+    "@react-aria/utils": "3.29.0",
+    "@react-stately/overlays": "3.6.16",
+    "@react-types/overlays": "3.8.15"
  },
  "devDependencies": {
    "@heroui/theme": "workspace:*",
@ -68,7 +68,7 @@
    "@heroui/switch": "workspace:*",
    "@heroui/test-utils": "workspace:*",
    "react-lorem-component": "0.13.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
    "clean-package": "2.2.0",
    "react": "18.3.0",
    "react-dom": "18.3.0"
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@ -94,7 +94,7 @@ const ModalContent = (props: ModalContentProps) => {
          exit="exit"
          initial="exit"
          variants={TRANSITION_VARIANTS.fade}
-          {...(getBackdropProps() as HTMLMotionProps<"div">)}
+          {...(getBackdropProps() as Omit<HTMLMotionProps<"div">, "ref">)}
        />
      </LazyMotion>
    );
--- a/Show More
+++ b/Show More