@kalyx/react 1.0.0-rc.6 → 1.0.0-rc.8

package/dist/index.d.cts

@@ -82,13 +82,28 @@ interface DatePickerCalendarClassNames {
     dayDisabled?: string;
     dayOutsideMonth?: string;
     weekdayHeader?: string;
+    /** Header cell at the top of the week-number column. Rendered only when `showWeekNumber` is set. */
+    weekNumberHeader?: string;
+    /** Each row's week-number cell. Rendered only when `showWeekNumber` is set. */
+    weekNumber?: string;
 }
 interface DatePickerCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
     classNames?: DatePickerCalendarClassNames;
     /** Called when the title ("January 2026") is clicked. Useful for switching to Month/Year views. */
     onTitleClick?: () => void;
+    /**
+     * Render an ISO 8601 week-number column on the left of the grid (1–53).
+     * The column is a `<th scope="row">`; it doesn't participate in the WAI-ARIA grid
+     * data region, so keyboard navigation across the date cells is unaffected.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Always render 6 weeks (42 cells), even when the month fits in 4 or 5 rows. Useful for
+     * popover layouts that need a fixed height across month navigation.
+     */
+    fixedWeeks?: boolean;
 }
-declare function DatePickerCalendar({ classNames, onTitleClick, ...props }: DatePickerCalendarProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerCalendar({ classNames, onTitleClick, showWeekNumber, fixedWeeks, ...props }: DatePickerCalendarProps): react_jsx_runtime.JSX.Element;
 
 interface DatePickerMonthGridClassNames {
     root?: string;
@@ -322,6 +337,10 @@ interface RangePickerCalendarClassNames {
     dayRangeEnd?: string;
     dayInRange?: string;
     weekdayHeader?: string;
+    /** Header cell at the top of the week-number column. Rendered only when `showWeekNumber` is set. */
+    weekNumberHeader?: string;
+    /** Each row's week-number cell. Rendered only when `showWeekNumber` is set. */
+    weekNumber?: string;
 }
 /**
  * Selection mode for the calendar grid.
@@ -333,8 +352,18 @@ interface RangePickerCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>,
     classNames?: RangePickerCalendarClassNames;
     /** @default 'range' */
     selectionMode?: RangePickerCalendarSelectionMode;
+    /**
+     * Render an ISO 8601 week-number column on the left of the grid (1–53).
+     * The column is a `<th scope="row">`; it doesn't participate in the WAI-ARIA grid
+     * data region, so keyboard navigation across the date cells is unaffected.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Always render 6 weeks (42 cells), even when the month fits in 4 or 5 rows.
+     */
+    fixedWeeks?: boolean;
 }
-declare function RangePickerCalendar({ classNames, selectionMode, ...props }: RangePickerCalendarProps): react_jsx_runtime.JSX.Element;
+declare function RangePickerCalendar({ classNames, selectionMode, showWeekNumber, fixedWeeks, ...props }: RangePickerCalendarProps): react_jsx_runtime.JSX.Element;
 
 /** Predefined preset keys. Custom ranges are also supported. */
 type PresetKey = 'today' | 'yesterday' | 'last7days' | 'last30days' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'thisYear';
@@ -466,12 +495,19 @@ interface TimePickerRootProps {
     disabled?: boolean;
     /** Read-only */
     readOnly?: boolean;
+    /**
+     * Programmatic per-slot disable predicate. Returns `true` for any `(hours, minutes)` pair
+     * that should be unselectable. Equivalent to react-datepicker's `filterTime`. Use cases:
+     * business hours, lunch breaks, blackout slots. Hours are disabled only when the predicate
+     * returns `true` for every step within the hour.
+     */
+    filterTime?: (hours: number, minutes: number) => boolean;
     /** Override ARIA labels (defaults to English) */
     labels?: Partial<TimePickerLabels>;
     /** Child components */
     children: ReactNode;
 }
-declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
+declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
 
 interface TimePickerHourListClassNames {
     root?: string;

package/dist/index.d.ts

@@ -82,13 +82,28 @@ interface DatePickerCalendarClassNames {
     dayDisabled?: string;
     dayOutsideMonth?: string;
     weekdayHeader?: string;
+    /** Header cell at the top of the week-number column. Rendered only when `showWeekNumber` is set. */
+    weekNumberHeader?: string;
+    /** Each row's week-number cell. Rendered only when `showWeekNumber` is set. */
+    weekNumber?: string;
 }
 interface DatePickerCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
     classNames?: DatePickerCalendarClassNames;
     /** Called when the title ("January 2026") is clicked. Useful for switching to Month/Year views. */
     onTitleClick?: () => void;
+    /**
+     * Render an ISO 8601 week-number column on the left of the grid (1–53).
+     * The column is a `<th scope="row">`; it doesn't participate in the WAI-ARIA grid
+     * data region, so keyboard navigation across the date cells is unaffected.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Always render 6 weeks (42 cells), even when the month fits in 4 or 5 rows. Useful for
+     * popover layouts that need a fixed height across month navigation.
+     */
+    fixedWeeks?: boolean;
 }
-declare function DatePickerCalendar({ classNames, onTitleClick, ...props }: DatePickerCalendarProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerCalendar({ classNames, onTitleClick, showWeekNumber, fixedWeeks, ...props }: DatePickerCalendarProps): react_jsx_runtime.JSX.Element;
 
 interface DatePickerMonthGridClassNames {
     root?: string;
@@ -322,6 +337,10 @@ interface RangePickerCalendarClassNames {
     dayRangeEnd?: string;
     dayInRange?: string;
     weekdayHeader?: string;
+    /** Header cell at the top of the week-number column. Rendered only when `showWeekNumber` is set. */
+    weekNumberHeader?: string;
+    /** Each row's week-number cell. Rendered only when `showWeekNumber` is set. */
+    weekNumber?: string;
 }
 /**
  * Selection mode for the calendar grid.
@@ -333,8 +352,18 @@ interface RangePickerCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>,
     classNames?: RangePickerCalendarClassNames;
     /** @default 'range' */
     selectionMode?: RangePickerCalendarSelectionMode;
+    /**
+     * Render an ISO 8601 week-number column on the left of the grid (1–53).
+     * The column is a `<th scope="row">`; it doesn't participate in the WAI-ARIA grid
+     * data region, so keyboard navigation across the date cells is unaffected.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Always render 6 weeks (42 cells), even when the month fits in 4 or 5 rows.
+     */
+    fixedWeeks?: boolean;
 }
-declare function RangePickerCalendar({ classNames, selectionMode, ...props }: RangePickerCalendarProps): react_jsx_runtime.JSX.Element;
+declare function RangePickerCalendar({ classNames, selectionMode, showWeekNumber, fixedWeeks, ...props }: RangePickerCalendarProps): react_jsx_runtime.JSX.Element;
 
 /** Predefined preset keys. Custom ranges are also supported. */
 type PresetKey = 'today' | 'yesterday' | 'last7days' | 'last30days' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'thisYear';
@@ -466,12 +495,19 @@ interface TimePickerRootProps {
     disabled?: boolean;
     /** Read-only */
     readOnly?: boolean;
+    /**
+     * Programmatic per-slot disable predicate. Returns `true` for any `(hours, minutes)` pair
+     * that should be unselectable. Equivalent to react-datepicker's `filterTime`. Use cases:
+     * business hours, lunch breaks, blackout slots. Hours are disabled only when the predicate
+     * returns `true` for every step within the hour.
+     */
+    filterTime?: (hours: number, minutes: number) => boolean;
     /** Override ARIA labels (defaults to English) */
     labels?: Partial<TimePickerLabels>;
     /** Child components */
     children: ReactNode;
 }
-declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
+declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
 
 interface TimePickerHourListClassNames {
     root?: string;

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext, forwardRef, useState, useRef, useCallback, useContext, useId, useMemo, useEffect } from 'react';
-import { parseInputValue, formatTimeString, parseTimeString, getTimeInTimezone, getTime, DateFnsAdapter, DEFAULT_DATEPICKER_LABELS, civilMidnightFromUtcDay, getMonthName, getWeekdayNames, getCalendarDays, formatMonthYear, isDateDisabled, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, setTimeInTimezone, setTime, to12Hour, to24Hour, generateMinutes, generateHours, formatFullDate } from '@kalyx/core';
+import { parseInputValue, formatTimeString, parseTimeString, getTimeInTimezone, getTime, DateFnsAdapter, DEFAULT_DATEPICKER_LABELS, civilMidnightFromUtcDay, getMonthName, getWeekdayNames, getCalendarDays, formatMonthYear, isDateDisabled, getISOWeekNumber, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, setTimeInTimezone, setTime, to12Hour, to24Hour, generateMinutes, generateHours, formatFullDate } from '@kalyx/core';
 export { DateFnsAdapter } from '@kalyx/core';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { offset, flip, shift, useFloating, autoUpdate } from '@floating-ui/react';
@@ -464,6 +464,8 @@ var srOnly = {
 function DatePickerCalendar({
   classNames,
   onTitleClick,
+  showWeekNumber = false,
+  fixedWeeks = false,
   ...props
 }) {
   const ctx = useDatePickerContext("DatePicker.Calendar");
@@ -477,10 +479,21 @@ function DatePickerCalendar({
       selected: ctx.value,
       focusedDate,
       disabled,
-      timezone: displayTimezone
+      timezone: displayTimezone,
+      fixedWeeks
     }),
-    [viewMonth, adapter, weekStartsOn, ctx.value, focusedDate, disabled, displayTimezone]
+    [
+      viewMonth,
+      adapter,
+      weekStartsOn,
+      ctx.value,
+      focusedDate,
+      disabled,
+      displayTimezone,
+      fixedWeeks
+    ]
   );
+  const thursdayIndex = weekStartsOn === 0 ? 4 : 3;
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
   const title = formatMonthYear(year, month, locale);
@@ -621,61 +634,76 @@ function DatePickerCalendar({
         className: classNames?.grid,
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { role: "row", "aria-rowindex": 1, children: weekdays.map((day, colIndex) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              role: "columnheader",
-              abbr: day.full,
-              scope: "col",
-              "aria-colindex": colIndex + 1,
-              className: classNames?.weekdayHeader,
-              children: day.short
-            },
-            day.short
-          )) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
+            showWeekNumber ? /* @__PURE__ */ jsx("th", { scope: "col", "aria-hidden": "true", className: classNames?.weekNumberHeader, children: "#" }) : null,
+            weekdays.map((day, colIndex) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                role: "columnheader",
+                abbr: day.full,
+                scope: "col",
+                "aria-colindex": colIndex + 1,
+                className: classNames?.weekdayHeader,
+                children: day.short
+              },
+              day.short
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxs(
             "tr",
             {
               role: "row",
               "aria-rowindex": weekIndex + 2,
               className: classNames?.gridRow,
-              children: week.map((day, colIndex) => {
-                const dayClasses = [
-                  classNames?.day,
-                  day.isSelected && classNames?.daySelected,
-                  day.isToday && classNames?.dayToday,
-                  day.isDisabled && classNames?.dayDisabled,
-                  !day.isCurrentMonth && classNames?.dayOutsideMonth
-                ].filter(Boolean).join(" ") || void 0;
-                return /* @__PURE__ */ jsx(
-                  "td",
+              children: [
+                showWeekNumber ? /* @__PURE__ */ jsx(
+                  "th",
                   {
-                    role: "gridcell",
-                    "aria-colindex": colIndex + 1,
-                    "aria-selected": day.isSelected || void 0,
-                    "aria-disabled": day.isDisabled || void 0,
-                    "aria-current": day.isToday ? "date" : void 0,
-                    className: classNames?.gridCell,
-                    children: /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        tabIndex: day.isFocused ? 0 : -1,
-                        disabled: day.isDisabled,
-                        "data-focused": day.isFocused || void 0,
-                        "data-selected": day.isSelected || void 0,
-                        "data-today": day.isToday || void 0,
-                        "data-outside-month": !day.isCurrentMonth || void 0,
-                        className: dayClasses,
-                        onClick: () => handleDayClick(day),
-                        "aria-label": safeFormatFullDate(day.isoString, locale),
-                        children: day.dayNumber
-                      }
-                    )
-                  },
-                  day.isoString
-                );
-              })
+                    scope: "row",
+                    "aria-hidden": "true",
+                    className: classNames?.weekNumber,
+                    "data-week-number": true,
+                    children: getISOWeekNumber(week[thursdayIndex].isoString)
+                  }
+                ) : null,
+                week.map((day, colIndex) => {
+                  const dayClasses = [
+                    classNames?.day,
+                    day.isSelected && classNames?.daySelected,
+                    day.isToday && classNames?.dayToday,
+                    day.isDisabled && classNames?.dayDisabled,
+                    !day.isCurrentMonth && classNames?.dayOutsideMonth
+                  ].filter(Boolean).join(" ") || void 0;
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      role: "gridcell",
+                      "aria-colindex": colIndex + 1,
+                      "aria-selected": day.isSelected || void 0,
+                      "aria-disabled": day.isDisabled || void 0,
+                      "aria-current": day.isToday ? "date" : void 0,
+                      className: classNames?.gridCell,
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          tabIndex: day.isFocused ? 0 : -1,
+                          disabled: day.isDisabled,
+                          "data-focused": day.isFocused || void 0,
+                          "data-selected": day.isSelected || void 0,
+                          "data-today": day.isToday || void 0,
+                          "data-outside-month": !day.isCurrentMonth || void 0,
+                          className: dayClasses,
+                          onClick: () => handleDayClick(day),
+                          "aria-label": safeFormatFullDate(day.isoString, locale),
+                          children: day.dayNumber
+                        }
+                      )
+                    },
+                    day.isoString
+                  );
+                })
+              ]
             },
             weekIndex
           )) })
