@base-ui/react 1.3.0 → 1.4.0

package/calendar/day-grid-body/useSharedCalendarDayGridBody.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { SharedCalendarDayGridBodyContext } from "./SharedCalendarDayGridBodyContext.js";
+import { HTMLProps } from "../../utils/types.js";
+import { TemporalSupportedObject } from "../../types/temporal/index.js";
+import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
+export declare function useSharedCalendarDayGridBody(parameters: UseSharedCalendarDayGridBodyParameters): UseSharedCalendarDayGridBodyReturnValue;
+export interface UseSharedCalendarDayGridBodyParameters {
+  /**
+   * The children of the component.
+   * If a function is provided, it will be called for each week to render as its parameter.
+   */
+  children?: React.ReactNode | ((week: TemporalSupportedObject, index: number, weeks: TemporalSupportedObject[]) => React.ReactNode);
+  /**
+   * Will render the requested amount of weeks by adding weeks of the next month if needed.
+   * Set it to 6 to create a Gregorian calendar where all months have the same number of weeks.
+   */
+  fixedWeekNumber?: number | undefined;
+  /**
+   * The offset to apply to the rendered month compared to the current month.
+   * This is mostly useful when displaying multiple day grids.
+   * @default 0
+   */
+  offset?: number | undefined;
+}
+export interface UseSharedCalendarDayGridBodyItemMetadata {
+  focusable?: boolean | undefined;
+}
+export interface UseSharedCalendarDayGridBodyReturnValue {
+  /**
+   * The props to apply to the element.
+   */
+  props: HTMLProps;
+  /**
+   * The props to apply to the composite root.
+   */
+  compositeRootProps: CompositeRoot.Props<UseSharedCalendarDayGridBodyItemMetadata, any>;
+  /**
+   * The context to provide to the children of the component.
+   */
+  context: SharedCalendarDayGridBodyContext;
+  /**
+   * The ref to apply to the element.
+   */
+  ref: React.RefObject<HTMLTableSectionElement | null>;
+}

package/calendar/day-grid-body/useSharedCalendarDayGridBody.js

