@base-ui/react 1.3.0 → 1.4.0

package/esm/calendar/day-button/CalendarDayButtonDataAttributes.js

@@ -0,0 +1,23 @@
+export let CalendarDayButtonDataAttributes = /*#__PURE__*/function (CalendarDayButtonDataAttributes) {
+  /**
+   * Present when the day is selected.
+   */
+  CalendarDayButtonDataAttributes["selected"] = "data-selected";
+  /**
+   * Present when the day is disabled.
+   */
+  CalendarDayButtonDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the day is unavailable.
+   */
+  CalendarDayButtonDataAttributes["unavailable"] = "data-unavailable";
+  /**
+   * Present when the day is the current date.
+   */
+  CalendarDayButtonDataAttributes["current"] = "data-current";
+  /**
+   * Present when the day is outside the month rendered by the day grid wrapping it.
+   */
+  CalendarDayButtonDataAttributes["outsideMonth"] = "data-outside-month";
+  return CalendarDayButtonDataAttributes;
+}({});

package/esm/calendar/day-grid/CalendarDayGrid.d.ts

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

package/esm/calendar/day-grid/CalendarDayGrid.js

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import { useRenderElement } from "../../utils/useRenderElement.js";
+
+/**
+ * Groups all the parts of the calendar's day grid.
+ * Renders a `<table>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+export const CalendarDayGrid = /*#__PURE__*/React.forwardRef(function CalendarDayGrid(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    style,
+    ...elementProps
+  } = componentProps;
+  const element = useRenderElement('table', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      role: 'grid'
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") CalendarDayGrid.displayName = "CalendarDayGrid";

package/esm/calendar/day-grid-body/CalendarDayGridBody.d.ts

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

package/esm/calendar/day-grid-body/CalendarDayGridBody.js

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { SharedCalendarDayGridBodyContext } from "./SharedCalendarDayGridBodyContext.js";
+import { useSharedCalendarDayGridBody } from "./useSharedCalendarDayGridBody.js";
+import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
+
+/**
+ * Groups all parts of the calendar's day grid.
+ * Renders a `<tbody>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CalendarDayGridBody = /*#__PURE__*/React.forwardRef(function CalendarDayGridBody(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    children,
+    fixedWeekNumber,
+    offset,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    props,
+    compositeRootProps,
+    context,
+    ref
+  } = useSharedCalendarDayGridBody({
+    children,
+    fixedWeekNumber,
+    offset
+  });
+  const element = useRenderElement('tbody', componentProps, {
+    ref: [forwardedRef, ref],
+    props: [props, elementProps]
+  });
+  return /*#__PURE__*/_jsx(SharedCalendarDayGridBodyContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(CompositeRoot, {
+      ...compositeRootProps,
+      render: element
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") CalendarDayGridBody.displayName = "CalendarDayGridBody";

package/esm/calendar/day-grid-body/SharedCalendarDayGridBodyContext.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { TemporalSupportedObject } from "../../types/temporal/index.js";
+export interface SharedCalendarDayGridBodyContext {
+  /**
+   * The month of this component.
+   */
+  month: TemporalSupportedObject;
+  /**
+   * Today's date, computed once at the grid body level.
+   */
+  today: TemporalSupportedObject;
+}
+export declare const SharedCalendarDayGridBodyContext: React.Context<SharedCalendarDayGridBodyContext | undefined>;
+export declare function useSharedCalendarDayGridBodyContext(): SharedCalendarDayGridBodyContext;

package/esm/calendar/day-grid-body/SharedCalendarDayGridBodyContext.js

@@ -0,0 +1,13 @@
+'use client';
+
+import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
+import * as React from 'react';
+export const SharedCalendarDayGridBodyContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SharedCalendarDayGridBodyContext.displayName = "SharedCalendarDayGridBodyContext";
+export function useSharedCalendarDayGridBodyContext() {
+  const context = React.useContext(SharedCalendarDayGridBodyContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SharedCalendarDayGridBodyContext is missing. <Calendar.DayGridRow /> must be placed within <Calendar.DayGridBody /> and <RangeCalendar.DayGridRow /> must be placed within <RangeCalendar.DayGridBody />.' : _formatErrorMessage(95));
+  }
+  return context;
+}

package/esm/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/esm/calendar/day-grid-body/useSharedCalendarDayGridBody.js

@@ -0,0 +1,279 @@
+'use client';
+
+import * as React from 'react';
+import { useStore } from '@base-ui/utils/store';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { REASONS } from "../../utils/reasons.js";
+import { useSharedCalendarRootContext } from "../root/SharedCalendarRootContext.js";
+import { useTemporalAdapter } from "../../temporal-adapter-provider/TemporalAdapterContext.js";
+import { useCalendarWeekList } from "../use-week-list/useCalendarWeekList.js";
+import { selectors } from "../store/index.js";
+import { computeMonthDayGrid } from "../utils/computeMonthDayGrid.js";
+import { areArraysEqual } from "../../utils/areArraysEqual.js";
+import { findNonDisabledListIndex, isListIndexDisabled } from "../../floating-ui-react/utils.js";
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, HORIZONTAL_KEYS, HOME, END, PAGE_UP, PAGE_DOWN } from "../../composite/composite.js";
+import { validateDate } from "../../utils/temporal/validateDate.js";
+const BACKWARD_KEYS = new Set([ARROW_UP, ARROW_LEFT]);
+const CUSTOM_NAVIGATION_KEYS = new Set([HOME, END, PAGE_UP, PAGE_DOWN]);
+export function useSharedCalendarDayGridBody(parameters) {
+  const {
+    fixedWeekNumber,
+    children,
+    offset = 0
+  } = parameters;
+  const adapter = useTemporalAdapter();
+  const store = useSharedCalendarRootContext();
+  const visibleMonth = useStore(store, selectors.visibleMonth);
+  const timezone = useStore(store, 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 = 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 (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.
+  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 (isListIndexDisabled(elements, idx, itemDisabledIndices)) {
+      idx = 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 HOME:
+      case 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 === HOME && colIndex === 0 || eventKey === 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 === HOME ? currentWeekStartIndex : currentWeekStartIndex + 6;
+          focusNextNonDisabledElement({
+            elements: items,
+            newHighlightedIndex,
+            decrement: eventKey === END,
+            amount: 1
+          });
+          break;
+        }
+      case PAGE_UP:
+      case PAGE_DOWN:
+        {
+          event.preventDefault();
+          // Without knowing the current day we can not move to next month and focus the same day
+          const decrement = eventKey === PAGE_UP;
+          let amount = 1;
+          if (event.shiftKey) {
+            amount = 12;
+          }
+          const currentDay = 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 = 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.keyboard);
+          executeAfterItemMapUpdate.current = newMap => {
+            const newMonth = adapter.addMonths(month, decrement ? -amount : amount);
+            const newGridDays = 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 === 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.keyboard);
+    executeAfterItemMapUpdate.current = newMap => {
+      const newItems = Array.from(newMap.keys());
+      let guessedIndex;
+      if (eventKey === ARROW_LEFT) {
+        guessedIndex = newItems.length - 1;
+      } else if (eventKey === ARROW_RIGHT) {
+        guessedIndex = 0;
+      } else if (eventKey === 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, 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/esm/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/esm/calendar/day-grid-cell/CalendarDayGridCell.js

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useSharedCalendarDayGridCell } from "./useSharedCalendarDayGridCell.js";
+import { SharedCalendarDayGridCellContext } from "./SharedCalendarDayGridCellContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const InnerCalendarDayGridCell = /*#__PURE__*/React.forwardRef(function InnerCalendarDayGridCell(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    value,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    props,
+    context
+  } = useSharedCalendarDayGridCell({
+    value
+  });
+  const element = useRenderElement('td', componentProps, {
+    ref: [forwardedRef],
+    props: [props, elementProps]
+  });
+  return /*#__PURE__*/_jsx(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";
+export const CalendarDayGridCell = /*#__PURE__*/React.memo(InnerCalendarDayGridCell);
+if (process.env.NODE_ENV !== "production") CalendarDayGridCell.displayName = "CalendarDayGridCell";

package/esm/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/esm/calendar/day-grid-cell/SharedCalendarDayGridCellContext.js

@@ -0,0 +1,13 @@
+'use client';
+
+import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
+import * as React from 'react';
+export const SharedCalendarDayGridCellContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SharedCalendarDayGridCellContext.displayName = "SharedCalendarDayGridCellContext";
+export 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 />.' : _formatErrorMessage(96));
+  }
+  return context;
+}

package/esm/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/esm/calendar/day-grid-cell/useSharedCalendarDayGridCell.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useStore } from '@base-ui/utils/store';
+import { useTemporalAdapter } from "../../temporal-adapter-provider/TemporalAdapterContext.js";
+import { useSharedCalendarDayGridBodyContext } from "../day-grid-body/SharedCalendarDayGridBodyContext.js";
+import { useSharedCalendarRootContext } from "../root/SharedCalendarRootContext.js";
+import { selectors } from "../store/index.js";
+export function useSharedCalendarDayGridCell(parameters) {
+  const {
+    value
+  } = parameters;
+  const adapter = useTemporalAdapter();
+  const store = useSharedCalendarRootContext();
+  const {
+    month
+  } = useSharedCalendarDayGridBodyContext();
+  const isDisabled = useStore(store, selectors.isDayCellDisabled, value);
+  const isUnavailable = useStore(store, 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/esm/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;
+}