@@ -1338,6 +1366,8 @@ var srOnly2 = {
 function RangePickerCalendar({
   classNames,
   selectionMode = "range",
+  showWeekNumber = false,
+  fixedWeeks = false,
   ...props
 }) {
   const ctx = useRangePickerContext("RangePicker.Calendar");
@@ -1363,10 +1393,22 @@ function RangePickerCalendar({
       disabled,
       range: value,
       rangeHover: hoverDate,
-      timezone: displayTimezone
+      timezone: displayTimezone,
+      fixedWeeks
     }),
-    [viewMonth, adapter, weekStartsOn, focusedDate, disabled, value, hoverDate, displayTimezone]
+    [
+      viewMonth,
+      adapter,
+      weekStartsOn,
+      focusedDate,
+      disabled,
+      value,
+      hoverDate,
+      displayTimezone,
+      fixedWeeks
+    ]
   );
+  const thursdayIndex = weekStartsOn === 0 ? 4 : 3;
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
   const title = formatMonthYear(year, month, locale);
@@ -1530,67 +1572,82 @@ function RangePickerCalendar({
         className: classNames?.grid,
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { role: "row", "aria-rowindex": 1, children: weekdays.map((day, colIndex) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              role: "columnheader",
-              abbr: day.full,
-              scope: "col",
-              "aria-colindex": colIndex + 1,
-              className: classNames?.weekdayHeader,
-              children: day.short
-            },
-            day.short
-          )) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
+            showWeekNumber ? /* @__PURE__ */ jsx("th", { scope: "col", "aria-hidden": "true", className: classNames?.weekNumberHeader, children: "#" }) : null,
+            weekdays.map((day, colIndex) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                role: "columnheader",
+                abbr: day.full,
+                scope: "col",
+                "aria-colindex": colIndex + 1,
+                className: classNames?.weekdayHeader,
+                children: day.short
+              },
+              day.short
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxs(
             "tr",
             {
               role: "row",
               "aria-rowindex": weekIndex + 2,
               className: classNames?.gridRow,
-              children: week.map((day, colIndex) => {
-                const dayClasses = [
-                  classNames?.day,
-                  day.isRangeStart && classNames?.dayRangeStart,
-                  day.isRangeEnd && classNames?.dayRangeEnd,
-                  day.isInRange && classNames?.dayInRange,
-                  day.isToday && classNames?.dayToday,
-                  day.isDisabled && classNames?.dayDisabled,
-                  !day.isCurrentMonth && classNames?.dayOutsideMonth
-                ].filter(Boolean).join(" ") || void 0;
-                const isSelected = selectionMode === "week" ? day.isRangeStart || day.isRangeEnd || day.isInRange : day.isRangeStart || day.isRangeEnd;
-                return /* @__PURE__ */ jsx(
-                  "td",
+              children: [
+                showWeekNumber ? /* @__PURE__ */ jsx(
+                  "th",
                   {
-                    role: "gridcell",
-                    "aria-colindex": colIndex + 1,
-                    "aria-selected": isSelected || void 0,
-                    "aria-disabled": day.isDisabled || void 0,
-                    "aria-current": day.isToday ? "date" : void 0,
-                    className: classNames?.gridCell,
-                    children: /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        tabIndex: day.isFocused ? 0 : -1,
-                        disabled: day.isDisabled,
-                        "data-focused": day.isFocused || void 0,
-                        "data-range-start": day.isRangeStart || void 0,
-                        "data-range-end": day.isRangeEnd || void 0,
-                        "data-in-range": day.isInRange || void 0,
-                        "data-today": day.isToday || void 0,
-                        "data-outside-month": !day.isCurrentMonth || void 0,
-                        className: dayClasses,
-                        onClick: () => handleDayClick(day),
-                        onMouseEnter: () => handleDayMouseEnter(day),
-                        "aria-label": safeFormatFullDate2(day.isoString, locale),
-                        children: day.dayNumber
-                      }
-                    )
-                  },
-                  day.isoString
-                );
-              })
+                    scope: "row",
+                    "aria-hidden": "true",
+                    className: classNames?.weekNumber,
+                    "data-week-number": true,
+                    children: getISOWeekNumber(week[thursdayIndex].isoString)
+                  }
+                ) : null,
+                week.map((day, colIndex) => {
+                  const dayClasses = [
+                    classNames?.day,
+                    day.isRangeStart && classNames?.dayRangeStart,
+                    day.isRangeEnd && classNames?.dayRangeEnd,
+                    day.isInRange && classNames?.dayInRange,
+                    day.isToday && classNames?.dayToday,
+                    day.isDisabled && classNames?.dayDisabled,
+                    !day.isCurrentMonth && classNames?.dayOutsideMonth
+                  ].filter(Boolean).join(" ") || void 0;
+                  const isSelected = selectionMode === "week" ? day.isRangeStart || day.isRangeEnd || day.isInRange : day.isRangeStart || day.isRangeEnd;
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      role: "gridcell",
+                      "aria-colindex": colIndex + 1,
+                      "aria-selected": isSelected || void 0,
+                      "aria-disabled": day.isDisabled || void 0,
+                      "aria-current": day.isToday ? "date" : void 0,
+                      className: classNames?.gridCell,
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          tabIndex: day.isFocused ? 0 : -1,
+                          disabled: day.isDisabled,
+                          "data-focused": day.isFocused || void 0,
+                          "data-range-start": day.isRangeStart || void 0,
+                          "data-range-end": day.isRangeEnd || void 0,
+                          "data-in-range": day.isInRange || void 0,
+                          "data-today": day.isToday || void 0,
+                          "data-outside-month": !day.isCurrentMonth || void 0,
+                          className: dayClasses,
+                          onClick: () => handleDayClick(day),
+                          onMouseEnter: () => handleDayMouseEnter(day),
+                          "aria-label": safeFormatFullDate2(day.isoString, locale),
+                          children: day.dayNumber
+                        }
+                      )
+                    },
+                    day.isoString
+                  );
+                })
+              ]
             },
             weekIndex
           )) })
