From 60ebb03c5c86d568f86425398d2cb50d4014991b Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 10 Jun 2025 20:38:47 +0800
Subject: [PATCH 01/10] refactor(calendar): createCalendar typing

---
 packages/components/calendar/src/use-calendar-base.ts | 10 +++-------
 packages/core/system/src/provider-context.ts          |  5 ++---
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/components/calendar/src/use-calendar-base.ts b/packages/components/calendar/src/use-calendar-base.ts
index ae9e432bab..b95e32bba3 100644
--- a/packages/components/calendar/src/use-calendar-base.ts
+++ b/packages/components/calendar/src/use-calendar-base.ts
@@ -1,17 +1,13 @@
 import type {CalendarReturnType, CalendarVariantProps} from "@heroui/theme";
-import type {
-  CalendarPropsBase as AriaCalendarPropsBase,
-  DateValue,
-  SpectrumCalendarProps,
-} from "@react-types/calendar";
+import type {CalendarPropsBase as AriaCalendarPropsBase} from "@react-types/calendar";
 import type {CalendarSlots, SlotsToClasses} from "@heroui/theme";
 import type {AriaCalendarGridProps} from "@react-aria/calendar";
 import type {AriaButtonProps} from "@react-types/button";
 import type {HTMLHeroUIProps, PropGetter} from "@heroui/system";
+import type {Calendar, CalendarIdentifier} from "@internationalized/date";
 import type {ButtonProps} from "@heroui/button";
 import type {CalendarState, RangeCalendarState} from "@react-stately/calendar";
 import type {RefObject, ReactNode} from "react";
-import type {CalendarIdentifier} from "@internationalized/date";
 import type {ReactRef} from "@heroui/react-utils";
 
 import {createCalendar, CalendarDate, DateFormatter} from "@internationalized/date";
