rsuite 5.71.0 → 5.73.0

package/esm/Calendar/{TableCell.js → Grid/GridCell.js}

@@ -4,11 +4,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["as", "classPrefix", "disabled", "selected", "date", "onSelect", "unSameMonth", "rangeStart", "rangeEnd", "inRange"];
 import React from 'react';
 import partial from 'lodash/partial';
-import { isSameDay, getDate } from "../internals/utils/date/index.js";
-import { useClassNames, useCustom } from "../internals/hooks/index.js";
-import { useCalendarContext } from "./CalendarContext.js";
-import { getAriaLabel } from "./utils.js";
-var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import { isSameDay, getDate } from "../../internals/utils/date/index.js";
+import { useClassNames, useCustom } from "../../internals/hooks/index.js";
+import { useCalendar } from "../hooks/index.js";
+import { getAriaLabel } from "../utils/index.js";
+var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -22,12 +22,12 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     rangeEnd = props.rangeEnd,
     inRange = props.inRange,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useCalendarContext = useCalendarContext(),
-    onMouseMove = _useCalendarContext.onMouseMove,
-    cellClassName = _useCalendarContext.cellClassName,
-    renderCell = _useCalendarContext.renderCell,
-    renderCellOnPicker = _useCalendarContext.renderCellOnPicker,
-    overrideLocale = _useCalendarContext.locale;
+  var _useCalendar = useCalendar(),
+    onMouseMove = _useCalendar.onMouseMove,
+    cellClassName = _useCalendar.cellClassName,
+    renderCell = _useCalendar.renderCell,
+    renderCellOnPicker = _useCalendar.renderCellOnPicker,
+    overrideLocale = _useCalendar.locale;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
@@ -64,5 +64,5 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix('cell-day')
   }, getDate(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
 });
-TableCell.displayName = 'CalendarTableCell';
-export default TableCell;
+GridCell.displayName = 'CalendarGridCell';
+export default GridCell;

package/esm/Calendar/Grid/GridHeaderRow.d.ts

@@ -0,0 +1,4 @@
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
+export type GridHeaderRowProps = WithAsProps;
+declare const GridHeaderRow: RsRefForwardingComponent<'div', GridHeaderRowProps>;
+export default GridHeaderRow;

package/esm/Calendar/{TableHeaderRow.js → Grid/GridHeaderRow.js}

@@ -4,21 +4,21 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["as", "className", "classPrefix"];
 import React from 'react';
 import upperFirst from 'lodash/upperFirst';
-import { getWeekKeys } from "../internals/utils/date/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
-import { useCalendarContext } from "./CalendarContext.js";
-var TableHeaderRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import { getWeekKeys } from "../../internals/utils/date/index.js";
+import { useClassNames } from "../../internals/hooks/index.js";
+import { useCalendar } from "../hooks/index.js";
+var GridHeaderRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'calendar-table' : _props$classPrefix,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useCalendarContext = useCalendarContext(),
-    locale = _useCalendarContext.locale,
-    showWeekNumbers = _useCalendarContext.showWeekNumbers,
-    isoWeek = _useCalendarContext.isoWeek,
-    weekStart = _useCalendarContext.weekStart;
+  var _useCalendar = useCalendar(),
+    locale = _useCalendar.locale,
+    showWeekNumbers = _useCalendar.showWeekNumbers,
+    isoWeek = _useCalendar.isoWeek,
+    weekStart = _useCalendar.weekStart;
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -43,5 +43,5 @@ var TableHeaderRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, locale === null || locale === void 0 ? void 0 : locale[key]));
   }));
 });
-TableHeaderRow.displayName = 'CalendarTableHeaderRow';
-export default TableHeaderRow;
+GridHeaderRow.displayName = 'CalendarGridHeaderRow';
+export default GridHeaderRow;

package/esm/Calendar/Grid/GridRow.d.ts

@@ -0,0 +1,7 @@
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
+export interface GridRowProps extends WithAsProps {
+    weekendDate?: Date;
+    rowIndex?: number;
+}
+declare const GridRow: RsRefForwardingComponent<'div', GridRowProps>;
+export default GridRow;

package/esm/Calendar/{TableRow.js → Grid/GridRow.js}