@@ -1734,6 +1791,7 @@ function TimePickerRoot({
   displayTimezone,
   disabled = false,
   readOnly = false,
+  filterTime,
   labels: labelsProp,
   children
 }) {
@@ -1775,7 +1833,8 @@ function TimePickerRoot({
       isReadOnly: readOnly,
       currentTime,
       pickerId,
-      labels: mergedLabels
+      labels: mergedLabels,
+      filterTime
     }),
     [
       currentValue,
@@ -1788,7 +1847,8 @@ function TimePickerRoot({
       readOnly,
       currentTime,
       pickerId,
-      mergedLabels
+      mergedLabels,
+      filterTime
     ]
   );
   return /* @__PURE__ */ jsx(TimePickerContext.Provider, { value: contextValue, children });
@@ -1893,17 +1953,41 @@ function useListboxNavigation({
 }
 function TimePickerHourList({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.HourList");
-  const { format, currentTime, isDisabled, isReadOnly } = ctx;
+  const { format, step, currentTime, isDisabled, isReadOnly, filterTime } = ctx;
   const hours = useMemo(() => generateHours(format), [format]);
   const selectedHourDisplay = format === "12h" ? to12Hour(currentTime.hours).hours12 : currentTime.hours;
   const currentPeriod = format === "12h" ? to12Hour(currentTime.hours).period : null;
+  const fullyDisabledHours24 = useMemo(() => {
+    if (!filterTime) return null;
+    const disabled = /* @__PURE__ */ new Set();
+    for (let h = 0; h < 24; h++) {
+      let allRejected = true;
+      for (let m = 0; m < 60; m += step) {
+        if (!filterTime(h, m)) {
+          allRejected = false;
+          break;
+        }
+      }
+      if (allRejected) disabled.add(h);
+    }
+    return disabled;
+  }, [filterTime, step]);
+  const isHourDisabled = useCallback(
+    (hourDisplay) => {
+      if (!fullyDisabledHours24) return false;
+      const hours24 = format === "12h" && currentPeriod ? to24Hour(hourDisplay, currentPeriod) : hourDisplay;
+      return fullyDisabledHours24.has(hours24);
+    },
+    [fullyDisabledHours24, format, currentPeriod]
+  );
   const handleSelect = useCallback(
     (hourDisplay) => {
       if (isDisabled || isReadOnly) return;
+      if (isHourDisabled(hourDisplay)) return;
       const hours24 = format === "12h" && currentPeriod ? to24Hour(hourDisplay, currentPeriod) : hourDisplay;
       ctx.setTime({ hours: hours24 });
     },
-    [format, currentPeriod, ctx, isDisabled, isReadOnly]
+    [format, currentPeriod, ctx, isDisabled, isReadOnly, isHourDisabled]
   );
   const { listRef, handleKeyDown } = useListboxNavigation({
     items: hours,
@@ -1921,13 +2005,14 @@ function TimePickerHourList({ classNames, ...props }) {
       ...props,
       children: hours.map((hour) => {
         const isSelected = hour === selectedHourDisplay;
+        const isHourFullyDisabled = isHourDisabled(hour);
         const optionClass = [classNames?.option, isSelected && classNames?.optionSelected].filter(Boolean).join(" ") || void 0;
         return /* @__PURE__ */ jsx(
           "li",
           {
             role: "option",
             "aria-selected": isSelected,
-            "aria-disabled": isDisabled || void 0,
+            "aria-disabled": isDisabled || isHourFullyDisabled || void 0,
             "aria-label": ctx.labels.hourOption(hour),
             "data-selected": isSelected || void 0,
             tabIndex: isSelected ? 0 : -1,
@@ -1944,14 +2029,22 @@ function TimePickerHourList({ classNames, ...props }) {
 }
 function TimePickerMinuteList({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.MinuteList");
-  const { step, currentTime, isDisabled, isReadOnly } = ctx;
+  const { step, currentTime, isDisabled, isReadOnly, filterTime } = ctx;
   const minutes = useMemo(() => generateMinutes(step), [step]);
+  const isMinuteDisabled = useCallback(
+    (minute) => {
+      if (!filterTime) return false;
+      return filterTime(currentTime.hours, minute);
+    },
+    [filterTime, currentTime.hours]
+  );
   const handleSelect = useCallback(
     (minute) => {
       if (isDisabled || isReadOnly) return;
+      if (isMinuteDisabled(minute)) return;
       ctx.setTime({ minutes: minute });
     },
-    [ctx, isDisabled, isReadOnly]
+    [ctx, isDisabled, isReadOnly, isMinuteDisabled]
   );
   const { listRef, handleKeyDown } = useListboxNavigation({
     items: minutes,
@@ -1969,13 +2062,14 @@ function TimePickerMinuteList({ classNames, ...props }) {
       ...props,
       children: minutes.map((minute) => {
         const isSelected = minute === currentTime.minutes;
+        const isMinuteFullyDisabled = isMinuteDisabled(minute);
         const optionClass = [classNames?.option, isSelected && classNames?.optionSelected].filter(Boolean).join(" ") || void 0;
         return /* @__PURE__ */ jsx(
           "li",
           {
             role: "option",
             "aria-selected": isSelected,
-            "aria-disabled": isDisabled || void 0,
+            "aria-disabled": isDisabled || isMinuteFullyDisabled || void 0,
             "aria-label": ctx.labels.minuteOption(minute),
             "data-selected": isSelected || void 0,
             tabIndex: isSelected ? 0 : -1,