@@ -0,0 +1,285 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSharedCalendarDayGridBody = useSharedCalendarDayGridBody;
+var React = _interopRequireWildcard(require("react"));
+var _store = require("@base-ui/utils/store");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _reasons = require("../../utils/reasons");
+var _SharedCalendarRootContext = require("../root/SharedCalendarRootContext");
+var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
+var _useCalendarWeekList = require("../use-week-list/useCalendarWeekList");
+var _store2 = require("../store");
+var _computeMonthDayGrid = require("../utils/computeMonthDayGrid");
+var _areArraysEqual = require("../../utils/areArraysEqual");
+var _utils = require("../../floating-ui-react/utils");
+var _composite = require("../../composite/composite");
+var _validateDate = require("../../utils/temporal/validateDate");
+const BACKWARD_KEYS = new Set([_composite.ARROW_UP, _composite.ARROW_LEFT]);
+const CUSTOM_NAVIGATION_KEYS = new Set([_composite.HOME, _composite.END, _composite.PAGE_UP, _composite.PAGE_DOWN]);
+function useSharedCalendarDayGridBody(parameters) {
+  const {
+    fixedWeekNumber,
+    children,
+    offset = 0
+  } = parameters;
+  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
+  const store = (0, _SharedCalendarRootContext.useSharedCalendarRootContext)();
+  const visibleMonth = (0, _store.useStore)(store, _store2.selectors.visibleMonth);
+  const timezone = (0, _store.useStore)(store, _store2.selectors.timezoneToRender);
+  const ref = React.useRef(null);
+  const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  const executeAfterItemMapUpdate = React.useRef(null);
+  const nowValue = adapter.now(timezone);
+  const todayRef = React.useRef(nowValue);
+  if (!adapter.isSameDay(todayRef.current, nowValue)) {
+    todayRef.current = nowValue;
+  }
+  const today = todayRef.current;
+  const month = React.useMemo(() => {
+    return offset === 0 ? visibleMonth : adapter.addMonths(visibleMonth, offset);
+  }, [adapter, visibleMonth, offset]);
+  const getWeekList = (0, _useCalendarWeekList.useCalendarWeekList)();
+  const weeks = React.useMemo(() => getWeekList({
+    date: month,
+    amount: fixedWeekNumber ?? 'end-of-month'
+  }), [getWeekList, month, fixedWeekNumber]);
+  const resolvedChildren = React.useMemo(() => {
+    if (! /*#__PURE__*/React.isValidElement(children) && typeof children === 'function') {
+      return weeks.map(children);
+    }
+    return children;
+  }, [children, weeks]);
+  const [itemMap, setItemMap] = React.useState(() => new Map());
+  const items = React.useMemo(() => Array.from(itemMap.keys()), [itemMap]);
+  const prevDisabledIndicesRef = React.useRef([]);
+  const disabledIndices = React.useMemo(() => {
+    const output = [];
+    for (const itemMetadata of itemMap.values()) {
+      if (itemMetadata?.index != null && !itemMetadata.focusable) {
+        output.push(itemMetadata.index);
+      }
+    }
+    if ((0, _areArraysEqual.areArraysEqual)(prevDisabledIndicesRef.current, output)) {
+      return prevDisabledIndicesRef.current;
+    }
+    prevDisabledIndicesRef.current = output;
+    return output;
+  }, [itemMap]);
+  const handleItemMapUpdate = newMap => {
+    setItemMap(newMap);
+  };
+
+  // Execute pending focus callback after React has committed the new item map to the DOM.
+  // This replaces a queueMicrotask approach that could fire before React's commit phase.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (executeAfterItemMapUpdate.current) {
+      executeAfterItemMapUpdate.current(itemMap);
+      executeAfterItemMapUpdate.current = null;
+    }
+  }, [itemMap]);
+  const focusNonDisabledItem = (elements, itemDisabledIndices, guessedIndex, decrement, amount) => {
+    if (elements.length === 0) {
+      return;
+    }
+    let idx = guessedIndex;
+    if ((0, _utils.isListIndexDisabled)(elements, idx, itemDisabledIndices)) {
+      idx = (0, _utils.findNonDisabledListIndex)(elements, {
+        startingIndex: idx,
+        decrement,
+        disabledIndices: itemDisabledIndices,
+        amount
+      });
+    }
+    if (idx >= 0 && idx < elements.length) {
+      setHighlightedIndex(idx);
+      elements[idx]?.focus();
+    }
+  };
+  const focusNextNonDisabledElement = ({
+    elements = items,
+    newHighlightedIndex,
+    decrement,
+    amount
+  }) => {
+    focusNonDisabledItem(elements, disabledIndices, newHighlightedIndex, decrement, amount);
+  };
+
+  // Focuses the correct item after a cross-month navigation (PageUp/PageDown or arrow-key
+  // loop). Uses the new month's item map directly because the `disabledIndices` state
+  // variable still reflects the old month at this point.
+  const focusItemFromMap = (newMap, guessedIndex, decrement, amount) => {
+    const newItems = Array.from(newMap.keys());
+    const newDisabledIndices = [];
+    for (const meta of newMap.values()) {
+      if (meta?.index != null && !meta.focusable) {
+        newDisabledIndices.push(meta.index);
+      }
+    }
+    focusNonDisabledItem(newItems, newDisabledIndices, guessedIndex, decrement, amount);
+  };
+  const handleKeyboardNavigation = event => {
+    const eventKey = event.key;
+    if (!CUSTOM_NAVIGATION_KEYS.has(eventKey)) {
+      return;
+    }
+    switch (eventKey) {
+      case _composite.HOME:
+      case _composite.END:
+        {
+          const colIndex = highlightedIndex % 7;
+          // allow for default composite navigation in case we are on the first or last day of the week
+          if (eventKey === _composite.HOME && colIndex === 0 || eventKey === _composite.END && colIndex === 6) {
+            return;
+          }
+          // prevent default composite navigation and handle it ourselves
+          event.preventDefault();
+          event.preventBaseUIHandler();
+          const currentWeekStartIndex = Math.floor(highlightedIndex / 7) * 7;
+          const newHighlightedIndex = eventKey === _composite.HOME ? currentWeekStartIndex : currentWeekStartIndex + 6;
+          focusNextNonDisabledElement({
+            elements: items,
+            newHighlightedIndex,
+            decrement: eventKey === _composite.END,
+            amount: 1
+          });
+          break;
+        }
+      case _composite.PAGE_UP:
+      case _composite.PAGE_DOWN:
+        {
+          event.preventDefault();
+          // Without knowing the current day we can not move to next month and focus the same day
+          const decrement = eventKey === _composite.PAGE_UP;
+          let amount = 1;
+          if (event.shiftKey) {
+            amount = 12;
+          }
+          const currentDay = (0, _computeMonthDayGrid.computeMonthDayGrid)(adapter, month, fixedWeekNumber, weeks)[highlightedIndex];
+          if (!currentDay) {
+            return;
+          }
+          const targetDate = adapter.addMonths(currentDay, decrement ? -amount : amount);
+          const targetMonth = adapter.addMonths(visibleMonth, decrement ? -amount : amount);
+          const {
+            minDate,
+            maxDate
+          } = store.state;
+          // Check if the target date would be within min/max bounds
+          let dateValidationError = null;
+          if (minDate != null || maxDate != null) {
+            dateValidationError = (0, _validateDate.validateDate)({
+              adapter,
+              value: targetDate,
+              validationProps: {
+                minDate,
+                maxDate
+              }
+            });
+            if (dateValidationError != null) {
+              // Block navigation only if the entire target month is outside the valid range.
+              // If the month has some valid days, navigate and let focusItemFromMap find the nearest one.
+              if (maxDate != null && adapter.isAfter(adapter.startOfMonth(targetMonth), maxDate) || minDate != null && adapter.isBefore(adapter.endOfMonth(targetMonth), minDate)) {
+                return;
+              }
+            }
+          }
+          store.setVisibleDate(targetMonth, event.nativeEvent, event.currentTarget, _reasons.REASONS.keyboard);
+          executeAfterItemMapUpdate.current = newMap => {
+            const newMonth = adapter.addMonths(month, decrement ? -amount : amount);
+            const newGridDays = (0, _computeMonthDayGrid.computeMonthDayGrid)(adapter, newMonth, fixedWeekNumber);
+            // Find the target date in the new month's grid. Use targetDate (already clamped
+            // by addMonths) so that e.g. Jan 31 + 1 month correctly finds Feb 28.
+            const targetDayOfMonth = adapter.getDate(targetDate);
+            const targetMonthValue = adapter.getMonth(targetDate);
+            const targetYearValue = adapter.getYear(targetDate);
+            const sameDayInNewMonthIndex = newGridDays.findIndex(day => adapter.getDate(day) === targetDayOfMonth && adapter.getMonth(day) === targetMonthValue && adapter.getYear(day) === targetYearValue);
+            // When the target day is disabled, find the nearest valid day in the right direction:
+            // beyond maxDate → search backward for the last valid day;
+            // before minDate → search forward for the first valid day.
+            let searchDecrement = eventKey === _composite.PAGE_UP;
+            if (dateValidationError === 'after-max-date') {
+              searchDecrement = true;
+            } else if (dateValidationError === 'before-min-date') {
+              searchDecrement = false;
+            }
+            focusItemFromMap(newMap, sameDayInNewMonthIndex, searchDecrement, 1);
+          };
+          break;
+        }
+      default:
+        {
+          break;
+        }
+    }
+  };
+  const handleLooping = (event, prevIndex) => {
+    event.preventDefault();
+    const eventKey = event.key;
+    const decrement = BACKWARD_KEYS.has(eventKey);
+    const targetMonth = adapter.addMonths(visibleMonth, decrement ? -1 : 1);
+    const {
+      minDate,
+      maxDate
+    } = store.state;
+    if (minDate != null || maxDate != null) {
+      // Check if the target month has any valid (non-disabled) days within min/max bounds.
+      if (minDate != null && adapter.isBefore(adapter.endOfMonth(targetMonth), minDate) || maxDate != null && adapter.isAfter(adapter.startOfMonth(targetMonth), maxDate)) {
+        // The entire target month is outside the valid range; stay put.
+        return prevIndex;
+      }
+    }
+
+    // Change the visible month and focus the equivalent day once the new month's
+    // DOM has been committed. This covers every arrow-key loop scenario, including
+    // cases where an outside-month day is visible as the first/last row of the
+    // current grid — the visible date must always update when crossing a month boundary.
+    store.setVisibleDate(targetMonth, event.nativeEvent, event.currentTarget, _reasons.REASONS.keyboard);
+    executeAfterItemMapUpdate.current = newMap => {
+      const newItems = Array.from(newMap.keys());
+      let guessedIndex;
+      if (eventKey === _composite.ARROW_LEFT) {
+        guessedIndex = newItems.length - 1;
+      } else if (eventKey === _composite.ARROW_RIGHT) {
+        guessedIndex = 0;
+      } else if (eventKey === _composite.ARROW_DOWN) {
+        guessedIndex = prevIndex % 7;
+      } else {
+        // ARROW_UP: same weekday in the last row of the previous month
+        guessedIndex = newItems.length - 7 + prevIndex % 7;
+      }
+      focusItemFromMap(newMap, guessedIndex, decrement, _composite.HORIZONTAL_KEYS.has(eventKey) ? 1 : 7);
+    };
+
+    // Return the current index so the composite does not move focus before the new month renders.
+    return prevIndex;
+  };
+  const compositeRootProps = {
+    cols: 7,
+    disabledIndices,
+    orientation: 'horizontal',
+    enableHomeAndEndKeys: true,
+    onMapChange: handleItemMapUpdate,
+    highlightedIndex,
+    onKeyDown: handleKeyboardNavigation,
+    onHighlightedIndexChange: setHighlightedIndex,
+    onLoop: handleLooping
+  };
+  const props = {
+    children: resolvedChildren
+  };
+  const context = React.useMemo(() => ({
+    month,
+    today
+  }), [month, today]);
+  return {
+    props,
+    compositeRootProps,
+    context,
+    ref
+  };
+}