@@ -3,12 +3,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["as", "className", "classPrefix", "weekendDate", "rowIndex"];
 import React, { useCallback } from 'react';
-import { isSameDay, addDays, isBefore, isAfter, format } from "../internals/utils/date/index.js";
-import { DATERANGE_DISABLED_TARGET } from "../internals/constants/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
-import { useCalendarContext } from "./CalendarContext.js";
-import TableCell from "./TableCell.js";
-var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import { isSameDay, addDays, isBefore, isAfter, format } from "../../internals/utils/date/index.js";
+import { DATERANGE_DISABLED_TARGET } from "../../internals/constants/index.js";
+import { useClassNames } from "../../internals/hooks/index.js";
+import { useCalendar } from "../hooks/index.js";
+import GridCell from "./GridCell.js";
+var GridRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _locale$dateLocale$op, _locale$dateLocale;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -19,18 +19,18 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     weekendDate = _props$weekendDate === void 0 ? new Date() : _props$weekendDate,
     rowIndex = props.rowIndex,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useCalendarContext = useCalendarContext(),
-    _useCalendarContext$d = _useCalendarContext.date,
-    selected = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-    dateRange = _useCalendarContext.dateRange,
-    hoverRangeValue = _useCalendarContext.hoverRangeValue,
-    isoWeek = _useCalendarContext.isoWeek,
-    weekStart = _useCalendarContext.weekStart,
-    showWeekNumbers = _useCalendarContext.showWeekNumbers,
-    locale = _useCalendarContext.locale,
-    inSameMonth = _useCalendarContext.inSameMonth,
-    disabledDate = _useCalendarContext.disabledDate,
-    onSelect = _useCalendarContext.onSelect;
+  var _useCalendar = useCalendar(),
+    _useCalendar$date = _useCalendar.date,
+    selected = _useCalendar$date === void 0 ? new Date() : _useCalendar$date,
+    dateRange = _useCalendar.dateRange,
+    hoverRangeValue = _useCalendar.hoverRangeValue,
+    isoWeek = _useCalendar.isoWeek,
+    weekStart = _useCalendar.weekStart,
+    showWeekNumbers = _useCalendar.showWeekNumbers,
+    locale = _useCalendar.locale,
+    inSameMonth = _useCalendar.inSameMonth,
+    disabledDate = _useCalendar.disabledDate,
+    onSelect = _useCalendar.onSelect;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
@@ -79,7 +79,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
           inRange = true;
         }
       }
