ci(changesets): version packages (#2825)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

apps/docs/components/cmdk.tsx

@@ -410,8 +410,8 @@ export const Cmdk: FC<{}> = () => {
             </Kbd>
           </div>
           <Command.List ref={listRef} className={slots.list()} role="listbox">
-            {query.length > 0 && (
-              <Command.Empty>
+            <Command.Empty>
+              {query.length > 0 && (
                 <div className={slots.emptyWrapper()}>
                   <div>
                     <p>No results for &quot;{query}&quot;</p>
@@ -424,8 +424,8 @@ export const Cmdk: FC<{}> = () => {
                     )}
                   </div>
                 </div>
-              </Command.Empty>
-            )}
+              )}
+            </Command.Empty>
 
             {isEmpty(query) &&
               (isEmpty(recentSearches) ? (

apps/docs/components/docs/components/package-managers.tsx

@@ -54,7 +54,7 @@ export const PackageManagers = ({commands}: PackageManagersProps) => {
     <Tabs
       aria-label="NextUI installation commands"
       classNames={{
-        base: "group mt-4",
+        base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
         tabList: "h-10",
       }}
       selectedKey={selectedManager}

apps/docs/content/components/date-input/description.ts

@@ -7,7 +7,7 @@ export default function App() {
       <DateInput 
         label={"Birth date"} 
         placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"Thiis is my birth date."}
+        description={"This is my birth date."}
       />
     </div>
   );

apps/docs/content/components/date-input/readonly.ts

@@ -1,5 +1,5 @@
 const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
+import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/required.ts

@@ -1,5 +1,5 @@
 const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
+import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/start-end-content.ts

@@ -55,7 +55,7 @@ export default function App() {
 
 const react = {
   "/App.jsx": App,
-  "/MailIcon.jsx": CalendarIcon,
+  "/CalendarIcon.jsx": CalendarIcon,
 };
 
 export default {

apps/docs/content/components/date-input/time-zones.ts

@@ -1,5 +1,5 @@
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
+const App = `import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
   return (
@@ -19,7 +19,7 @@ export default function App() {
 }`;
 
 const react = {
-  "/App.tsx": AppTs,
+  "/App.jsx": App,
 };
 
 export default {

apps/docs/content/components/date-input/variants.ts

@@ -1,4 +1,5 @@
 const App = `import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   const variants = ["flat", "bordered", "underlined", "faded"];

apps/docs/content/components/date-picker/description.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/disabled.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/error-message.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/min-and-max-date.ts

@@ -1,5 +1,5 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {getLocalTimeZone, parseDate, today} from "@internationalized/date";
+import {getLocalTimeZone, today} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/preset.ts

@@ -1,6 +1,6 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {now, useLocale, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+const App = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());
@@ -91,9 +91,9 @@ export default function App() {
   );
 }`;
 
-const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {DateValue, now, useLocale, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+const AppTs = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {DateValue, startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());

apps/docs/content/components/date-picker/readonly.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/required.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/time-zones.ts

@@ -1,5 +1,5 @@
 const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/with-time-field.ts

@@ -1,4 +1,5 @@
 const App = `import {DatePicker} from "@nextui-org/react";
+import {now, getLocalTimeZone} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-range-picker/controlled.ts

@@ -1,5 +1,5 @@
 const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
@@ -40,7 +40,7 @@ export default function App() {
 }`;
 
 const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
 import {RangeValue} from "@react-types/shared";
 import {DateValue} from "@react-types/datepicker";

apps/docs/content/components/date-range-picker/time-zones.ts

@@ -1,4 +1,4 @@
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
+const App = `import {DateRangePicker} from "@nextui-org/react";
 import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
@@ -9,6 +9,7 @@ export default function App() {
           start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
           end: parseZonedDateTime("2024-04-14T11:15[America/Los_Angeles]"),
         }}
+        label="Stay duration"
         labelPlacement="outside"
       />
       <DateRangePicker
@@ -16,14 +17,15 @@ export default function App() {
           start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),
           end: parseAbsoluteToLocal("2024-04-14T19:15:00Z"),
         }}
+        label="Stay duration"
         labelPlacement="outside"
       />
-  </div>
+    </div>
   );
 }`;
 
 const react = {
-  "/App.tsx": AppTs,
+  "/App.jsx": App,
 };
 
 export default {

apps/docs/content/components/date-range-picker/with-time-field.ts

@@ -1,4 +1,6 @@
 const App = `import {DateRangePicker} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
 export default function App() {
   return (
     <div className="w-full max-w-xl flex flex-row gap-4">

apps/docs/content/components/time-input/timezones.ts

@@ -1,5 +1,5 @@
 const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, parseZonedDateTime} from "@internationalized/date";
+import {Time, parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/docs/guide/installation.mdx

@@ -211,7 +211,7 @@ in your terminal:
 #### Tailwind CSS Setup
 
 TailwindCSS setup changes a bit when you use individual packages. You only need to add the
-styles of the components your using to your `tailwind.config.js` file. For example, for the
+styles of the components you're using to your `tailwind.config.js` file. For example, for the
 [Button](/docs/components/button) component, you need to add the following code to your
 `tailwind.config.js` file:
 

apps/docs/content/docs/guide/introduction.mdx

@@ -95,7 +95,7 @@ NextUI's primary goal is to streamline the development process, offering a beaut
   can still use the NextUI components styling part with other frameworks or libraries.
 </div>
 
-### Why NextUI uses Framer Motion?
+### Why does NextUI use Framer Motion?
 
 <div className="text-default-500">
   We use <Link href="https://www.framer.com/motion" isExternal showAnchorIcon>Framer Motion</Link> to animate some components due to

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @nextui-org/accordion
 
+## 2.0.32
+
+### Patch Changes
+
+- Updated dependencies [[`10f2b8f42`](https://github.com/nextui-org/nextui/commit/10f2b8f42b1d208e4edea366c6bbc37ef8614ef6)]:
+  - @nextui-org/use-aria-accordion@2.0.4
+  - @nextui-org/divider@2.0.27
+
+## 2.0.31
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/aria-utils@2.0.18
+  - @nextui-org/framer-utils@2.0.18
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/divider@2.0.27
+
 ## 2.0.30
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "2.0.30",
+  "version": "2.0.32",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

packages/components/autocomplete/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @nextui-org/autocomplete
 
+## 2.0.16
+
+### Patch Changes
+
+- Updated dependencies [[`355235320`](https://github.com/nextui-org/nextui/commit/35523532030468837939d127b68bee30bbc4e2b0), [`1dacf52f3`](https://github.com/nextui-org/nextui/commit/1dacf52f305a410cbf59d067d1977024d982ad03)]:
+  - @nextui-org/input@2.1.21
+  - @nextui-org/popover@2.1.21
+  - @nextui-org/button@2.0.31
+  - @nextui-org/listbox@2.1.19
+  - @nextui-org/scroll-shadow@2.1.16
+  - @nextui-org/spinner@2.0.28
+
+## 2.0.15
+
+### Patch Changes
+
+- Updated dependencies [[`183a4a6cf`](https://github.com/nextui-org/nextui/commit/183a4a6cfda193a076a4a30550ab93b72d51002d), [`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/popover@2.1.20
+  - @nextui-org/aria-utils@2.0.18
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/button@2.0.30
+  - @nextui-org/input@2.1.20
+  - @nextui-org/listbox@2.1.19
+  - @nextui-org/scroll-shadow@2.1.16
+  - @nextui-org/spinner@2.0.28
+
+## 2.0.14
+
+### Patch Changes
+
+- Updated dependencies [[`9e5dd8ce3`](https://github.com/nextui-org/nextui/commit/9e5dd8ce37c94c9ca1ba7b2049a6e55f1803fee9)]:
+  - @nextui-org/popover@2.1.19
+
 ## 2.0.13
 
 ### Patch Changes

packages/components/autocomplete/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/autocomplete",
-  "version": "2.0.13",
+  "version": "2.0.16",
   "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"

packages/components/avatar/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/avatar
 
+## 2.0.27
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.26
 
 ### Patch Changes

packages/components/avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "2.0.26",
+  "version": "2.0.27",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"

packages/components/badge/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/badge
 
+## 2.0.27
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/system-rsc@2.1.1
+
 ## 2.0.26
 
 ### Patch Changes

packages/components/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "2.0.26",
+  "version": "2.0.27",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"

packages/components/breadcrumbs/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/breadcrumbs
 
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.6
 
 ### Patch Changes

packages/components/breadcrumbs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/breadcrumbs",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Breadcrumbs display a hierarchy of links to the current page or resource in an application.",
   "keywords": [
     "breadcrumbs"

packages/components/button/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @nextui-org/button
 
+## 2.0.31
+
+### Patch Changes
+
+- Updated dependencies [[`765c04e2a`](https://github.com/nextui-org/nextui/commit/765c04e2a5b3e3a072d87a4ae1bcb8ae389d53a0)]:
+  - @nextui-org/ripple@2.0.28
+  - @nextui-org/spinner@2.0.28
+
+## 2.0.30
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/ripple@2.0.27
+  - @nextui-org/spinner@2.0.28
+
 ## 2.0.29
 
 ### Patch Changes

packages/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "2.0.29",
+  "version": "2.0.31",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"

packages/components/calendar/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @nextui-org/calendar
 
+## 2.0.4
+
+### Patch Changes
+
+- [#2861](https://github.com/nextui-org/nextui/pull/2861) [`e9fef9bd9`](https://github.com/nextui-org/nextui/commit/e9fef9bd922ae1efdf3f796cfe88a579bf693c1d) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix #2820 #2857 Maximum update depth exceeded on Calendar & RangeCalendar when hovering the dates.
+
+- Updated dependencies []:
+  - @nextui-org/button@2.0.31
+
+## 2.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/framer-utils@2.0.18
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/button@2.0.30
+
 ## 2.0.2
 
 ### Patch Changes

packages/components/calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/calendar",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "A calendar displays one or more date grids and allows users to select a single date.",
   "keywords": [
     "calendar"

packages/components/calendar/src/calendar-month.tsx

@@ -1,5 +1,3 @@
-import type {CalendarState, RangeCalendarState} from "@react-stately/calendar";
-
 import {CalendarDate, endOfMonth, getWeeksInMonth} from "@internationalized/date";
 import {CalendarPropsBase} from "@react-types/calendar";
 import {HTMLNextUIProps} from "@nextui-org/system";
@@ -7,7 +5,6 @@ import {useLocale} from "@react-aria/i18n";
 import {useCalendarGrid} from "@react-aria/calendar";
 import {m} from "framer-motion";
 import {dataAttr} from "@nextui-org/shared-utils";
-import {useEffect, useState} from "react";
 
 import {CalendarCell} from "./calendar-cell";
 import {slideVariants} from "./calendar-transitions";
@@ -25,29 +22,8 @@ export function CalendarMonth(props: CalendarMonthProps) {
   const {locale} = useLocale();
   const weeksInMonth = getWeeksInMonth(startDate, locale);
 
-  const {
-    state: stateProp,
-    slots,
-    weekdayStyle,
-    isHeaderExpanded,
-    disableAnimation,
-    classNames,
-  } = useCalendarContext();
-
-  // Self-controlled state
-  const [state, setState] = useState<CalendarState | RangeCalendarState>(() => stateProp);
-
-  /**
-   * This avoid focusing the date cell when navigating through the picker'
-   * months/years with the keyboard.
-   */
-  useEffect(() => {
-    if (isHeaderExpanded) {
-      return;
-    }
-
-    setState(stateProp);
-  }, [stateProp, isHeaderExpanded]);
+  const {state, slots, weekdayStyle, isHeaderExpanded, disableAnimation, classNames} =
+    useCalendarContext();
 
   const {gridProps, headerProps, weekDays} = useCalendarGrid(
     {

packages/components/card/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/card
 
+## 2.0.28
+
+### Patch Changes
+
+- Updated dependencies [[`765c04e2a`](https://github.com/nextui-org/nextui/commit/765c04e2a5b3e3a072d87a4ae1bcb8ae389d53a0)]:
+  - @nextui-org/ripple@2.0.28
+
+## 2.0.27
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/ripple@2.0.27
+
 ## 2.0.26
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "2.0.26",
+  "version": "2.0.28",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"

packages/components/checkbox/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/checkbox
 
+## 2.0.29
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
+## 2.0.28
+
+### Patch Changes
+
+- [#2772](https://github.com/nextui-org/nextui/pull/2772) [`69f713cb0`](https://github.com/nextui-org/nextui/commit/69f713cb056d1d39db510b75bdd53eb29c459b19) Thanks [@chirokas](https://github.com/chirokas)! - Fix non-react props omitted from checkbox group component
+
 ## 2.0.27
 
 ### Patch Changes

packages/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "2.0.27",
+  "version": "2.0.29",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"

packages/components/checkbox/src/use-checkbox-group.ts

@@ -10,7 +10,7 @@ import {chain, mergeProps} from "@react-aria/utils";
 import {checkboxGroup} from "@nextui-org/theme";
 import {useCheckboxGroup as useReactAriaCheckboxGroup} from "@react-aria/checkbox";
 import {CheckboxGroupState, useCheckboxGroupState} from "@react-stately/checkbox";
-import {useDOMRef} from "@nextui-org/react-utils";
+import {filterDOMProps, useDOMRef} from "@nextui-org/react-utils";
 import {clsx, safeAriaLabel} from "@nextui-org/shared-utils";
 
 import {CheckboxProps} from "./index";
@@ -78,6 +78,8 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
     value,
     name,
     defaultValue,
+    isInvalid: isInvalidProp,
+    validationState,
     size = "md",
     color = "primary",
     orientation = "vertical",
@@ -94,6 +96,7 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
   } = props;
 
   const Component = as || "div";
+  const shouldFilterDOMProps = typeof Component === "string";
 
   const domRef = useDOMRef(ref);
 
@@ -108,7 +111,7 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
       isReadOnly,
       orientation,
       validationBehavior: "native",
-      isInvalid: props.isInvalid || props.validationState === "invalid",
+      isInvalid: validationState === "invalid" || isInvalidProp,
       onChange: chain(props.onChange, onValueChange),
     };
   }, [
@@ -120,8 +123,8 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
     isReadOnly,
     orientation,
     onValueChange,
-    props.isInvalid,
-    props.validationState,
+    isInvalidProp,
+    validationState,
     otherProps["aria-label"],
     otherProps,
   ]);
@@ -138,7 +141,7 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
     validationDetails,
   } = useReactAriaCheckboxGroup(checkboxGroupProps, groupState);
 
-  let isInvalid = props.isInvalid || props.validationState === "invalid" || isAriaInvalid;
+  let isInvalid = checkboxGroupProps.isInvalid || isAriaInvalid;
 
   const context = useMemo<ContextType>(
     () => ({
@@ -178,7 +181,12 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
     return {
       ref: domRef,
       className: slots.base({class: baseStyles}),
-      ...mergeProps(groupProps, otherProps),
+      ...mergeProps(
+        groupProps,
+        filterDOMProps(otherProps, {
+          enabled: shouldFilterDOMProps,
+        }),
+      ),
     };
   }, [slots, domRef, baseStyles, groupProps, otherProps]);
 

packages/components/chip/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/chip
 
+## 2.0.28
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.27
 
 ### Patch Changes

packages/components/chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"

packages/components/code/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/code
 
+## 2.0.27
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/system-rsc@2.1.1
+
 ## 2.0.26
 
 ### Patch Changes

packages/components/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "2.0.26",
+  "version": "2.0.27",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"

packages/components/date-input/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/date-input
 
+## 2.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.2
 
 ### Patch Changes

packages/components/date-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-input",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A date input allows users to enter and edit date and time values using a keyboard.",
   "keywords": [
     "date-field"

packages/components/date-picker/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @nextui-org/date-picker
 
+## 2.0.7
+
+### Patch Changes
+
+- [#2832](https://github.com/nextui-org/nextui/pull/2832) [`1cc5215ce`](https://github.com/nextui-org/nextui/commit/1cc5215ce6026da7e7736d74a5479b2f5b86c1ff) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Fixed missing aria labels in date range picker (#2804)
+
+- [#2833](https://github.com/nextui-org/nextui/pull/2833) [`308b32c0f`](https://github.com/nextui-org/nextui/commit/308b32c0f1611ecc72d8cf3b91a4481cc0fc09a5) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Fixed console errors for non-DOM props in DatePicker (#2823)
+
+- Updated dependencies [[`e9fef9bd9`](https://github.com/nextui-org/nextui/commit/e9fef9bd922ae1efdf3f796cfe88a579bf693c1d)]:
+  - @nextui-org/calendar@2.0.4
+  - @nextui-org/popover@2.1.21
+  - @nextui-org/button@2.0.31
+  - @nextui-org/date-input@2.0.3
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies [[`183a4a6cf`](https://github.com/nextui-org/nextui/commit/183a4a6cfda193a076a4a30550ab93b72d51002d), [`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/popover@2.1.20
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/button@2.0.30
+  - @nextui-org/calendar@2.0.3
+  - @nextui-org/date-input@2.0.3
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies [[`9e5dd8ce3`](https://github.com/nextui-org/nextui/commit/9e5dd8ce37c94c9ca1ba7b2049a6e55f1803fee9)]:
+  - @nextui-org/popover@2.1.19
+
 ## 2.0.4
 
 ### Patch Changes

packages/components/date-picker/__tests__/date-picker.test.tsx

@@ -372,8 +372,17 @@ describe("DatePicker", () => {
   describe("Calendar popover", function () {
     it("should emit onChange when selecting a date in the calendar in controlled mode", function () {
       let onChange = jest.fn();
+      const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+      const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
       let {getByRole, getAllByRole, queryByLabelText} = render(
-        <DatePicker label="Date" value={new CalendarDate(2019, 2, 3)} onChange={onChange} />,
+        <DatePicker
+          hideTimeZone
+          isRequired
+          label="Date"
+          value={new CalendarDate(2019, 2, 3)}
+          onChange={onChange}
+        />,
       );
 
       let combobox = getAllByRole("group")[0];
@@ -406,6 +415,11 @@ describe("DatePicker", () => {
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(new CalendarDate(2019, 2, 4));
       expect(getTextValue(combobox)).toBe("2/3/2019"); // controlled
+
+      expect(consoleWarnSpy).not.toHaveBeenCalled();
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+      consoleWarnSpy.mockRestore();
+      consoleErrorSpy.mockRestore();
     });
 
     it("should emit onChange when selecting a date in the calendar in uncontrolled mode", function () {

packages/components/date-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-picker",
-  "version": "2.0.4",
+  "version": "2.0.7",
   "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"

packages/components/date-picker/src/use-date-picker-base.ts

@@ -229,10 +229,11 @@ export function useDatePickerBase<T extends DateValue>(originalProps: UseDatePic
     hideTimeZone: props.hideTimeZone,
   } as TimeInputProps;
 
-  const popoverProps = {
-    ...mergeProps(slotsProps.popoverProps, props),
+  const popoverProps: PopoverProps = {
+    ...slotsProps.popoverProps,
+    children: slotsProps.popoverProps?.children ?? [],
     triggerRef: domRef,
-  } as PopoverProps;
+  };
 
   const calendarProps = {
     ...slotsProps.calendarProps,

packages/components/date-picker/src/use-date-picker.ts

@@ -131,7 +131,7 @@ export function useDatePicker<T extends DateValue>({
     } as DateInputProps;
   };
 
-  const getTimeInputProps = () => {
+  const getTimeInputProps = (): TimeInputProps => {
     if (!showTimeField) return {};
 
     return {
@@ -139,8 +139,8 @@ export function useDatePicker<T extends DateValue>({
       value: state.timeValue,
       onChange: state.setTimeValue,
       granularity: timeGranularity,
-      minValue: timeMinValue,
-      maxValue: timeMaxValue,
+      minValue: timeMinValue ?? undefined,
+      maxValue: timeMaxValue ?? undefined,
       classNames: {
         base: slots.timeInput({
           class: clsx(classNames?.timeInput, userTimeInputProps?.classNames?.base),
@@ -149,15 +149,14 @@ export function useDatePicker<T extends DateValue>({
           class: clsx(classNames?.timeInputLabel, userTimeInputProps?.classNames?.label),
         }),
       },
-    } as TimeInputProps;
+    };
   };
 
-  const getPopoverProps = (props: DOMAttributes = {}) => {
+  const getPopoverProps = (props: DOMAttributes = {}): PopoverProps => {
     return {
       state,
       dialogProps,
       ...popoverProps,
-      ...props,
       classNames: {
         content: slots.popoverContent({
           class: clsx(
@@ -167,10 +166,10 @@ export function useDatePicker<T extends DateValue>({
           ),
         }),
       },
-    } as PopoverProps;
+    };
   };
 
-  const getCalendarProps = () => {
+  const getCalendarProps = (): CalendarProps => {
     return {
       ...ariaCalendarProps,
       ...calendarProps,
@@ -178,15 +177,15 @@ export function useDatePicker<T extends DateValue>({
         base: slots.calendar({class: classNames?.calendar}),
         content: slots.calendarContent({class: classNames?.calendarContent}),
       },
-    } as CalendarProps;
+    };
   };
 
-  const getSelectorButtonProps = () => {
+  const getSelectorButtonProps = (): ButtonProps => {
     return {
       ...buttonProps,
       ...selectorButtonProps,
       className: slots.selectorButton({class: classNames?.selectorButton}),
-    } as ButtonProps;
+    };
   };
 
   const getSelectorIconProps = () => {

packages/components/date-picker/src/use-date-range-picker.ts

@@ -57,7 +57,6 @@ export type UseDateRangePickerProps<T extends DateValue> = Props<T> & AriaDateRa
 
 export function useDateRangePicker<T extends DateValue>({
   as,
-  label,
   isInvalid,
   description,
   startContent,
@@ -96,8 +95,6 @@ export function useDateRangePicker<T extends DateValue>({
 
   const popoverTriggerRef = useRef<HTMLDivElement>(null);
 
-  originalProps.minValue;
-
   let {
     groupProps,
     labelProps,
@@ -131,12 +128,15 @@ export function useDateRangePicker<T extends DateValue>({
   const showTimeField = !!timeGranularity;
 
   const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
-    if ((!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && !label) {
+    if (
+      (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") &&
+      !originalProps.label
+    ) {
       return "outside";
     }
 
     return originalProps.labelPlacement ?? "inside";
-  }, [originalProps.labelPlacement, label]);
+  }, [originalProps.labelPlacement, originalProps.label]);
 
   const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
 
@@ -371,7 +371,7 @@ export function useDateRangePicker<T extends DateValue>({
   const getDateInputGroupProps = () => {
     return {
       as,
-      label,
+      label: originalProps.label,
       description,
       endContent,
       errorMessage,
@@ -400,7 +400,7 @@ export function useDateRangePicker<T extends DateValue>({
 
   return {
     state,
-    label,
+    label: originalProps.label,
     slots,
     classNames,
     endContent,

packages/components/date-picker/stories/date-range-picker.stories.tsx

@@ -138,6 +138,7 @@ const TimeZonesTemplate = (args: DateRangePickerProps) => (
     />
     <DateRangePicker
       // {...args}
+      aria-label="Event date"
       className="max-w-xs"
       defaultValue={{
         start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),

packages/components/dropdown/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nextui-org/dropdown
 
+## 2.1.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/popover@2.1.21
+  - @nextui-org/menu@2.0.22
+
+## 2.1.22
+
+### Patch Changes
+
+- [#2784](https://github.com/nextui-org/nextui/pull/2784) [`183a4a6cf`](https://github.com/nextui-org/nextui/commit/183a4a6cfda193a076a4a30550ab93b72d51002d) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix `isDisabled` prop warning on NextUI components that don't support this property, it is also fixed for non-NextUI components.
+
+- Updated dependencies [[`183a4a6cf`](https://github.com/nextui-org/nextui/commit/183a4a6cfda193a076a4a30550ab93b72d51002d), [`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/popover@2.1.20
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/menu@2.0.21
+
+## 2.1.21
+
+### Patch Changes
+
+- Updated dependencies [[`9e5dd8ce3`](https://github.com/nextui-org/nextui/commit/9e5dd8ce37c94c9ca1ba7b2049a6e55f1803fee9)]:
+  - @nextui-org/popover@2.1.19
+
 ## 2.1.20
 
 ### Patch Changes

packages/components/dropdown/__tests__/dropdown.test.tsx

@@ -3,6 +3,8 @@ import {act, render} from "@testing-library/react";
 import {Button} from "@nextui-org/button";
 import userEvent from "@testing-library/user-event";
 import {User} from "@nextui-org/user";
+import {Image} from "@nextui-org/image";
+import {Avatar} from "@nextui-org/avatar";
 
 import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSection} from "../src";
 
@@ -146,6 +148,10 @@ describe("Dropdown", () => {
     });
 
     expect(spy).toBeCalledTimes(0);
+
+    let menu = wrapper.queryByRole("menu");
+
+    expect(menu).toBeTruthy();
   });
 
   it("should work with single selection (controlled)", async () => {
@@ -455,14 +461,11 @@ describe("Dropdown", () => {
     expect(onSelectionChange).toBeCalledTimes(0);
   });
 
-  it("should render without error (custom trigger + isDisabled)", async () => {
+  it("should render without error (custom trigger with isDisabled)", async () => {
     const spy = jest.spyOn(console, "error").mockImplementation(() => {});
 
-    render(
-      <Dropdown isDisabled>
-        <DropdownTrigger>
-          <div>Trigger</div>
-        </DropdownTrigger>
+    const renderDropdownMenu = () => {
+      return (
         <DropdownMenu aria-label="Actions" onAction={alert}>
           <DropdownItem key="new">New file</DropdownItem>
           <DropdownItem key="copy">Copy link</DropdownItem>
@@ -471,6 +474,16 @@ describe("Dropdown", () => {
             Delete file
           </DropdownItem>
         </DropdownMenu>
+      );
+    };
+
+    // Non Next UI Element in DropdownTrigger
+    render(
+      <Dropdown isDisabled>
+        <DropdownTrigger>
+          <div>Trigger</div>
+        </DropdownTrigger>
+        {renderDropdownMenu()}
       </Dropdown>,
     );
 
@@ -478,19 +491,45 @@ describe("Dropdown", () => {
 
     spy.mockRestore();
 
+    // Next UI Element in DropdownTrigger
     render(
       <Dropdown isDisabled>
         <DropdownTrigger>
           <User as="button" description="@tonyreichert" name="Tony Reichert" />
         </DropdownTrigger>
-        <DropdownMenu aria-label="Actions" onAction={alert}>
-          <DropdownItem key="new">New file</DropdownItem>
-          <DropdownItem key="copy">Copy link</DropdownItem>
-          <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
-        </DropdownMenu>
+        {renderDropdownMenu()}
+      </Dropdown>,
+    );
+
+    expect(spy).toBeCalledTimes(0);
+
+    spy.mockRestore();
+
+    // NextUI Element that supports isDisabled prop in DropdownTrigger
+    render(
+      <Dropdown isDisabled>
+        <DropdownTrigger>
+          <Avatar isDisabled name="Marcus" />
+        </DropdownTrigger>
+        {renderDropdownMenu()}
+      </Dropdown>,
+    );
+
+    expect(spy).toBeCalledTimes(0);
+
+    spy.mockRestore();
+
+    // NextUI Element that doesn't support isDisabled prop in DropdownTrigger
+    render(
+      <Dropdown isDisabled>
+        <DropdownTrigger>
+          <Image
+            alt="NextUI hero Image"
+            src="https://nextui-docs-v2.vercel.app/images/hero-card-complete.jpeg"
+            width={300}
+          />
+        </DropdownTrigger>
+        {renderDropdownMenu()}
       </Dropdown>,
     );
 

packages/components/dropdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "2.1.20",
+  "version": "2.1.23",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"
@@ -57,6 +57,7 @@
     "@nextui-org/button": "workspace:*",
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/user": "workspace:*",
+    "@nextui-org/image": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "framer-motion": "^11.0.22",
     "clean-package": "2.2.0",

packages/components/dropdown/src/use-dropdown.ts

@@ -47,10 +47,10 @@ export function useDropdown(props: UseDropdownProps) {
     isOpen,
     defaultOpen,
     onOpenChange,
+    isDisabled,
     type = "menu",
     trigger = "press",
     placement = "bottom",
-    isDisabled = false,
     closeOnSelect = true,
     shouldBlockScroll = true,
     classNames: classNamesProp,

packages/components/dropdown/stories/dropdown.stories.tsx

@@ -84,6 +84,11 @@ export default {
         type: "boolean",
       },
     },
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
     disableAnimation: {
       control: {
         type: "boolean",
@@ -109,6 +114,7 @@ const defaultProps = {
   ...dropdown.defaultVariants,
   placement: "bottom",
   offset: 7,
+  isDisabled: false,
   defaultOpen: false,
   disableAnimation: false,
 };
@@ -569,6 +575,24 @@ const CustomTriggerTemplate = ({variant, ...args}) => {
   );
 };
 
+const CustomHTMLTrigger = ({variant, ...args}) => {
+  return (
+    <Dropdown {...args}>
+      <DropdownTrigger>
+        <span className="flex items-center gap-2">Profile</span>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Actions" variant={variant}>
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+};
+
 export const Default = {
   render: Template,
 
@@ -695,6 +719,16 @@ export const WithCustomTrigger = {
   },
 };
 
+export const WithCustomHTMLTrigger = {
+  render: CustomHTMLTrigger,
+
+  args: {
+    ...defaultProps,
+    variant: "flat",
+    offset: 14,
+  },
+};
+
 export const DisableAnimation = {
   render: WithStartContentTemplate,
 

packages/components/image/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/image
 
+## 2.0.27
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.26
 
 ### Patch Changes

packages/components/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/image",
-  "version": "2.0.26",
+  "version": "2.0.27",
   "description": "A simple image component",
   "keywords": [
     "image"

packages/components/input/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/input
 
+## 2.1.21
+
+### Patch Changes
+
+- [#2796](https://github.com/nextui-org/nextui/pull/2796) [`355235320`](https://github.com/nextui-org/nextui/commit/35523532030468837939d127b68bee30bbc4e2b0) Thanks [@wingkwong](https://github.com/wingkwong)! - Fixes the isClearable function in the input component (#2791)
+
+- [#2072](https://github.com/nextui-org/nextui/pull/2072) [`1dacf52f3`](https://github.com/nextui-org/nextui/commit/1dacf52f305a410cbf59d067d1977024d982ad03) Thanks [@black197](https://github.com/black197)! - Fix #2069 keep input component's position steady
+
+## 2.1.20
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.1.19
 
 ### Patch Changes

packages/components/input/__tests__/input.test.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import {Input} from "../src";
 
@@ -116,4 +117,32 @@ describe("Input", () => {
 
     expect(ref.current?.value)?.toBe(value);
   });
+
+  it("should clear the value and onClear is triggered", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLInputElement>();
+
+    const {getByRole} = render(
+      <Input
+        ref={ref}
+        isClearable
+        defaultValue="junior@nextui.org"
+        label="test input"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).not.toBeNull();
+
+    const user = userEvent.setup();
+
+    await user.click(clearButton);
+
+    expect(ref.current?.value)?.toBe("");
+
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
 });

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "2.1.19",
+  "version": "2.1.21",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"
@@ -43,6 +43,7 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/use-safe-layout-effect": "workspace:*",
     "@react-aria/focus": "^3.16.2",
     "@react-aria/interactions": "^3.21.1",
     "@react-aria/textfield": "^3.14.3",
@@ -57,7 +58,8 @@
     "@nextui-org/system": "workspace:*",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-hook-form": "^7.51.3"
   },
   "clean-package": "../../../clean-package.config.json"
 }

packages/components/input/src/input.tsx

@@ -65,19 +65,11 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
   ]);
 
   const innerWrapper = useMemo(() => {
-    if (startContent || end) {
-      return (
-        <div {...getInnerWrapperProps()}>
-          {startContent}
-          <input {...getInputProps()} />
-          {end}
-        </div>
-      );
-    }
-
     return (
       <div {...getInnerWrapperProps()}>
+        {startContent}
         <input {...getInputProps()} />
+        {end}
       </div>
     );
   }, [startContent, end, getInputProps, getInnerWrapperProps]);

packages/components/input/src/use-input.ts

@@ -2,6 +2,7 @@ import type {InputVariantProps, SlotsToClasses, InputSlots} from "@nextui-org/th
 import type {AriaTextFieldOptions} from "@react-aria/textfield";
 
 import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
+import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
 import {AriaTextFieldProps} from "@react-types/textfield";
 import {useFocusRing} from "@react-aria/focus";
 import {input} from "@nextui-org/theme";
@@ -143,6 +144,15 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     domRef.current?.focus();
   }, [setInputValue, onClear]);
 
+  // if we use `react-hook-form`, it will set the input value using the ref in register
+  // i.e. setting ref.current.value to something which is uncontrolled
+  // hence, sync the state with `ref.current.value`
+  useSafeLayoutEffect(() => {
+    if (!domRef.current) return;
+
+    setInputValue(domRef.current.value);
+  }, [domRef.current]);
+
   const {
     labelProps,
     inputProps,
@@ -156,7 +166,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
       ...originalProps,
       validationBehavior: "native",
       autoCapitalize: originalProps.autoCapitalize as AutoCapitalize,
-      value: domRef?.current?.value ?? inputValue,
+      value: inputValue,
       "aria-label": safeAriaLabel(
         originalProps?.["aria-label"],
         originalProps?.label,

packages/components/input/stories/input.stories.tsx

@@ -13,6 +13,7 @@ import {
   CloseFilledIcon,
 } from "@nextui-org/shared-icons";
 import {button} from "@nextui-org/theme";
+import {useForm} from "react-hook-form";
 
 import {Input, InputProps, useInput} from "../src";
 
@@ -474,6 +475,38 @@ const CustomWithHooksTemplate = (args: InputProps) => {
   );
 };
 
+const WithReactHookFormTemplate = (args: InputProps) => {
+  const {
+    register,
+    formState: {errors},
+    handleSubmit,
+  } = useForm({
+    defaultValues: {
+      withDefaultValue: "wkw",
+      withoutDefaultValue: "",
+      requiredField: "",
+    },
+  });
+
+  const onSubmit = (data: any) => {
+    // eslint-disable-next-line no-console
+    console.log(data);
+    alert("Submitted value: " + JSON.stringify(data));
+  };
+
+  return (
+    <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
+      <Input isClearable label="With default value" {...register("withDefaultValue")} />
+      <Input {...args} label="Without default value" {...register("withoutDefaultValue")} />
+      <Input {...args} label="Required" {...register("requiredField", {required: true})} />
+      {errors.requiredField && <span className="text-danger">This field is required</span>}
+      <button className={button({class: "w-fit"})} type="submit">
+        Submit
+      </button>
+    </form>
+  );
+};
+
 export const Default = {
   render: MirrorTemplate,
 
@@ -706,3 +739,11 @@ export const CustomWithHooks = {
     ),
   },
 };
+
+export const WithReactHookForm = {
+  render: WithReactHookFormTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};

packages/components/kbd/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/kbd
 
+## 2.0.28
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/system-rsc@2.1.1
+
 ## 2.0.27
 
 ### Patch Changes

packages/components/kbd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
   "keywords": [
     "kbd"

packages/components/link/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/link
 
+## 2.0.29
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.28
 
 ### Patch Changes

packages/components/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
   "keywords": [
     "link"

packages/components/listbox/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nextui-org/listbox
 
+## 2.1.19
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/aria-utils@2.0.18
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/divider@2.0.27
+
 ## 2.1.18
 
 ### Patch Changes

packages/components/listbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/listbox",
-  "version": "2.1.18",
+  "version": "2.1.19",
   "description": "A listbox displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "listbox"

packages/components/menu/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @nextui-org/menu
 
+## 2.0.22
+
+### Patch Changes
+
+- Updated dependencies [[`b8e6b2fe2`](https://github.com/nextui-org/nextui/commit/b8e6b2fe25bbbf52f656bbcac52fc00714f464bc)]:
+  - @nextui-org/use-aria-menu@2.0.2
+  - @nextui-org/divider@2.0.27
+
+## 2.0.21
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/aria-utils@2.0.18
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/divider@2.0.27
+
 ## 2.0.20
 
 ### Patch Changes

packages/components/menu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/menu",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "description": "A menu displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "menu"

packages/components/modal/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/modal
 
+## 2.0.33
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/framer-utils@2.0.18
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.32
 
 ### Patch Changes

packages/components/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/modal",
-  "version": "2.0.32",
+  "version": "2.0.33",
   "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
   "keywords": [
     "modal"

packages/components/navbar/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/navbar
 
+## 2.0.30
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/framer-utils@2.0.18
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.29
 
 ### Patch Changes

packages/components/navbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
   "keywords": [
     "navbar"

packages/components/pagination/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/pagination
 
+## 2.0.30
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.29
 
 ### Patch Changes

packages/components/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"

packages/components/popover/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @nextui-org/popover
 
+## 2.1.21
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/button@2.0.31
+
+## 2.1.20
+
+### Patch Changes
+
+- [#2784](https://github.com/nextui-org/nextui/pull/2784) [`183a4a6cf`](https://github.com/nextui-org/nextui/commit/183a4a6cfda193a076a4a30550ab93b72d51002d) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix `isDisabled` prop warning on NextUI components that don't support this property, it is also fixed for non-NextUI components.
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/aria-utils@2.0.18
+  - @nextui-org/framer-utils@2.0.18
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/button@2.0.30
+
+## 2.1.19
+
+### Patch Changes
+
+- [`9e5dd8ce3`](https://github.com/nextui-org/nextui/commit/9e5dd8ce37c94c9ca1ba7b2049a6e55f1803fee9) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix ref not beign passed
+
 ## 2.1.18
 
 ### Patch Changes

packages/components/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "2.1.18",
+  "version": "2.1.21",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"

packages/components/popover/src/popover-trigger.tsx

@@ -1,6 +1,6 @@
 import React, {Children, cloneElement, useMemo} from "react";
-import {forwardRef, isNextUIEl} from "@nextui-org/system";
-import {filterDOMProps, pickChildren} from "@nextui-org/react-utils";
+import {forwardRef} from "@nextui-org/system";
+import {pickChildren} from "@nextui-org/react-utils";
 import {useAriaButton} from "@nextui-org/use-aria-button";
 import {Button} from "@nextui-org/button";
 import {mergeProps} from "@react-aria/utils";
@@ -29,14 +29,14 @@ const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
     };
   }, [children]);
 
-  const {onPress, ...restProps} = useMemo(() => {
+  const {onPress, isDisabled, ...restProps} = useMemo(() => {
     return getTriggerProps(mergeProps(otherProps, child.props), child.ref);
   }, [getTriggerProps, child.props, otherProps, child.ref]);
 
   // validates if contains a NextUI Button as a child
   const [, triggerChildren] = pickChildren(children, Button);
 
-  const {buttonProps} = useAriaButton({onPress}, triggerRef);
+  const {buttonProps} = useAriaButton({onPress, isDisabled}, triggerRef);
 
   const hasNextUIButton = useMemo<boolean>(() => {
     return triggerChildren?.[0] !== undefined;
@@ -44,12 +44,7 @@ const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
 
   return cloneElement(
     child,
-    mergeProps(
-      filterDOMProps(restProps, {
-        enabled: !isNextUIEl(child),
-      }),
-      hasNextUIButton ? {onPress} : buttonProps,
-    ),
+    mergeProps(restProps, hasNextUIButton ? {onPress, isDisabled} : buttonProps),
   );
 });
 

packages/components/popover/src/use-popover.ts

@@ -253,16 +253,19 @@ export function usePopover(originalProps: UsePopoverProps) {
 
   const getTriggerProps = useCallback<PropGetter>(
     (props = {}, _ref: Ref<any> | null | undefined = null) => {
+      const {isDisabled, ...otherProps} = props;
+
       return {
         "data-slot": "trigger",
         "aria-haspopup": "dialog",
-        ...mergeProps(triggerProps, props),
+        ...mergeProps(triggerProps, otherProps),
         onPress,
+        isDisabled,
         className: slots.trigger({
           class: clsx(classNames?.trigger, props.className),
           // apply isDisabled class names to make the trigger child disabled
           // e.g. for elements like div or NextUI elements that don't have `isDisabled` prop
-          isDropdownDisabled: !!props?.isDisabled,
+          isTriggerDisabled: isDisabled,
         }),
         ref: mergeRefs(_ref, triggerRef),
       };

packages/components/progress/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/progress
 
+## 2.0.28
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.27
 
 ### Patch Changes

packages/components/progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"

packages/components/progress/stories/progress.stories.tsx

@@ -122,3 +122,15 @@ export const Striped = {
     isStriped: true,
   },
 };
+
+export const CustomSlots = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    classNames: {
+      indicator: "bg-[#14708A] rounded-[4px]",
+      track: "bg-red-500 rounded-[4px]",
+    },
+  },
+};

packages/components/radio/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/radio
 
+## 2.0.28
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.27
 
 ### Patch Changes

packages/components/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"

packages/components/ripple/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/ripple
 
+## 2.0.28
+
+### Patch Changes
+
+- [#2853](https://github.com/nextui-org/nextui/pull/2853) [`765c04e2a`](https://github.com/nextui-org/nextui/commit/765c04e2a5b3e3a072d87a4ae1bcb8ae389d53a0) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix press event on iOS, the ripple zIndex was preventing the press event
+
+## 2.0.27
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.0.26
 
 ### Patch Changes

packages/components/ripple/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/ripple",
-  "version": "2.0.26",
+  "version": "2.0.28",
   "description": "A simple implementation to display a ripple animation when the source component is clicked",
   "keywords": [
     "ripple"

packages/components/ripple/src/ripple.tsx

@@ -36,7 +36,9 @@ const Ripple: FC<RippleProps> = (props) => {
                     borderRadius: "100%",
                     transformOrigin: "center",
                     pointerEvents: "none",
-                    zIndex: 10,
+                    overflow: "hidden",
+                    inset: 0,
+                    zIndex: 0,
                     top: ripple.y,
                     left: ripple.x,
                     width: `${ripple.size}px`,

packages/components/ripple/src/use-ripple.ts

@@ -24,8 +24,8 @@ export function useRipple(props: UseRippleProps = {}) {
       {
         key: getUniqueID(prevRipples.length.toString()),
         size,
-        x: event.clientX - rect.x - size / 2,
-        y: event.clientY - rect.y - size / 2,
+        x: event.clientX - rect.left - size / 2,
+        y: event.clientY - rect.top - size / 2,
       },
     ]);
   }, []);

packages/components/scroll-shadow/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/scroll-shadow
 
+## 2.1.16
+
+### Patch Changes
+
+- Updated dependencies [[`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/react-utils@2.0.13
+
 ## 2.1.15
 
 ### Patch Changes

packages/components/scroll-shadow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/scroll-shadow",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "description": "A component that applies top and bottom shadows when content overflows on scroll.",
   "keywords": [
     "scroll-shadow"

packages/components/select/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @nextui-org/select
 
+## 2.1.27
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/popover@2.1.21
+  - @nextui-org/listbox@2.1.19
+  - @nextui-org/scroll-shadow@2.1.16
+  - @nextui-org/spinner@2.0.28
+
+## 2.1.26
+
+### Patch Changes
+
+- Updated dependencies [[`183a4a6cf`](https://github.com/nextui-org/nextui/commit/183a4a6cfda193a076a4a30550ab93b72d51002d), [`eccc2f2f3`](https://github.com/nextui-org/nextui/commit/eccc2f2f3d856eefb2cc7c07b94e1c4cefd4d7d0)]:
+  - @nextui-org/popover@2.1.20
+  - @nextui-org/aria-utils@2.0.18
+  - @nextui-org/react-utils@2.0.13
+  - @nextui-org/listbox@2.1.19
+  - @nextui-org/scroll-shadow@2.1.16
+  - @nextui-org/spinner@2.0.28
+
+## 2.1.25
+
+### Patch Changes
+
+- Updated dependencies [[`9e5dd8ce3`](https://github.com/nextui-org/nextui/commit/9e5dd8ce37c94c9ca1ba7b2049a6e55f1803fee9)]:
+  - @nextui-org/popover@2.1.19
+
 ## 2.1.24
 
 ### Patch Changes

packages/components/select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/select",
-  "version": "2.1.24",
+  "version": "2.1.27",
   "description": "A select displays a collapsible list of options and allows a user to select one of them.",
   "keywords": [
     "select"