package/calendar/day-grid-cell/CalendarDayGridCell.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../utils/types.js";
+import { UseSharedCalendarDayGridCellParameters } from "./useSharedCalendarDayGridCell.js";
+/**
+ * An individual day cell in the calendar.
+ * Renders a `<td>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+export declare const CalendarDayGridCell: React.NamedExoticComponent<Omit<CalendarDayGridCellProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+export interface CalendarDayGridCellState {}
+export interface CalendarDayGridCellProps extends BaseUIComponentProps<'td', CalendarDayGridCellState>, UseSharedCalendarDayGridCellParameters {}
+export declare namespace CalendarDayGridCell {
+  type State = CalendarDayGridCellState;
+  type Props = CalendarDayGridCellProps;
+}

package/calendar/day-grid-cell/CalendarDayGridCell.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarDayGridCell = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRenderElement = require("../../utils/useRenderElement");
+var _useSharedCalendarDayGridCell = require("./useSharedCalendarDayGridCell");
+var _SharedCalendarDayGridCellContext = require("./SharedCalendarDayGridCellContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const InnerCalendarDayGridCell = /*#__PURE__*/React.forwardRef(function InnerCalendarDayGridCell(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    value,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    props,
+    context
+  } = (0, _useSharedCalendarDayGridCell.useSharedCalendarDayGridCell)({
+    value
+  });
+  const element = (0, _useRenderElement.useRenderElement)('td', componentProps, {
+    ref: [forwardedRef],
+    props: [props, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharedCalendarDayGridCellContext.SharedCalendarDayGridCellContext.Provider, {
+    value: context,
+    children: element
+  });
+});
+
+/**
+ * An individual day cell in the calendar.
+ * Renders a `<td>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+if (process.env.NODE_ENV !== "production") InnerCalendarDayGridCell.displayName = "InnerCalendarDayGridCell";
+const CalendarDayGridCell = exports.CalendarDayGridCell = /*#__PURE__*/React.memo(InnerCalendarDayGridCell);
+if (process.env.NODE_ENV !== "production") CalendarDayGridCell.displayName = "CalendarDayGridCell";

package/calendar/day-grid-cell/SharedCalendarDayGridCellContext.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TemporalSupportedObject } from "../../types/temporal/index.js";
+export interface SharedCalendarDayGridCellContext {
+  /**
+   * The value to select when this cell is clicked.
+   */
+  value: TemporalSupportedObject;
+  /**
+   * Whether the cell is disabled.
+   */
+  isDisabled: boolean;
+  /**
+   * Whether the cell is unavailable.
+   */
+  isUnavailable: boolean;
+  /**
+   * Whether the cell is outside the current month.
+   */
+  isOutsideCurrentMonth: boolean;
+}
+export declare const SharedCalendarDayGridCellContext: React.Context<SharedCalendarDayGridCellContext | undefined>;
+export declare function useCalendarDayGridCellContext(): SharedCalendarDayGridCellContext;