@@ -124,7 +120,7 @@ interface Props extends HeroUIBaseProps {
    *
    * @default all calendars
    */
-  createCalendar?: SpectrumCalendarProps<DateValue>["createCalendar"];
+  createCalendar?: (identifier: CalendarIdentifier) => Calendar;
   /**
    * The style of weekday names to display in the calendar grid header,
    * e.g. single letter, abbreviation, or full day name.
diff --git a/packages/core/system/src/provider-context.ts b/packages/core/system/src/provider-context.ts
index dfedd99ead..b836264bcf 100644
--- a/packages/core/system/src/provider-context.ts
+++ b/packages/core/system/src/provider-context.ts
@@ -1,5 +1,4 @@
-import type {SpinnerVariants} from "./types";
-import type {DateValue, SpectrumCalendarProps} from "@react-types/calendar";
+import type {SpinnerVariants, Calendar, DateValue, CalendarIdentifier} from "./types";
 
 import {createContext} from "@heroui/react-utils";
 
@@ -85,7 +84,7 @@ export type ProviderContextProps = {
    *
    * @default all calendars
    */
-  createCalendar?: SpectrumCalendarProps<DateValue>["createCalendar"];
+  createCalendar?: (identifier: CalendarIdentifier) => Calendar;
   /**
    * The default variant of the spinner.
    * @default default

From 46781b7d25313d893ec0fd464aac2fb7e6bb4285 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 10 Jun 2025 20:39:07 +0800
Subject: [PATCH 02/10] refactor(system): ditch `@react-types/calendar`

---
 packages/core/system/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/core/system/package.json b/packages/core/system/package.json
index ea389a856f..e4afc0c924 100644
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@@ -58,7 +58,6 @@
     "@heroui/system-rsc": "workspace:*",
     "@react-aria/i18n": "3.12.10",
     "@react-aria/overlays": "3.27.2",
-    "@react-aria/utils": "3.29.1",
-    "@react-types/calendar": "3.7.2"
+    "@react-aria/utils": "3.29.1"
   }
 }
\ No newline at end of file

From cc56c8d212d074fdd7405c33b7d9b5956e84ceb3 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 10 Jun 2025 20:39:27 +0800
Subject: [PATCH 03/10] feat(system): include the required types or interfaces

---
 packages/core/system/src/types.ts | 378 ++++++++++++++++++++++++++++++
 1 file changed, 378 insertions(+)

diff --git a/packages/core/system/src/types.ts b/packages/core/system/src/types.ts
index a88e2307d6..c9bbea4b4f 100644
--- a/packages/core/system/src/types.ts
+++ b/packages/core/system/src/types.ts
@@ -2,3 +2,381 @@
  * Spinner Variants
  */
 export type SpinnerVariants = "default" | "simple" | "gradient" | "wave" | "dots" | "spinner";
+
+/**
+ * Interationalized Date
+ * Retrieved from `@internationalized/date` to avoid importing the entire package.
+ */
+export interface CalendarDate {
+  /** The calendar system associated with this date, e.g. Gregorian. */
+  readonly calendar: Calendar;
+  /** The calendar era for this date, e.g. "BC" or "AD". */
+  readonly era: string;
+  /** The year of this date within the era. */
+  readonly year: number;
+  /**
+   * The month number within the year. Note that some calendar systems such as Hebrew
+   * may have a variable number of months per year. Therefore, month numbers may not
+   * always correspond to the same month names in different years.
+   */
+  readonly month: number;
+  /** The day number within the month. */
+  readonly day: number;
+  constructor(year: number, month: number, day: number);
+  constructor(era: string, year: number, month: number, day: number);
+  constructor(calendar: Calendar, year: number, month: number, day: number);
+  constructor(calendar: Calendar, era: string, year: number, month: number, day: number);
+  /** Returns a copy of this date. */
+  copy(): CalendarDate;
+  /** Returns a new `CalendarDate` with the given duration added to it. */
+  add(duration: DateDuration): CalendarDate;
+  /** Returns a new `CalendarDate` with the given duration subtracted from it. */
+  subtract(duration: DateDuration): CalendarDate;
+  /** Returns a new `CalendarDate` with the given fields set to the provided values. Other fields will be constrained accordingly. */
+  set(fields: DateFields): CalendarDate;
+  /**
+   * Returns a new `CalendarDate` with the given field adjusted by a specified amount.
+   * When the resulting value reaches the limits of the field, it wraps around.
+   */
+  cycle(field: DateField, amount: number, options?: CycleOptions): CalendarDate;
+  /** Converts the date to a native JavaScript Date object, with the time set to midnight in the given time zone. */
+  toDate(timeZone: string): Date;
+  /** Converts the date to an ISO 8601 formatted string. */
+  toString(): string;
+  /** Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after. */
+  compare(b: AnyCalendarDate): number;
+}
+
+export interface CalendarDateTime {
+  /** The calendar system associated with this date, e.g. Gregorian. */
+  readonly calendar: Calendar;
+  /** The calendar era for this date, e.g. "BC" or "AD". */
+  readonly era: string;
+  /** The year of this date within the era. */
+  readonly year: number;
+  /**
+   * The month number within the year. Note that some calendar systems such as Hebrew
+   * may have a variable number of months per year. Therefore, month numbers may not
+   * always correspond to the same month names in different years.
+   */
+  readonly month: number;
+  /** The day number within the month. */
+  readonly day: number;
+  /** The hour in the day, numbered from 0 to 23. */
+  readonly hour: number;
+  /** The minute in the hour. */
+  readonly minute: number;
+  /** The second in the minute. */
+  readonly second: number;
+  /** The millisecond in the second. */
+  readonly millisecond: number;
+  constructor(
+    year: number,
+    month: number,
+    day: number,
+    hour?: number,
+    minute?: number,
+    second?: number,
+    millisecond?: number,
+  );
+  constructor(
+    era: string,
+    year: number,
+    month: number,
+    day: number,
+    hour?: number,
+    minute?: number,
+    second?: number,
+    millisecond?: number,
+  );
+  constructor(
+    calendar: Calendar,
+    year: number,
+    month: number,
+    day: number,
+    hour?: number,
+    minute?: number,
+    second?: number,
+    millisecond?: number,
+  );
+  constructor(
+    calendar: Calendar,
+    era: string,
+    year: number,
+    month: number,
+    day: number,
+    hour?: number,
+    minute?: number,
+    second?: number,
+    millisecond?: number,
+  );
+  /** Returns a copy of this date. */
+  copy(): CalendarDateTime;
+  /** Returns a new `CalendarDateTime` with the given duration added to it. */
+  add(duration: DateTimeDuration): CalendarDateTime;
+  /** Returns a new `CalendarDateTime` with the given duration subtracted from it. */
+  subtract(duration: DateTimeDuration): CalendarDateTime;
+  /** Returns a new `CalendarDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly. */
+  set(fields: DateFields & TimeFields): CalendarDateTime;
+  /**
+   * Returns a new `CalendarDateTime` with the given field adjusted by a specified amount.
+   * When the resulting value reaches the limits of the field, it wraps around.
+   */
+  cycle(field: DateField | TimeField, amount: number, options?: CycleTimeOptions): CalendarDateTime;
+  /** Converts the date to a native JavaScript Date object in the given time zone. */
+  toDate(timeZone: string, disambiguation?: Disambiguation): Date;
+  /** Converts the date to an ISO 8601 formatted string. */
+  toString(): string;
+  /** Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after. */
+  compare(b: CalendarDate | CalendarDateTime | ZonedDateTime): number;
+}
+
+export interface ZonedDateTime {
+  /** The calendar system associated with this date, e.g. Gregorian. */
+  readonly calendar: Calendar;
+  /** The calendar era for this date, e.g. "BC" or "AD". */
+  readonly era: string;
+  /** The year of this date within the era. */
+  readonly year: number;
+  /**
+   * The month number within the year. Note that some calendar systems such as Hebrew
+   * may have a variable number of months per year. Therefore, month numbers may not
+   * always correspond to the same month names in different years.
+   */
+  readonly month: number;
+  /** The day number within the month. */
+  readonly day: number;
+  /** The hour in the day, numbered from 0 to 23. */
+  readonly hour: number;
+  /** The minute in the hour. */
+  readonly minute: number;
+  /** The second in the minute. */
+  readonly second: number;
+  /** The millisecond in the second. */
+  readonly millisecond: number;
+  /** The IANA time zone identifier that this date and time is represented in. */
+  readonly timeZone: string;
+  /** The UTC offset for this time, in milliseconds. */
+  readonly offset: number;
+  constructor(
+    year: number,
+    month: number,
+    day: number,
+    timeZone: string,
+    offset: number,
+    hour?: number,
+    minute?: number,
+    second?: number,
+    millisecond?: number,
+  );
+  constructor(
+    era: string,
+    year: number,
+    month: number,
+    day: number,
+    timeZone: string,
+    offset: number,
+    hour?: number,
+    minute?: number,
+    second?: number,
+    millisecond?: number,
+  );
+  constructor(
+    calendar: Calendar,
+    year: number,
+    month: number,
+    day: number,
+    timeZone: string,
+    offset: number,
+    hour?: number,
+    minute?: number,
+    second?: number,
+    millisecond?: number,
+  );
+  constructor(
+    calendar: Calendar,
+    era: string,
+    year: number,
+    month: number,
+    day: number,
+    timeZone: string,
+    offset: number,
+    hour?: number,
+    minute?: number,
+    second?: number,
+    millisecond?: number,
+  );
+  /** Returns a copy of this date. */
+  copy(): ZonedDateTime;
+  /** Returns a new `ZonedDateTime` with the given duration added to it. */
+  add(duration: DateTimeDuration): ZonedDateTime;
+  /** Returns a new `ZonedDateTime` with the given duration subtracted from it. */
+  subtract(duration: DateTimeDuration): ZonedDateTime;
+  /** Returns a new `ZonedDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly. */
+  set(fields: DateFields & TimeFields, disambiguation?: Disambiguation): ZonedDateTime;
+  /**
+   * Returns a new `ZonedDateTime` with the given field adjusted by a specified amount.
+   * When the resulting value reaches the limits of the field, it wraps around.
+   */
+  cycle(field: DateField | TimeField, amount: number, options?: CycleTimeOptions): ZonedDateTime;
+  /** Converts the date to a native JavaScript Date object. */
+  toDate(): Date;
+  /** Converts the date to an ISO 8601 formatted string, including the UTC offset and time zone identifier. */
+  toString(): string;
+  /** Converts the date to an ISO 8601 formatted string in UTC. */
+  toAbsoluteString(): string;
+  /** Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after. */
+  compare(b: CalendarDate | CalendarDateTime | ZonedDateTime): number;
+}
+
+/** An interface that is compatible with any object with date fields. */
+export interface AnyCalendarDate {
+  readonly calendar: Calendar;
+  readonly era: string;
+  readonly year: number;
+  readonly month: number;
+  readonly day: number;
+  copy(): this;
+}
+
+export type CalendarIdentifier =
+  | "gregory"
+  | "buddhist"
+  | "chinese"
+  | "coptic"
+  | "dangi"
+  | "ethioaa"
+  | "ethiopic"
+  | "hebrew"
+  | "indian"
+  | "islamic"
+  | "islamic-umalqura"
+  | "islamic-tbla"
+  | "islamic-civil"
+  | "islamic-rgsa"
+  | "iso8601"
+  | "japanese"
+  | "persian"
+  | "roc";
+
+/**
+ * The Calendar interface represents a calendar system, including information
+ * about how days, months, years, and eras are organized, and methods to perform
+ * arithmetic on dates.
+ */
+export interface Calendar {
+  /**
+   * A string identifier for the calendar, as defined by Unicode CLDR.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/supportedValuesOf#supported_calendar_types).
+   */
+  identifier: CalendarIdentifier;
+
+  /** Creates a CalendarDate in this calendar from the given Julian day number. */
+  fromJulianDay(jd: number): CalendarDate;
+  /** Converts a date in this calendar to a Julian day number. */
+  toJulianDay(date: AnyCalendarDate): number;
+
+  /** Returns the number of days in the month of the given date. */
+  getDaysInMonth(date: AnyCalendarDate): number;
+  /** Returns the number of months in the year of the given date. */
+  getMonthsInYear(date: AnyCalendarDate): number;
+  /** Returns the number of years in the era of the given date. */
+  getYearsInEra(date: AnyCalendarDate): number;
+  /** Returns a list of era identifiers for the calendar. */
+  getEras(): string[];
+
+  /**
+   * Returns the minimum month number of the given date's year.
+   * Normally, this is 1, but in some calendars such as the Japanese,
+   * eras may begin in the middle of a year.
+   */
+  getMinimumMonthInYear?(date: AnyCalendarDate): number;
+  /**
+   * Returns the minimum day number of the given date's month.
+   * Normally, this is 1, but in some calendars such as the Japanese,
+   * eras may begin in the middle of a month.
+   */
+  getMinimumDayInMonth?(date: AnyCalendarDate): number;
+  /**
+   * Returns a date that is the first day of the month for the given date.
+   * This is used to determine the month that the given date falls in, if
+   * the calendar has months that do not align with the standard calendar months
+   * (e.g. fiscal calendars).
+   */
+  getFormattableMonth?(date: AnyCalendarDate): CalendarDate;
+
+  /** Returns whether the given calendar is the same as this calendar. */
+  isEqual?(calendar: Calendar): boolean;
+
+  /** @private */
+  balanceDate?(date: AnyCalendarDate): void;
+  /** @private */
+  balanceYearMonth?(date: AnyCalendarDate, previousDate: AnyCalendarDate): void;
+  /** @private */
+  constrainDate?(date: AnyCalendarDate): void;
+  /** @private */
+  isInverseEra?(date: AnyCalendarDate): boolean;
+}
+
+/** Represents an amount of time in calendar-specific units, for use when performing arithmetic. */
+export interface DateDuration {
+  /** The number of years to add or subtract. */
+  years?: number;
+  /** The number of months to add or subtract. */
+  months?: number;
+  /** The number of weeks to add or subtract. */
+  weeks?: number;
+  /** The number of days to add or subtract. */
+  days?: number;
+}
+
+/** Represents an amount of time, for use whe performing arithmetic. */
+export interface TimeDuration {
+  /** The number of hours to add or subtract. */
+  hours?: number;
+  /** The number of minutes to add or subtract. */
+  minutes?: number;
+  /** The number of seconds to add or subtract. */
+  seconds?: number;
+  /** The number of milliseconds to add or subtract. */
+  milliseconds?: number;
+}
+
+/** Represents an amount of time with both date and time components, for use when performing arithmetic. */
+export interface DateTimeDuration extends DateDuration, TimeDuration {}
+
+export interface DateFields {
+  era?: string;
+  year?: number;
+  month?: number;
+  day?: number;
+}
+
+export interface TimeFields {
+  hour?: number;
+  minute?: number;
+  second?: number;
+  millisecond?: number;
+}
+
+export type DateField = keyof DateFields;
+export type TimeField = keyof TimeFields;
+
+export type Disambiguation = "compatible" | "earlier" | "later" | "reject";
+
+export interface CycleOptions {
+  /** Whether to round the field value to the nearest interval of the amount. */
+  round?: boolean;
+}
+
+export interface CycleTimeOptions extends CycleOptions {
+  /**
+   * Whether to use 12 or 24 hour time. If 12 hour time is chosen, the resulting value
+   * will remain in the same day period as the original value (e.g. if the value is AM,
+   * the resulting value also be AM).
+   * @default 24
+   */
+  hourCycle?: 12 | 24;
+}
+
+export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;

From 6ad46aa9f15d5de9e8f7ebb2079528d8af149b81 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 10 Jun 2025 20:39:44 +0800
Subject: [PATCH 04/10] chore(deps): pnpm-lock.yaml

---
 pnpm-lock.yaml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86bb045a3d..4c0579eb2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3244,9 +3244,6 @@ importers:
       '@react-aria/utils':
         specifier: 3.29.1
         version: 3.29.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
-      '@react-types/calendar':
-        specifier: 3.7.2
-        version: 3.7.2(react@18.3.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0

From 32b265a0c6ed4b48790e8e871dc047da99c1bae0 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 10 Jun 2025 22:54:34 +0800
Subject: [PATCH 05/10] fix: cast DateValue

---
 .../components/calendar/src/use-calendar-base.ts     |  6 +++---
 packages/components/date-input/src/use-date-input.ts | 12 +++++-------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/components/calendar/src/use-calendar-base.ts b/packages/components/calendar/src/use-calendar-base.ts
index b95e32bba3..c7ceb69a3b 100644
--- a/packages/components/calendar/src/use-calendar-base.ts
+++ b/packages/components/calendar/src/use-calendar-base.ts
@@ -4,7 +4,7 @@ import type {CalendarSlots, SlotsToClasses} from "@heroui/theme";
 import type {AriaCalendarGridProps} from "@react-aria/calendar";
 import type {AriaButtonProps} from "@react-types/button";
 import type {HTMLHeroUIProps, PropGetter} from "@heroui/system";
-import type {Calendar, CalendarIdentifier} from "@internationalized/date";
+import type {DateValue, Calendar, CalendarIdentifier} from "@internationalized/date";
 import type {ButtonProps} from "@heroui/button";
 import type {CalendarState, RangeCalendarState} from "@react-stately/calendar";
 import type {RefObject, ReactNode} from "react";
@@ -223,9 +223,9 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
     isHeaderDefaultExpanded,
     onHeaderExpandedChange = () => {},
     createCalendar: createCalendarProp = globalContext?.createCalendar ?? null,
-    minValue = globalContext?.defaultDates?.minDate ??
+    minValue = (globalContext?.defaultDates?.minDate as DateValue) ??
       new CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1),
-    maxValue = globalContext?.defaultDates?.maxDate ??
+    maxValue = (globalContext?.defaultDates?.maxDate as DateValue) ??
       new CalendarDate(calendarProp, 2099 + gregorianYearOffset, 12, 31),
     prevButtonProps: prevButtonPropsProp,
     nextButtonProps: nextButtonPropsProp,
diff --git a/packages/components/date-input/src/use-date-input.ts b/packages/components/date-input/src/use-date-input.ts
index c01bc67851..c392f45084 100644
--- a/packages/components/date-input/src/use-date-input.ts
+++ b/packages/components/date-input/src/use-date-input.ts
@@ -1,12 +1,10 @@
 import type {DateInputVariantProps, DateInputSlots, SlotsToClasses} from "@heroui/theme";
-import type {AriaDateFieldProps} from "@react-types/datepicker";
-import type {DateValue, SpectrumDatePickerBase} from "@react-types/datepicker";
+import type {AriaDateFieldProps, SpectrumDatePickerBase} from "@react-types/datepicker";
 import type {ReactRef} from "@heroui/react-utils";
 import type {DOMAttributes, GroupDOMAttributes} from "@react-types/shared";
 import type {DateInputGroupProps} from "./date-input-group";
-import type {CalendarIdentifier} from "@internationalized/date";
-import type {PropGetter} from "@heroui/system";
-import type {HTMLHeroUIProps} from "@heroui/system";
+import type {DateValue, CalendarIdentifier} from "@internationalized/date";
+import type {PropGetter, HTMLHeroUIProps} from "@heroui/system";
 
 import {useLocale} from "@react-aria/i18n";
 import {createCalendar, CalendarDate, DateFormatter} from "@internationalized/date";
@@ -151,9 +149,9 @@ export function useDateInput<T extends DateValue>(originalProps: UseDateInputPro
     descriptionProps: descriptionPropsProp,
     validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
     shouldForceLeadingZeros = true,
-    minValue = globalContext?.defaultDates?.minDate ??
+    minValue = (globalContext?.defaultDates?.minDate as DateValue) ??
       new CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1),
-    maxValue = globalContext?.defaultDates?.maxDate ??
+    maxValue = (globalContext?.defaultDates?.maxDate as DateValue) ??
       new CalendarDate(calendarProp, 2099 + gregorianYearOffset, 12, 31),
     createCalendar: createCalendarProp = globalContext?.createCalendar ?? null,
     isInvalid: isInvalidProp = validationState ? validationState === "invalid" : false,

From 6f679cfa4b1704ae6621c573eca69a1cd785f6c2 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Wed, 11 Jun 2025 00:42:58 +0800
Subject: [PATCH 06/10] fix: minValue & maxValue typing

---
 packages/components/calendar/src/use-calendar-base.ts | 8 ++++----
 packages/components/date-input/src/use-date-input.ts  | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/calendar/src/use-calendar-base.ts b/packages/components/calendar/src/use-calendar-base.ts
index c7ceb69a3b..6be6ec3827 100644
--- a/packages/components/calendar/src/use-calendar-base.ts
+++ b/packages/components/calendar/src/use-calendar-base.ts
@@ -223,10 +223,10 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
     isHeaderDefaultExpanded,
     onHeaderExpandedChange = () => {},
     createCalendar: createCalendarProp = globalContext?.createCalendar ?? null,
-    minValue = (globalContext?.defaultDates?.minDate as DateValue) ??
-      new CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1),
-    maxValue = (globalContext?.defaultDates?.maxDate as DateValue) ??
-      new CalendarDate(calendarProp, 2099 + gregorianYearOffset, 12, 31),
+    minValue = (globalContext?.defaultDates?.minDate ??
+      new CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1)) as DateValue,
+    maxValue = (globalContext?.defaultDates?.maxDate ??
+      new CalendarDate(calendarProp, 2099 + gregorianYearOffset, 12, 31)) as DateValue,
     prevButtonProps: prevButtonPropsProp,
     nextButtonProps: nextButtonPropsProp,
     errorMessage,