-      days.push( /*#__PURE__*/React.createElement(TableCell, {
+      days.push( /*#__PURE__*/React.createElement(GridCell, {
         key: format(thisDate, 'yyyy-MM-dd'),
         date: thisDate,
         disabled: disabled,
@@ -113,5 +113,5 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix('cell-week-number')
   }, week), renderDays());
 });
-TableRow.displayName = 'CalendarTableRow';
-export default TableRow;
+GridRow.displayName = 'CalendarGridRow';
+export default GridRow;

package/esm/Calendar/Grid/index.d.ts

@@ -0,0 +1,2 @@
+import Grid from './Grid';
+export default Grid;

package/esm/Calendar/Grid/index.js

@@ -0,0 +1,3 @@
+'use client';
+import Grid from "./Grid.js";
+export default Grid;

package/esm/Calendar/MonthDropdown/MonthDropdown.d.ts

@@ -0,0 +1,11 @@
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
+export interface MonthDropdownProps extends WithAsProps {
+    show?: boolean;
+    limitStartYear?: number;
+    limitEndYear?: number;
+    height?: number;
+    width?: number;
+    disabledMonth?: (date: Date) => boolean;
+}
+declare const MonthDropdown: RsRefForwardingComponent<'div', MonthDropdownProps>;
+export default MonthDropdown;

package/esm/Calendar/{MonthDropdown.js → MonthDropdown/MonthDropdown.js}

@@ -4,21 +4,17 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["as", "className", "classPrefix", "limitStartYear", "limitEndYear", "show", "height", "width", "disabledMonth"],
   _excluded2 = ["className", "itemClassName", "as", "itemAs"];
 import React, { useCallback, useMemo } from 'react';
-import { getDaysInMonth, getMonth, getYear } from "../internals/utils/date/index.js";
-import { AutoSizer, FixedSizeList } from "../internals/Windowing/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { getMonth, getYear } from "../../internals/utils/date/index.js";
+import { AutoSizer, FixedSizeList } from "../../internals/Windowing/index.js";
+import { useClassNames } from "../../internals/hooks/index.js";
 import MonthDropdownItem from "./MonthDropdownItem.js";
-import { useCalendarContext } from "./CalendarContext.js";
-var monthMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-export function isEveryDateInMonth(year, month, predicate) {
-  var days = getDaysInMonth(new Date(year, month));
-  for (var i = 1; i <= days; i++) {
-    if (!predicate(new Date(year, month, i))) {
-      return false;
-    }
-  }
-  return true;
-}
+import { useCalendar } from "../hooks/index.js";
+import { isEveryDateInMonth } from "../utils/index.js";
+// Array representing the index of each month
+var MONTHS_INDEX = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+// The height of each item
+var ITEM_SIZE = 108;
 var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -35,11 +31,11 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     defaultWidth = _props$width === void 0 ? 256 : _props$width,
     disabledMonth = props.disabledMonth,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useCalendarContext = useCalendarContext(),
-    _useCalendarContext$d = _useCalendarContext.date,
-    date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-    targetId = _useCalendarContext.targetId,
-    monthDropdownProps = _useCalendarContext.monthDropdownProps;
+  var _useCalendar = useCalendar(),
+    _useCalendar$date = _useCalendar.date,
+    date = _useCalendar$date === void 0 ? new Date() : _useCalendar$date,
+    targetId = _useCalendar.targetId,
+    monthDropdownProps = _useCalendar.monthDropdownProps;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -86,7 +82,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       role: "rowheader"
     }, year), /*#__PURE__*/React.createElement("div", {
       className: prefix('list')
-    }, monthMap.map(function (item, month) {
+    }, MONTHS_INDEX.map(function (item, month) {
       return /*#__PURE__*/React.createElement(MonthDropdownItem, {
         disabled: isMonthDisabled(year, month),
         active: isSelectedYear && month === selectedMonth,
@@ -99,9 +95,8 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix(), {
     show: show
   });
-  var itemSize = 75;
   var initialItemIndex = getYear(date) - startYear;
-  var initialScrollOffset = itemSize * initialItemIndex;
+  var initialScrollOffset = ITEM_SIZE * initialItemIndex;
   if (!show) {
     return null;
   }
@@ -125,7 +120,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: merge(prefix('row-wrapper'), listClassName),
       width: width || defaultWidth,
       height: height || defaultHeight,
-      itemSize: itemSize,
+      itemSize: ITEM_SIZE,
       itemCount: rowCount,
       initialScrollOffset: initialScrollOffset,
       innerElementType: List

package/esm/Calendar/{MonthDropdownItem.d.ts → MonthDropdown/MonthDropdownItem.d.ts}

@@ -1,4 +1,4 @@
-import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
 export interface MonthDropdownItemProps extends WithAsProps {
     month?: number;
     year?: number;

package/esm/Calendar/{MonthDropdownItem.js → MonthDropdown/MonthDropdownItem.js}

@@ -2,12 +2,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["as", "className", "classPrefix", "active", "disabled", "month", "year"];
-import React, { useCallback, useMemo } from 'react';
-import { setMonth, setYear } from "../internals/utils/date/index.js";
-import { useClassNames, useCustom } from "../internals/hooks/index.js";
-import { composeFunctions } from "../internals/utils/index.js";
-import { useCalendarContext } from "./CalendarContext.js";
-import { getAriaLabel } from "./utils.js";
+import React, { useMemo } from 'react';
+import { setMonth, setYear } from "../../internals/utils/date/index.js";
+import { useClassNames, useCustom, useEventCallback } from "../../internals/hooks/index.js";
+import { composeFunctions } from "../../internals/utils/index.js";
+import { useCalendar } from "../hooks/index.js";
+import { getAriaLabel } from "../utils/index.js";
 var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -20,9 +20,9 @@ var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     month = _props$month === void 0 ? 0 : _props$month,
     year = props.year,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useCalendarContext = useCalendarContext(),
-    date = _useCalendarContext.date,
-    onSelect = _useCalendarContext.onChangeMonth;
+  var _useCalendar = useCalendar(),
+    date = _useCalendar.date,
+    onSelect = _useCalendar.onChangeMonth;
   var _useCustom = useCustom('Calendar'),
     locale = _useCustom.locale,
     formatDate = _useCustom.formatDate;
@@ -37,12 +37,12 @@ var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return date;
   }, [date, month, year]);
-  var handleClick = useCallback(function (event) {
+  var handleClick = useEventCallback(function (event) {
     if (disabled) {
       return;
     }
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(currentMonth, event);
-  }, [currentMonth, disabled, onSelect]);
+  });
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -65,7 +65,7 @@ var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: handleClick
   }, rest), /*#__PURE__*/React.createElement("span", {
     className: prefix('content')
-  }, month));
+  }, formatDate(currentMonth, 'MMM')));
 });
 MonthDropdownItem.displayName = 'MonthDropdownItem';
 export default MonthDropdownItem;