package/calendar/day-grid-cell/SharedCalendarDayGridCellContext.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SharedCalendarDayGridCellContext = void 0;
+exports.useCalendarDayGridCellContext = useCalendarDayGridCellContext;
+var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
+var React = _interopRequireWildcard(require("react"));
+const SharedCalendarDayGridCellContext = exports.SharedCalendarDayGridCellContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SharedCalendarDayGridCellContext.displayName = "SharedCalendarDayGridCellContext";
+function useCalendarDayGridCellContext() {
+  const context = React.useContext(SharedCalendarDayGridCellContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SharedCalendarDayGridCellContext is missing. <Calendar.DayButton /> must be placed within <Calendar.DayGridCell /> and <RangeCalendar.DayButton /> must be placed within <RangeCalendar.DayGridCell />.' : (0, _formatErrorMessage2.default)(96));
+  }
+  return context;
+}

package/calendar/day-grid-cell/useSharedCalendarDayGridCell.d.ts

@@ -0,0 +1,17 @@
+import { TemporalSupportedObject } from "../../types/temporal/index.js";
+import { SharedCalendarDayGridCellContext } from "./SharedCalendarDayGridCellContext.js";
+import { HTMLProps } from "../../utils/types.js";
+export declare function useSharedCalendarDayGridCell(parameters: UseSharedCalendarDayGridCellParameters): UseSharedCalendarDayGridCellReturnValue;
+export interface UseSharedCalendarDayGridCellParameters {
+  /**
+   * The value to select when this cell is clicked.
+   */
+  value: TemporalSupportedObject;
+}
+export interface UseSharedCalendarDayGridCellReturnValue {
+  props: HTMLProps;
+  /**
+   * The context to expose to the children components.
+   */
+  context: SharedCalendarDayGridCellContext;
+}