diff --git a/packages/components/date-input/src/use-date-input.ts b/packages/components/date-input/src/use-date-input.ts
index c392f45084..c4dfb1de19 100644
--- a/packages/components/date-input/src/use-date-input.ts
+++ b/packages/components/date-input/src/use-date-input.ts
@@ -149,10 +149,10 @@ export function useDateInput<T extends DateValue>(originalProps: UseDateInputPro
     descriptionProps: descriptionPropsProp,
     validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
     shouldForceLeadingZeros = true,
-    minValue = (globalContext?.defaultDates?.minDate as DateValue) ??
-      new CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1),
-    maxValue = (globalContext?.defaultDates?.maxDate as DateValue) ??
-      new CalendarDate(calendarProp, 2099 + gregorianYearOffset, 12, 31),
+    minValue = (globalContext?.defaultDates?.minDate ??
+      new CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1)) as DateValue,
+    maxValue = (globalContext?.defaultDates?.maxDate ??
+      new CalendarDate(calendarProp, 2099 + gregorianYearOffset, 12, 31)) as DateValue,
     createCalendar: createCalendarProp = globalContext?.createCalendar ?? null,
     isInvalid: isInvalidProp = validationState ? validationState === "invalid" : false,
     errorMessage,

From e7319a059fafc4c0b70476ece416e1f35679e529 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Wed, 11 Jun 2025 14:04:57 +0800
Subject: [PATCH 07/10] chore(changeset): add changeset