package/esm/Calendar/MonthDropdown/index.d.ts

@@ -0,0 +1,2 @@
+import MonthDropdown from './MonthDropdown';
+export default MonthDropdown;

package/esm/Calendar/MonthDropdown/index.js

@@ -0,0 +1,3 @@
+'use client';
+import MonthDropdown from "./MonthDropdown.js";
+export default MonthDropdown;

package/esm/Calendar/TimeDropdown/TimeColumn.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TimeColumnProps {
+    prefix: (name: string) => string;
+    title: React.ReactNode;
+    children: React.ReactNode;
+}
+declare const TimeColumn: (props: TimeColumnProps) => React.JSX.Element;
+export default TimeColumn;

package/esm/Calendar/TimeDropdown/TimeColumn.js

@@ -0,0 +1,22 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["prefix", "title", "children"];
+import React from 'react';
+import ScrollView from "../../internals/ScrollView/index.js";
+var TimeColumn = function TimeColumn(props) {
+  var prefix = props.prefix,
+    title = props.title,
+    children = props.children,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('column')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix('column-title')
+  }, title), /*#__PURE__*/React.createElement(ScrollView, _extends({
+    customScrollbar: true,
+    as: "ul",
+    role: "listbox"
+  }, rest), children));
+};
+export default TimeColumn;

package/{cjs/Calendar → esm/Calendar/TimeDropdown}/TimeDropdown.d.ts