package/calendar/day-grid-cell/useSharedCalendarDayGridCell.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSharedCalendarDayGridCell = useSharedCalendarDayGridCell;
+var React = _interopRequireWildcard(require("react"));
+var _store = require("@base-ui/utils/store");
+var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
+var _SharedCalendarDayGridBodyContext = require("../day-grid-body/SharedCalendarDayGridBodyContext");
+var _SharedCalendarRootContext = require("../root/SharedCalendarRootContext");
+var _store2 = require("../store");
+function useSharedCalendarDayGridCell(parameters) {
+  const {
+    value
+  } = parameters;
+  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
+  const store = (0, _SharedCalendarRootContext.useSharedCalendarRootContext)();
+  const {
+    month
+  } = (0, _SharedCalendarDayGridBodyContext.useSharedCalendarDayGridBodyContext)();
+  const isDisabled = (0, _store.useStore)(store, _store2.selectors.isDayCellDisabled, value);
+  const isUnavailable = (0, _store.useStore)(store, _store2.selectors.isDayCellUnavailable, value);
+  const isOutsideCurrentMonth = React.useMemo(() => month == null ? false : !adapter.isSameMonth(month, value), [month, value, adapter]);
+  const props = {
+    role: 'gridcell',
+    'aria-disabled': isDisabled || isOutsideCurrentMonth || isUnavailable ? true : undefined
+  };
+  const context = React.useMemo(() => ({
+    value,
+    isDisabled,
+    isUnavailable,
+    isOutsideCurrentMonth
+  }), [isDisabled, isUnavailable, isOutsideCurrentMonth, value]);
+  return {
+    props,
+    context
+  };
+}