---
 .changeset/nervous-icons-draw.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/nervous-icons-draw.md

diff --git a/.changeset/nervous-icons-draw.md b/.changeset/nervous-icons-draw.md
new file mode 100644
index 0000000000..9145a0ddcc
--- /dev/null
+++ b/.changeset/nervous-icons-draw.md
@@ -0,0 +1,7 @@
+---
+"@heroui/date-input": patch
+"@heroui/calendar": patch
+"@heroui/system": patch
+---
+
+remove `@interationalized/date` from system

From 0dc4a89710ad83c75b399639aebaa13c5b65035e Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 13 Jun 2025 22:24:56 +0800
Subject: [PATCH 08/10] refactor(system): abstract class

---
 packages/core/system/src/types.ts | 220 +++++++++---------------------
 1 file changed, 68 insertions(+), 152 deletions(-)

diff --git a/packages/core/system/src/types.ts b/packages/core/system/src/types.ts
index c9bbea4b4f..d21777eba8 100644
--- a/packages/core/system/src/types.ts
+++ b/packages/core/system/src/types.ts
@@ -7,236 +7,152 @@ export type SpinnerVariants = "default" | "simple" | "gradient" | "wave" | "dots
  * Interationalized Date
  * Retrieved from `@internationalized/date` to avoid importing the entire package.
  */