@@ -1,7 +1,7 @@
-import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
 export interface TimeDropdownProps extends WithAsProps {
     show?: boolean;
-    showMeridian?: boolean;
+    showMeridiem?: boolean;
     disabledDate?: (date: Date) => boolean;
     disabledHours?: (hour: number, date: Date) => boolean;
     disabledMinutes?: (minute: number, date: Date) => boolean;
@@ -10,28 +10,5 @@ export interface TimeDropdownProps extends WithAsProps {
     hideMinutes?: (minute: number, date: Date) => boolean;
     hideSeconds?: (second: number, date: Date) => boolean;
 }
-/**
- * Get the effective range of hours, minutes and seconds
- * @param meridian
- */
-export declare function getRanges(meridian: boolean): {
-    hours: {
-        start: number;
-        end: number;
-    };
-    minutes: {
-        start: number;
-        end: number;
-    };
-    seconds: {
-        start: number;
-        end: number;
-    };
-};
-/**
- * Convert the 24-hour clock to the 12-hour clock
- * @param hours
- */
-export declare function getMeridianHours(hours: number): number;
 declare const TimeDropdown: RsRefForwardingComponent<'div', TimeDropdownProps>;
 export default TimeDropdown;

package/esm/Calendar/TimeDropdown/TimeDropdown.js

@@ -0,0 +1,161 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["as", "className", "classPrefix", "show", "showMeridiem"];
+import React, { useEffect, useRef } from 'react';
+import partial from 'lodash/partial';
+import camelCase from 'lodash/camelCase';
+import isNumber from 'lodash/isNumber';
+import { useClassNames, useEventCallback } from "../../internals/hooks/index.js";
+import { startOfToday, getHours, setHours, setMinutes, setSeconds, omitHideDisabledProps } from "../../internals/utils/date/index.js";
+import { useCalendar } from "../hooks/index.js";
+import TimeColumn from "./TimeColumn.js";
+import { getTimeLimits, getClockTime, scrollToTime, formatWithLeadingZero } from "./utils/index.js";
+var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'calendar-time-dropdown' : _props$classPrefix,
+    show = props.show,
+    _props$showMeridiem = props.showMeridiem,
+    showMeridiem = _props$showMeridiem === void 0 ? false : _props$showMeridiem,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useCalendar = useCalendar(),
+    locale = _useCalendar.locale,
+    format = _useCalendar.format,
+    date = _useCalendar.date,
+    onSelect = _useCalendar.onChangeTime,
+    targetId = _useCalendar.targetId;
+  var rowRef = useRef(null);
+  useEffect(function () {
+    var time = getClockTime({
+      format: format,
+      date: date,
+      showMeridiem: showMeridiem
+    });
+    // The currently selected time scrolls to the visible range.
+    if (show && rowRef.current) {
+      scrollToTime(time, rowRef.current);
+    }
+  }, [date, format, show, showMeridiem]);
+  var handleClick = useEventCallback(function (type, d, event) {
+    var nextDate = date || startOfToday();
+    switch (type) {
+      case 'hours':
+        nextDate = setHours(nextDate, showMeridiem && getHours(nextDate) >= 12 ? d + 12 : d);
+        break;
+      case 'minutes':
+        nextDate = setMinutes(nextDate, d);
+        break;
+      case 'seconds':
+        nextDate = setSeconds(nextDate, d);
+        break;
+    }
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextDate, event);
+  });
+  var handleClickMeridiem = useEventCallback(function (meridiem, event) {
+    var tempDate = date || startOfToday();
+    var hours = getHours(tempDate);
+    var isAM = hours < 12;
+    var adjustHours = function adjustHours(meridiem, hours) {
+      if (meridiem === 'AM') {
+        return isAM ? hours : hours - 12;
+      }
+      return isAM ? hours + 12 : hours;
+    };
+    var nextHours = adjustHours(meridiem, hours);
+    var nextDate = setHours(tempDate, nextHours);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextDate, event);
+  });
+  var _useClassNames = useClassNames(classPrefix),
+    prefix = _useClassNames.prefix,
+    rootPrefix = _useClassNames.rootPrefix,
+    merge = _useClassNames.merge;
+  var renderColumn = function renderColumn(type, value) {
+    if (!isNumber(value)) {
+      return null;
+    }
+    var _getTimeLimits$type = getTimeLimits(showMeridiem)[type],
+      start = _getTimeLimits$type.start,
+      end = _getTimeLimits$type.end;
+    var items = [];
+    var hideFunc = props[camelCase("hide_" + type)];
+    var disabledFunc = props[camelCase("disabled_" + type)];
+    for (var i = start; i <= end; i += 1) {
+      if (!(hideFunc !== null && hideFunc !== void 0 && hideFunc(i, date))) {
+        var disabled = disabledFunc === null || disabledFunc === void 0 ? void 0 : disabledFunc(i, date);
+        var itemClasses = prefix('cell', {
+          'cell-active': value === i,
+          'cell-disabled': disabled
+        });
+        items.push( /*#__PURE__*/React.createElement("li", {
+          key: i,
+          role: "option",
+          tabIndex: -1,
+          "aria-label": i + " " + type,
+          "aria-selected": value === i,
+          "aria-disabled": disabled,
+          "data-key": type + "-" + i,
+          onClick: !disabled ? partial(handleClick, type, i) : undefined
+        }, /*#__PURE__*/React.createElement("span", {
+          className: itemClasses
+        }, showMeridiem && type === 'hours' && i === 0 ? 12 : formatWithLeadingZero(i))));
+      }
+    }
+    return /*#__PURE__*/React.createElement(TimeColumn, {
+      prefix: prefix,
+      title: locale === null || locale === void 0 ? void 0 : locale[type],
+      "data-type": type,
+      "aria-label": "Select " + type
+    }, items);
+  };
+  var renderMeridiemColumn = function renderMeridiemColumn() {
+    var columns = ['AM', 'PM'];
+    return /*#__PURE__*/React.createElement(TimeColumn, {
+      prefix: prefix,
+      title: 'AM/PM',
+      "data-type": "meridiem",
+      "aria-label": "Select meridiem"
+    }, columns.map(function (meridiem, index) {
+      var ampm = date && (getHours(date) >= 12 ? 'PM' : 'AM');
+      var itemClasses = prefix('cell', {
+        'cell-active': ampm === meridiem
+      });
+      return /*#__PURE__*/React.createElement("li", {
+        key: index,
+        role: "option",
+        tabIndex: -1,
+        "aria-label": meridiem,
+        "aria-selected": ampm === meridiem,
+        "data-key": "meridiem-" + meridiem,
+        onClick: partial(handleClickMeridiem, meridiem)
+      }, /*#__PURE__*/React.createElement("span", {
+        className: itemClasses
+      }, meridiem));
+    }));
+  };
+  var time = getClockTime({
+    format: format,
+    date: date,
+    showMeridiem: showMeridiem
+  });
+  var classes = merge(className, rootPrefix(classPrefix), {
+    show: show
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    role: "group",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
+  }, omitHideDisabledProps(rest), {
+    ref: ref,
+    className: classes
+  }), /*#__PURE__*/React.createElement("div", {
+    className: prefix('content')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix('row'),
+    ref: rowRef
+  }, renderColumn('hours', time.hours), renderColumn('minutes', time.minutes), renderColumn('seconds', time.seconds), showMeridiem && renderMeridiemColumn())));
+});
+TimeDropdown.displayName = 'TimeDropdown';
+export default TimeDropdown;

