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

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @kalyx/react
 
+## 1.0.0-rc.8
+
+### Minor Changes
+
+- 0d3b845: `TimePicker.Root` gains a programmatic **`filterTime`** prop — `(hours: number, minutes: number) => boolean` returning `true` for any slot that should be unselectable. Equivalent to `react-datepicker`'s `filterTime` and MUI X's `shouldDisableTime`, covering use cases the static `step` prop can't (business-hours-only, lunch breaks, blackout slots, per-day variations).
+
+  ```tsx
+  <TimePicker
+    value={time}
+    onChange={setTime}
+    step={15}
+    // Business hours only: 09:00–11:45 and 13:00–17:45 (no lunch slot)
+    filterTime={(h, m) => h < 9 || h >= 18 || h === 12}
+  >
+    <TimePicker.Input />
+    <TimePicker.HourList />
+    <TimePicker.MinuteList />
+  </TimePicker>
+  ```
+
+  Behavior:
+  - **`MinuteList`** — minutes for which `filterTime(currentHour, minute)` returns `true` get `aria-disabled="true"` and reject click/Enter.
+  - **`HourList`** — an hour is marked `aria-disabled="true"` only when `filterTime` returns `true` for **every** step minute within it. Hours with at least one open minute remain selectable.
+  - 12-hour mode — the predicate always receives 24-hour values (`0`–`23`) regardless of the picker's display format.
+
+  **Note**: `DateTimePicker` does not yet wire this through — combine `DatePicker.Root` + `TimePicker.Root` manually if you need both date and time-slot filtering in the same picker.
+
+  Bundle ceiling raised 15 → 16 KB (PR #N follows the 12→13→14→15 cadence — each raise tied to a documented feature; CLAUDE.md §2 records the chain). Measured 15.01 KB ESM / 15.16 KB CJS at this commit, ~4× smaller than react-datepicker.
+
+## 1.0.0-rc.7
+
+### Minor Changes
+
+- 0eca2e8: Two new `DatePicker.Calendar` / `RangePicker.Calendar` props plus an ISO-week utility:
+  - **`showWeekNumber`** — render an ISO 8601 week-number column (1–53) on the left of the grid. The column uses `<th scope="row" aria-hidden="true">` so it doesn't participate in the WAI-ARIA grid data region; keyboard navigation across date cells is unchanged. New className slots: `weekNumberHeader`, `weekNumber`.
+  - **`fixedWeeks`** — when true, always render 6 rows (42 cells) regardless of the month. Useful for popover layouts that need a stable height across month navigation.
+
+  Both also accepted on `CalendarOptions` (the `getCalendarDays` core util gains `fixedWeeks`).
+
+  New core export: **`getISOWeekNumber(iso)`** — pure UTC computation, no date-fns dep. Anchored to the Thursday of the week (so the same week always returns the same number regardless of `weekStartsOn`).
+
+  ```tsx
+  <DatePicker value={date} onChange={setDate}>
+    <DatePicker.Input />
+    <DatePicker.Popover>
+      <DatePicker.Calendar showWeekNumber fixedWeeks />
+    </DatePicker.Popover>
+  </DatePicker>
+  ```
+
+  Bundle impact: +0.46 KB ESM gzip (13.96 → 14.42 KB). Still well under the 15 KB ceiling.
+
+- d62c84e: `DisabledRule` gains a programmatic `filter` variant — pass any predicate `(iso: ISODateString) => boolean` to disable arbitrary days that don't fit the declarative `before` / `after` / `dayOfWeek` / `date` rules.
+
+  ```tsx
+  const holidays = new Set(['2026-01-01T00:00:00.000Z', '2026-12-25T00:00:00.000Z']);
+
+  <DatePicker
+    disabled={[
+      { dayOfWeek: [0, 6] }, // weekends
+      { filter: (iso) => holidays.has(iso) }, // holidays
+    ]}
+  >
+    …
+  </DatePicker>;
+  ```
+
+  The new variant slots into the existing `isDateDisabled` evaluation (short-circuits on first match) and works with keyboard-navigation disabled-skip in `DatePicker.Calendar` / `RangePicker.Calendar` with no further changes. Equivalent to `react-datepicker`'s `filterDate` prop and MUI X DatePicker's `shouldDisableDate`. Bundle impact: 0 KB (still 13.96 KB ESM gzip).
+
+### Patch Changes
+
+- b40080d: Internal: sync the `tsup` onSuccess bundle-size budget from `13 KB` to `15 KB` so the per-build warning matches the actual CI gate (`scripts/check-bundle-size.js`, `pr-check.yml`, `release.yml`). No runtime change; the published artifact is byte-identical.
+
+  This was a leftover from the 13 → 14 → 15 KB ceiling raises during RC (PR #46 / PR #48); only the tsup-side TARGET_KB was missed during those bumps, so local `pnpm build` printed a spurious `⚠️` even though CI passed.
+
+- Updated dependencies [0eca2e8]
+- Updated dependencies [d62c84e]
+  - @kalyx/core@1.0.0-rc.7
+
 ## 1.0.0-rc.6
 
 ### Patch Changes

package/dist/index.cjs

@@ -465,6 +465,8 @@ var srOnly = {
 function DatePickerCalendar({
   classNames,
   onTitleClick,
+  showWeekNumber = false,
+  fixedWeeks = false,
   ...props
 }) {
   const ctx = useDatePickerContext("DatePicker.Calendar");
@@ -478,10 +480,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 = core.formatMonthYear(year, month, locale);
@@ -622,61 +635,76 @@ function DatePickerCalendar({
         className: classNames?.grid,
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { role: "row", "aria-rowindex": 1, children: weekdays.map((day, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-            "th",
-            {
-              role: "columnheader",
-              abbr: day.full,
-              scope: "col",
-              "aria-colindex": colIndex + 1,
-              className: classNames?.weekdayHeader,
-              children: day.short
-            },
-            day.short
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
+            showWeekNumber ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", "aria-hidden": "true", className: classNames?.weekNumberHeader, children: "#" }) : null,
+            weekdays.map((day, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                role: "columnheader",
+                abbr: day.full,
+                scope: "col",
+                "aria-colindex": colIndex + 1,
+                className: classNames?.weekdayHeader,
+                children: day.short
+              },
+              day.short
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "td",
+              children: [
+                showWeekNumber ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: core.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__ */ jsxRuntime.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__ */ jsxRuntime.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
           )) })
@@ -1339,6 +1367,8 @@ var srOnly2 = {
 function RangePickerCalendar({
   classNames,
   selectionMode = "range",
+  showWeekNumber = false,
+  fixedWeeks = false,
   ...props
 }) {
   const ctx = useRangePickerContext("RangePicker.Calendar");
@@ -1364,10 +1394,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 = core.formatMonthYear(year, month, locale);
@@ -1531,67 +1573,82 @@ function RangePickerCalendar({
         className: classNames?.grid,
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { role: "row", "aria-rowindex": 1, children: weekdays.map((day, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-            "th",
-            {
-              role: "columnheader",
-              abbr: day.full,
-              scope: "col",
-              "aria-colindex": colIndex + 1,
-              className: classNames?.weekdayHeader,
-              children: day.short
-            },
-            day.short
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
+            showWeekNumber ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", "aria-hidden": "true", className: classNames?.weekNumberHeader, children: "#" }) : null,
+            weekdays.map((day, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                role: "columnheader",
+                abbr: day.full,
+                scope: "col",
+                "aria-colindex": colIndex + 1,
+                className: classNames?.weekdayHeader,
+                children: day.short
+              },
+              day.short
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "td",
+              children: [
+                showWeekNumber ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: core.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__ */ jsxRuntime.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__ */ jsxRuntime.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
           )) })
@@ -1735,6 +1792,7 @@ function TimePickerRoot({
   displayTimezone,
   disabled = false,
   readOnly = false,
+  filterTime,
   labels: labelsProp,
   children
 }) {
@@ -1776,7 +1834,8 @@ function TimePickerRoot({
       isReadOnly: readOnly,
       currentTime,
       pickerId,
-      labels: mergedLabels
+      labels: mergedLabels,
+      filterTime
     }),
     [
       currentValue,
@@ -1789,7 +1848,8 @@ function TimePickerRoot({
       readOnly,
       currentTime,
       pickerId,
-      mergedLabels
+      mergedLabels,
+      filterTime
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TimePickerContext.Provider, { value: contextValue, children });
@@ -1894,17 +1954,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 = react.useMemo(() => core.generateHours(format), [format]);
   const selectedHourDisplay = format === "12h" ? core.to12Hour(currentTime.hours).hours12 : currentTime.hours;
   const currentPeriod = format === "12h" ? core.to12Hour(currentTime.hours).period : null;
+  const fullyDisabledHours24 = react.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 = react.useCallback(
+    (hourDisplay) => {
+      if (!fullyDisabledHours24) return false;
+      const hours24 = format === "12h" && currentPeriod ? core.to24Hour(hourDisplay, currentPeriod) : hourDisplay;
+      return fullyDisabledHours24.has(hours24);
+    },
+    [fullyDisabledHours24, format, currentPeriod]
+  );
   const handleSelect = react.useCallback(
     (hourDisplay) => {
       if (isDisabled || isReadOnly) return;
+      if (isHourDisabled(hourDisplay)) return;
       const hours24 = format === "12h" && currentPeriod ? core.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,
@@ -1922,13 +2006,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__ */ jsxRuntime.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,
@@ -1945,14 +2030,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 = react.useMemo(() => core.generateMinutes(step), [step]);
+  const isMinuteDisabled = react.useCallback(
+    (minute) => {
+      if (!filterTime) return false;
+      return filterTime(currentTime.hours, minute);
+    },
+    [filterTime, currentTime.hours]
+  );
   const handleSelect = react.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,
@@ -1970,13 +2063,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__ */ jsxRuntime.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,