-export interface CalendarDate {
+export abstract class CalendarDate {
   /** The calendar system associated with this date, e.g. Gregorian. */
-  readonly calendar: Calendar;
+  abstract readonly calendar: Calendar;
   /** The calendar era for this date, e.g. "BC" or "AD". */
-  readonly era: string;
+  abstract readonly era: string;
   /** The year of this date within the era. */
-  readonly year: number;
+  abstract readonly year: number;
   /**
    * The month number within the year. Note that some calendar systems such as Hebrew
    * may have a variable number of months per year. Therefore, month numbers may not
    * always correspond to the same month names in different years.
    */
-  readonly month: number;
+  abstract readonly month: number;
   /** The day number within the month. */
-  readonly day: number;
-  constructor(year: number, month: number, day: number);
-  constructor(era: string, year: number, month: number, day: number);
-  constructor(calendar: Calendar, year: number, month: number, day: number);
-  constructor(calendar: Calendar, era: string, year: number, month: number, day: number);
+  abstract readonly day: number;
   /** Returns a copy of this date. */
-  copy(): CalendarDate;
+  abstract copy(): CalendarDate;
   /** Returns a new `CalendarDate` with the given duration added to it. */
-  add(duration: DateDuration): CalendarDate;
+  abstract add(duration: DateDuration): CalendarDate;
   /** Returns a new `CalendarDate` with the given duration subtracted from it. */
-  subtract(duration: DateDuration): CalendarDate;
+  abstract subtract(duration: DateDuration): CalendarDate;
   /** Returns a new `CalendarDate` with the given fields set to the provided values. Other fields will be constrained accordingly. */
-  set(fields: DateFields): CalendarDate;
+  abstract set(fields: DateFields): CalendarDate;
   /**
    * Returns a new `CalendarDate` with the given field adjusted by a specified amount.
    * When the resulting value reaches the limits of the field, it wraps around.
    */
-  cycle(field: DateField, amount: number, options?: CycleOptions): CalendarDate;
+  abstract cycle(field: DateField, amount: number, options?: CycleOptions): CalendarDate;
   /** Converts the date to a native JavaScript Date object, with the time set to midnight in the given time zone. */
-  toDate(timeZone: string): Date;
+  abstract toDate(timeZone: string): Date;
   /** Converts the date to an ISO 8601 formatted string. */
-  toString(): string;
+  abstract toString(): string;
   /** Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after. */
-  compare(b: AnyCalendarDate): number;
+  abstract compare(b: AnyCalendarDate): number;
 }
 
-export interface CalendarDateTime {
+export abstract class CalendarDateTime {
   /** The calendar system associated with this date, e.g. Gregorian. */
-  readonly calendar: Calendar;
+  abstract readonly calendar: Calendar;
   /** The calendar era for this date, e.g. "BC" or "AD". */
-  readonly era: string;
+  abstract readonly era: string;
   /** The year of this date within the era. */
-  readonly year: number;
+  abstract readonly year: number;
   /**
    * The month number within the year. Note that some calendar systems such as Hebrew
    * may have a variable number of months per year. Therefore, month numbers may not
    * always correspond to the same month names in different years.
    */
-  readonly month: number;
+  abstract readonly month: number;
   /** The day number within the month. */
-  readonly day: number;
+  abstract readonly day: number;
   /** The hour in the day, numbered from 0 to 23. */
-  readonly hour: number;
+  abstract readonly hour: number;
   /** The minute in the hour. */
-  readonly minute: number;
+  abstract readonly minute: number;
   /** The second in the minute. */
-  readonly second: number;
+  abstract readonly second: number;
   /** The millisecond in the second. */
-  readonly millisecond: number;
-  constructor(
-    year: number,
-    month: number,
-    day: number,
-    hour?: number,
-    minute?: number,
-    second?: number,
-    millisecond?: number,
-  );
-  constructor(
-    era: string,
-    year: number,
-    month: number,
-    day: number,
-    hour?: number,
-    minute?: number,
-    second?: number,
-    millisecond?: number,
-  );
-  constructor(
-    calendar: Calendar,
-    year: number,
-    month: number,
-    day: number,
-    hour?: number,
-    minute?: number,
-    second?: number,
-    millisecond?: number,
-  );
-  constructor(
-    calendar: Calendar,
-    era: string,
-    year: number,
-    month: number,
-    day: number,
-    hour?: number,
-    minute?: number,
-    second?: number,
-    millisecond?: number,
-  );
+  abstract readonly millisecond: number;
   /** Returns a copy of this date. */
-  copy(): CalendarDateTime;
+  abstract copy(): CalendarDateTime;
   /** Returns a new `CalendarDateTime` with the given duration added to it. */
-  add(duration: DateTimeDuration): CalendarDateTime;
+  abstract add(duration: DateTimeDuration): CalendarDateTime;
   /** Returns a new `CalendarDateTime` with the given duration subtracted from it. */
-  subtract(duration: DateTimeDuration): CalendarDateTime;
+  abstract subtract(duration: DateTimeDuration): CalendarDateTime;
   /** Returns a new `CalendarDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly. */
-  set(fields: DateFields & TimeFields): CalendarDateTime;
+  abstract set(fields: DateFields & TimeFields): CalendarDateTime;
   /**
    * Returns a new `CalendarDateTime` with the given field adjusted by a specified amount.
    * When the resulting value reaches the limits of the field, it wraps around.
    */
-  cycle(field: DateField | TimeField, amount: number, options?: CycleTimeOptions): CalendarDateTime;
+  abstract cycle(
+    field: DateField | TimeField,
+    amount: number,
+    options?: CycleTimeOptions,
+  ): CalendarDateTime;
   /** Converts the date to a native JavaScript Date object in the given time zone. */
-  toDate(timeZone: string, disambiguation?: Disambiguation): Date;
+  abstract toDate(timeZone: string, disambiguation?: Disambiguation): Date;
   /** Converts the date to an ISO 8601 formatted string. */
-  toString(): string;
+  abstract toString(): string;
   /** Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after. */
-  compare(b: CalendarDate | CalendarDateTime | ZonedDateTime): number;
+  abstract compare(b: CalendarDate | CalendarDateTime | ZonedDateTime): number;
 }
 
-export interface ZonedDateTime {
+export abstract class ZonedDateTime {
   /** The calendar system associated with this date, e.g. Gregorian. */
-  readonly calendar: Calendar;
+  abstract readonly calendar: Calendar;
   /** The calendar era for this date, e.g. "BC" or "AD". */
-  readonly era: string;
+  abstract readonly era: string;
   /** The year of this date within the era. */
-  readonly year: number;
+  abstract readonly year: number;
   /**
    * The month number within the year. Note that some calendar systems such as Hebrew
    * may have a variable number of months per year. Therefore, month numbers may not
    * always correspond to the same month names in different years.
    */
-  readonly month: number;
+  abstract readonly month: number;
   /** The day number within the month. */
-  readonly day: number;
+  abstract readonly day: number;
   /** The hour in the day, numbered from 0 to 23. */
-  readonly hour: number;
+  abstract readonly hour: number;
   /** The minute in the hour. */
-  readonly minute: number;
+  abstract readonly minute: number;
   /** The second in the minute. */
-  readonly second: number;
+  abstract readonly second: number;
   /** The millisecond in the second. */
-  readonly millisecond: number;
+  abstract readonly millisecond: number;
   /** The IANA time zone identifier that this date and time is represented in. */
-  readonly timeZone: string;
+  abstract readonly timeZone: string;
   /** The UTC offset for this time, in milliseconds. */
-  readonly offset: number;
-  constructor(
-    year: number,
-    month: number,
-    day: number,
-    timeZone: string,
-    offset: number,
-    hour?: number,
-    minute?: number,
-    second?: number,
-    millisecond?: number,
-  );
-  constructor(
-    era: string,
-    year: number,
-    month: number,
-    day: number,
-    timeZone: string,
-    offset: number,
-    hour?: number,
-    minute?: number,
-    second?: number,
-    millisecond?: number,
-  );
-  constructor(
-    calendar: Calendar,
-    year: number,
-    month: number,
-    day: number,
-    timeZone: string,
-    offset: number,
-    hour?: number,
-    minute?: number,
-    second?: number,
-    millisecond?: number,
-  );
-  constructor(
-    calendar: Calendar,
-    era: string,
-    year: number,
-    month: number,
-    day: number,
-    timeZone: string,
-    offset: number,
-    hour?: number,
-    minute?: number,
-    second?: number,
-    millisecond?: number,
-  );
+  abstract readonly offset: number;
   /** Returns a copy of this date. */
-  copy(): ZonedDateTime;
+  abstract copy(): ZonedDateTime;
   /** Returns a new `ZonedDateTime` with the given duration added to it. */
-  add(duration: DateTimeDuration): ZonedDateTime;
+  abstract add(duration: DateTimeDuration): ZonedDateTime;
   /** Returns a new `ZonedDateTime` with the given duration subtracted from it. */
-  subtract(duration: DateTimeDuration): ZonedDateTime;
+  abstract subtract(duration: DateTimeDuration): ZonedDateTime;
   /** Returns a new `ZonedDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly. */
-  set(fields: DateFields & TimeFields, disambiguation?: Disambiguation): ZonedDateTime;
+  abstract set(fields: DateFields & TimeFields, disambiguation?: Disambiguation): ZonedDateTime;
   /**
    * Returns a new `ZonedDateTime` with the given field adjusted by a specified amount.
    * When the resulting value reaches the limits of the field, it wraps around.
    */
-  cycle(field: DateField | TimeField, amount: number, options?: CycleTimeOptions): ZonedDateTime;
+  abstract cycle(
+    field: DateField | TimeField,
+    amount: number,
+    options?: CycleTimeOptions,
+  ): ZonedDateTime;
   /** Converts the date to a native JavaScript Date object. */
-  toDate(): Date;
+  abstract toDate(): Date;
   /** Converts the date to an ISO 8601 formatted string, including the UTC offset and time zone identifier. */
-  toString(): string;
+  abstract toString(): string;
   /** Converts the date to an ISO 8601 formatted string in UTC. */
-  toAbsoluteString(): string;
+  abstract toAbsoluteString(): string;
   /** Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after. */
-  compare(b: CalendarDate | CalendarDateTime | ZonedDateTime): number;
+  abstract compare(b: CalendarDate | CalendarDateTime | ZonedDateTime): number;
 }
 
 /** An interface that is compatible with any object with date fields. */
-export interface AnyCalendarDate {
-  readonly calendar: Calendar;
-  readonly era: string;
-  readonly year: number;
-  readonly month: number;
-  readonly day: number;
-  copy(): this;
+export abstract class AnyCalendarDate {
+  abstract readonly calendar: Calendar;
+  abstract readonly era: string;
+  abstract readonly year: number;
+  abstract readonly month: number;
+  abstract readonly day: number;
+  abstract copy(): this;
 }
 
 export type CalendarIdentifier =

From 4321ba33464d160422620d5ae293b6157ab0ff20 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 17 Jun 2025 23:50:47 +0800
Subject: [PATCH 09/10] chore(deps): bump system peer dependency

---
 packages/components/accordion/package.json     | 2 +-
 packages/components/alert/package.json         | 2 +-
 packages/components/autocomplete/package.json  | 2 +-
 packages/components/avatar/package.json        | 2 +-
 packages/components/badge/package.json         | 2 +-
 packages/components/breadcrumbs/package.json   | 2 +-
 packages/components/button/package.json        | 2 +-
 packages/components/calendar/package.json      | 2 +-
 packages/components/card/package.json          | 2 +-
 packages/components/checkbox/package.json      | 2 +-
 packages/components/chip/package.json          | 2 +-
 packages/components/date-input/package.json    | 2 +-
 packages/components/date-picker/package.json   | 2 +-
 packages/components/drawer/package.json        | 2 +-
 packages/components/dropdown/package.json      | 2 +-
 packages/components/form/package.json          | 2 +-
 packages/components/image/package.json         | 2 +-
 packages/components/input-otp/package.json     | 2 +-
 packages/components/input/package.json         | 2 +-
 packages/components/link/package.json          | 2 +-
 packages/components/listbox/package.json       | 2 +-
 packages/components/menu/package.json          | 2 +-
 packages/components/modal/package.json         | 2 +-
 packages/components/navbar/package.json        | 2 +-
 packages/components/number-input/package.json  | 2 +-
 packages/components/pagination/package.json    | 2 +-
 packages/components/popover/package.json       | 2 +-
 packages/components/progress/package.json      | 2 +-
 packages/components/radio/package.json         | 2 +-
 packages/components/ripple/package.json        | 2 +-
 packages/components/scroll-shadow/package.json | 2 +-
 packages/components/select/package.json        | 2 +-
 packages/components/skeleton/package.json      | 2 +-
 packages/components/slider/package.json        | 2 +-
 packages/components/snippet/package.json       | 2 +-
 packages/components/switch/package.json        | 2 +-
 packages/components/table/package.json         | 2 +-
 packages/components/tabs/package.json          | 2 +-
 packages/components/toast/package.json         | 2 +-
 packages/components/tooltip/package.json       | 2 +-
 packages/components/user/package.json          | 2 +-
 plop/component/package.json.hbs                | 2 +-
 42 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index 7b8adb45e7..08ecf6d931 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -44,7 +44,7 @@
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/aria-utils": "workspace:*",
diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
index 2739f52031..c80d03319f 100644
--- a/packages/components/alert/package.json
+++ b/packages/components/alert/package.json
@@ -41,7 +41,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/react-utils": "workspace:*",
diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
index 0e09c5c114..4c6584e65f 100644
--- a/packages/components/autocomplete/package.json
+++ b/packages/components/autocomplete/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.7",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.6",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json
index 0155e31aae..2e9e14549d 100644
--- a/packages/components/avatar/package.json
+++ b/packages/components/avatar/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/badge/package.json b/packages/components/badge/package.json
index 323ddb5b7f..696d348c7c 100644
--- a/packages/components/badge/package.json
+++ b/packages/components/badge/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/breadcrumbs/package.json b/packages/components/breadcrumbs/package.json
index 7c867e05f3..6b0e8c1742 100644
--- a/packages/components/breadcrumbs/package.json
+++ b/packages/components/breadcrumbs/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/react-utils": "workspace:*",
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index 5acd99fe55..843320a0fa 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -38,7 +38,7 @@
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
index bc2e2cd0dc..aed53b1134 100644
--- a/packages/components/calendar/package.json
+++ b/packages/components/calendar/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.7",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.6",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
diff --git a/packages/components/card/package.json b/packages/components/card/package.json
index dc1d0a83ea..c2d57d566f 100644
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@@ -38,7 +38,7 @@
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json
index 8c53cc5d90..ddc09a349b 100644
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.7",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.3",
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0"
diff --git a/packages/components/chip/package.json b/packages/components/chip/package.json
index be36b2018e..11c3a1fef9 100644
--- a/packages/components/chip/package.json
+++ b/packages/components/chip/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-icons": "workspace:*",
diff --git a/packages/components/date-input/package.json b/packages/components/date-input/package.json
index e081fb4fea..19d833d727 100644
--- a/packages/components/date-input/package.json
+++ b/packages/components/date-input/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.10",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.16",
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0"
diff --git a/packages/components/date-picker/package.json b/packages/components/date-picker/package.json
index 535d771e1f..194e70bd66 100644
--- a/packages/components/date-picker/package.json
+++ b/packages/components/date-picker/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.10",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.9",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
diff --git a/packages/components/drawer/package.json b/packages/components/drawer/package.json
index f1810f4fcb..1b114d549c 100644
--- a/packages/components/drawer/package.json
+++ b/packages/components/drawer/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index c5c99a89aa..2d13e45e90 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.7",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.6",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
diff --git a/packages/components/form/package.json b/packages/components/form/package.json
index df09c5d813..a715aa6c50 100644
--- a/packages/components/form/package.json
+++ b/packages/components/form/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.7",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.6",
     "react": ">=18",
     "react-dom": ">=18"
diff --git a/packages/components/image/package.json b/packages/components/image/package.json
index 76f8e4fa09..3720ae19aa 100644
--- a/packages/components/image/package.json
+++ b/packages/components/image/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/input-otp/package.json b/packages/components/input-otp/package.json
index 106a379d65..91fb7f0a8e 100644
--- a/packages/components/input-otp/package.json
+++ b/packages/components/input-otp/package.json
@@ -37,7 +37,7 @@
     "react": ">=18",
     "react-dom": ">=18",
     "@heroui/theme": ">=2.4.16",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/form": "workspace:*",
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
index b25449d918..2874d592d4 100644
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.12",
-    "@heroui/system": ">=2.4.10"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/form": "workspace:*",
diff --git a/packages/components/link/package.json b/packages/components/link/package.json
index ccb07119a5..7a55cfc128 100644
--- a/packages/components/link/package.json
+++ b/packages/components/link/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/listbox/package.json b/packages/components/listbox/package.json
index 4a61be4ff5..f989b2cf46 100644
--- a/packages/components/listbox/package.json
+++ b/packages/components/listbox/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/aria-utils": "workspace:*",
diff --git a/packages/components/menu/package.json b/packages/components/menu/package.json
index 3673a53ad5..5805fd4495 100644
--- a/packages/components/menu/package.json
+++ b/packages/components/menu/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/divider": "workspace:*",
diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
index 7bd5c45f30..93446aab4c 100644
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@@ -38,7 +38,7 @@
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/use-disclosure": "workspace:*",
diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
index b78975360e..f6acfe8932 100644
--- a/packages/components/navbar/package.json
+++ b/packages/components/navbar/package.json
@@ -38,7 +38,7 @@
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/number-input/package.json b/packages/components/number-input/package.json
index 493fea5522..e195db4406 100644
--- a/packages/components/number-input/package.json
+++ b/packages/components/number-input/package.json
@@ -38,7 +38,7 @@
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
-    "@heroui/system": ">=2.4.10",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.16"
   },
   "dependencies": {
diff --git a/packages/components/pagination/package.json b/packages/components/pagination/package.json
index 589a392e6b..cc6a36a919 100644
--- a/packages/components/pagination/package.json
+++ b/packages/components/pagination/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index 25e51efdbe..84cb878aad 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.7",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.6",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
diff --git a/packages/components/progress/package.json b/packages/components/progress/package.json
index 104627353d..4fa3475744 100644
--- a/packages/components/progress/package.json
+++ b/packages/components/progress/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/radio/package.json b/packages/components/radio/package.json
index c7233ceb1e..727e810894 100644
--- a/packages/components/radio/package.json
+++ b/packages/components/radio/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.3",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/form": "workspace:*",
diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
index b193165c9c..a28baa5c50 100644
--- a/packages/components/ripple/package.json
+++ b/packages/components/ripple/package.json
@@ -38,7 +38,7 @@
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/scroll-shadow/package.json b/packages/components/scroll-shadow/package.json
index 291d87f9a4..f4dce15cd4 100644
--- a/packages/components/scroll-shadow/package.json
+++ b/packages/components/scroll-shadow/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index 5570688d73..844ce12d56 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.10",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.12",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
diff --git a/packages/components/skeleton/package.json b/packages/components/skeleton/package.json
index 11b70ffc8b..02a1b32cd1 100644
--- a/packages/components/skeleton/package.json
+++ b/packages/components/skeleton/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*"
diff --git a/packages/components/slider/package.json b/packages/components/slider/package.json
index 6a1649c10c..f34aefc48b 100644
--- a/packages/components/slider/package.json
+++ b/packages/components/slider/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/snippet/package.json b/packages/components/snippet/package.json
index 6ca812c47e..5b16184784 100644
--- a/packages/components/snippet/package.json
+++ b/packages/components/snippet/package.json
@@ -38,7 +38,7 @@
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/button": "workspace:*",
diff --git a/packages/components/switch/package.json b/packages/components/switch/package.json
index 71da1c023e..6ea38c695d 100644
--- a/packages/components/switch/package.json
+++ b/packages/components/switch/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.3",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/table/package.json b/packages/components/table/package.json
index 86bcf9fa0f..7cc55f3ba7 100644
--- a/packages/components/table/package.json
+++ b/packages/components/table/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/checkbox": "workspace:*",
diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index 97ffb72b54..4544363661 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -38,7 +38,7 @@
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/toast/package.json b/packages/components/toast/package.json
index a290750b5a..c8aef219aa 100644
--- a/packages/components/toast/package.json
+++ b/packages/components/toast/package.json
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.10",
+    "@heroui/system": ">=2.4.17",
     "@heroui/theme": ">=2.4.12",
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index b2e7bfd64b..e79defbb1b 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -38,7 +38,7 @@
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",
diff --git a/packages/components/user/package.json b/packages/components/user/package.json
index d79f9da7cc..4ba1a09ee3 100644
--- a/packages/components/user/package.json
+++ b/packages/components/user/package.json
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/avatar": "workspace:*",
diff --git a/plop/component/package.json.hbs b/plop/component/package.json.hbs
index 0583299d97..26a059c962 100644
--- a/plop/component/package.json.hbs
+++ b/plop/component/package.json.hbs
@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/theme": ">=2.4.6",
-    "@heroui/system": ">=2.4.7"
+    "@heroui/system": ">=2.4.17"
   },
   "dependencies": {
     "@heroui/shared-utils": "workspace:*",

From 0714254f4c5025ee56df0acfc29897e25c5ea699 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 17 Jun 2025 23:52:49 +0800
Subject: [PATCH 10/10] chore(changeset): add changeset

---
 .changeset/thick-dogs-march.md | 45 ++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 .changeset/thick-dogs-march.md

diff --git a/.changeset/thick-dogs-march.md b/.changeset/thick-dogs-march.md
new file mode 100644
index 0000000000..3e549fda3d
--- /dev/null
+++ b/.changeset/thick-dogs-march.md
@@ -0,0 +1,45 @@
+---
+"@heroui/scroll-shadow": patch
+"@heroui/autocomplete": patch
+"@heroui/number-input": patch
+"@heroui/breadcrumbs": patch
+"@heroui/date-picker": patch
+"@heroui/date-input": patch
+"@heroui/pagination": patch
+"@heroui/accordion": patch
+"@heroui/input-otp": patch
+"@heroui/calendar": patch
+"@heroui/checkbox": patch
+"@heroui/dropdown": patch
+"@heroui/progress": patch
+"@heroui/skeleton": patch
+"@heroui/listbox": patch
+"@heroui/popover": patch
+"@heroui/snippet": patch
+"@heroui/tooltip": patch
+"@heroui/avatar": patch
+"@heroui/button": patch
+"@heroui/drawer": patch
+"@heroui/navbar": patch
+"@heroui/ripple": patch
+"@heroui/select": patch
+"@heroui/slider": patch
+"@heroui/switch": patch
+"@heroui/alert": patch
+"@heroui/badge": patch
+"@heroui/image": patch
+"@heroui/input": patch
+"@heroui/modal": patch
+"@heroui/radio": patch
+"@heroui/table": patch
+"@heroui/toast": patch
+"@heroui/card": patch
+"@heroui/chip": patch
+"@heroui/form": patch
+"@heroui/link": patch
+"@heroui/menu": patch
+"@heroui/tabs": patch
+"@heroui/user": patch
+---
+
+bump system peer dependencies