package/esm/Calendar/TimeDropdown/index.d.ts

@@ -0,0 +1,2 @@
+import TimeDropdown from './TimeDropdown';
+export default TimeDropdown;

package/esm/Calendar/TimeDropdown/index.js

@@ -0,0 +1,3 @@
+'use client';
+import TimeDropdown from "./TimeDropdown.js";
+export default TimeDropdown;

package/esm/Calendar/TimeDropdown/utils/formatWithLeadingZero.d.ts

@@ -0,0 +1 @@
+export declare const formatWithLeadingZero: (number: number) => string;

package/esm/Calendar/TimeDropdown/utils/formatWithLeadingZero.js

@@ -0,0 +1,4 @@
+'use client';
+export var formatWithLeadingZero = function formatWithLeadingZero(number) {
+  return String(number).padStart(2, '0');
+};

package/esm/Calendar/TimeDropdown/utils/getClockTime.d.ts

@@ -0,0 +1,11 @@
+export interface ClockTime {
+    hours?: number | null;
+    minutes?: number | null;
+    seconds?: number | null;
+    meridiem?: 'AM' | 'PM' | null;
+}
+export declare function getClockTime(props: {
+    date?: Date;
+    format?: string;
+    showMeridiem: boolean;
+}): ClockTime;

package/esm/Calendar/TimeDropdown/utils/getClockTime.js

@@ -0,0 +1,39 @@
+'use client';
+import { getHours, getMinutes, getSeconds } from "../../../internals/utils/date/index.js";
+/**
+ * Convert the 24-hour clock to the 12-hour clock
+ * @param hours
+ */
+function getMeridiemHours(hours) {
+  return hours >= 12 ? hours - 12 : hours;
+}
+export function getClockTime(props) {
+  var format = props.format,
+    date = props.date,
+    showMeridiem = props.showMeridiem;
+  var clockTime = {
+    hours: null,
+    minutes: null,
+    seconds: null,
+    meridiem: null
+  };
+  if (!format) {
+    return clockTime;
+  }
+
+  // If date is provided, extract hours and meridiem
+  if (/(H|h)/.test(format) && date) {
+    var hours = getHours(date);
+    clockTime.hours = showMeridiem ? getMeridiemHours(hours) : hours;
+    clockTime.meridiem = hours >= 12 ? 'PM' : 'AM';
+  }
+  // Extract minutes if 'm' is present in format and date is provided
+  if (/m/.test(format) && date) {
+    clockTime.minutes = getMinutes(date);
+  }
+  // // Extract seconds if 's' is present in format and date is provided
+  if (/s/.test(format) && date) {
+    clockTime.seconds = getSeconds(date);
+  }
+  return clockTime;
+}