package/calendar/day-grid-header/CalendarDayGridHeader.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * Groups all parts of the calendar's day grid header.
+ * Renders a `<thead>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+export declare const CalendarDayGridHeader: React.ForwardRefExoticComponent<Omit<CalendarDayGridHeaderProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+export interface CalendarDayGridHeaderState {}
+export interface CalendarDayGridHeaderProps extends BaseUIComponentProps<'thead', CalendarDayGridHeaderState> {}
+export declare namespace CalendarDayGridHeader {
+  type State = CalendarDayGridHeaderState;
+  type Props = CalendarDayGridHeaderProps;
+}

package/calendar/day-grid-header/CalendarDayGridHeader.js

@@ -0,0 +1,32 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarDayGridHeader = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRenderElement = require("../../utils/useRenderElement");
+/**
+ * Groups all parts of the calendar's day grid header.
+ * Renders a `<thead>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+const CalendarDayGridHeader = exports.CalendarDayGridHeader = /*#__PURE__*/React.forwardRef(function CalendarDayGridHeader(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    style,
+    ...elementProps
+  } = componentProps;
+  const element = (0, _useRenderElement.useRenderElement)('thead', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      'aria-hidden': true
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") CalendarDayGridHeader.displayName = "CalendarDayGridHeader";

package/calendar/day-grid-header-cell/CalendarDayGridHeaderCell.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../utils/types.js";
+import { TemporalSupportedObject } from "../../types/temporal/index.js";
+/**
+ * An individual day header cell in the calendar.
+ * Renders a `<th>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+export declare const CalendarDayGridHeaderCell: React.NamedExoticComponent<Omit<CalendarDayGridHeaderCellProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+export interface CalendarDayGridHeaderCellState {}
+export interface CalendarDayGridHeaderCellProps extends BaseUIComponentProps<'th', CalendarDayGridHeaderCellState> {
+  value: TemporalSupportedObject;
+  /**
+   * The formatter function used to display the day of the week.
+   * @param {TemporalSupportedObject} date The date to format.
+   * @returns {string} The formatted date.
+   * @default (date) => adapter.format(date, 'EEE').charAt(0).toUpperCase()
+   */
+  formatter?: ((date: TemporalSupportedObject) => string) | undefined;
+}
+export declare namespace CalendarDayGridHeaderCell {
+  type State = CalendarDayGridHeaderCellState;
+  type Props = CalendarDayGridHeaderCellProps;
+}

package/calendar/day-grid-header-cell/CalendarDayGridHeaderCell.js

@@ -0,0 +1,41 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarDayGridHeaderCell = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRenderElement = require("../../utils/useRenderElement");
+var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
+const InnerCalendarDayGridHeaderCell = /*#__PURE__*/React.forwardRef(function InnerCalendarDayGridHeaderCell(componentProps, forwardedRef) {
+  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
+  const defaultFormatter = React.useCallback(date => adapter.format(date, 'weekday3Letters').charAt(0).toUpperCase(), [adapter]);
+  const {
+    className,
+    render,
+    style,
+    value,
+    formatter = defaultFormatter,
+    ...otherProps
+  } = componentProps;
+  const formattedValue = React.useMemo(() => formatter(value), [formatter, value]);
+  const element = (0, _useRenderElement.useRenderElement)('th', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      children: formattedValue
+    }, otherProps]
+  });
+  return element;
+});
+
+/**
+ * An individual day header cell in the calendar.
+ * Renders a `<th>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+if (process.env.NODE_ENV !== "production") InnerCalendarDayGridHeaderCell.displayName = "InnerCalendarDayGridHeaderCell";
+const CalendarDayGridHeaderCell = exports.CalendarDayGridHeaderCell = /*#__PURE__*/React.memo(InnerCalendarDayGridHeaderCell);
+if (process.env.NODE_ENV !== "production") CalendarDayGridHeaderCell.displayName = "CalendarDayGridHeaderCell";

package/calendar/day-grid-header-row/CalendarDayGridHeaderRow.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../utils/types.js";
+import { TemporalSupportedObject } from "../../types/temporal/index.js";
+/**
+ * Groups all cells of the calendar's day grid header row.
+ * Renders a `<tr>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+export declare const CalendarDayGridHeaderRow: React.ForwardRefExoticComponent<Omit<CalendarDayGridHeaderRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+export interface CalendarDayGridHeaderRowState {}
+export interface CalendarDayGridHeaderRowProps extends Omit<BaseUIComponentProps<'tr', CalendarDayGridHeaderRowState>, 'children'> {
+  /**
+   * The children of the component.
+   * If a function is provided, it will be called for each day of the week as its parameter.
+   */
+  children?: React.ReactNode | ((day: TemporalSupportedObject, index: number, days: TemporalSupportedObject[]) => React.ReactNode);
+}
+export declare namespace CalendarDayGridHeaderRow {
+  type State = CalendarDayGridHeaderRowState;
+  type Props = CalendarDayGridHeaderRowProps;
+}