@base-ui/react 1.2.0 → 1.4.0

package/autocomplete/trigger/AutocompleteTriggerDataAttributes.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteTriggerDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let AutocompleteTriggerDataAttributes = exports.AutocompleteTriggerDataAttributes = function (AutocompleteTriggerDataAttributes) {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  AutocompleteTriggerDataAttributes[AutocompleteTriggerDataAttributes["popupOpen"] = _popupStateMapping.CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  /**
+   * Present when the trigger is pressed.
+   */
+  AutocompleteTriggerDataAttributes[AutocompleteTriggerDataAttributes["pressed"] = _popupStateMapping.CommonTriggerDataAttributes.pressed] = "pressed";
+  /**
+   * Present when the component is disabled.
+   */
+  AutocompleteTriggerDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the component is readonly.
+   */
+  AutocompleteTriggerDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  AutocompleteTriggerDataAttributes["popupSide"] = "data-popup-side";
+  /**
+   * Present when the component is required.
+   */
+  AutocompleteTriggerDataAttributes["required"] = "data-required";
+  /**
+   * Present when the component is in valid state (when wrapped in Field.Root).
+   */
+  AutocompleteTriggerDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the component is in invalid state (when wrapped in Field.Root).
+   */
+  AutocompleteTriggerDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the component has been touched (when wrapped in Field.Root).
+   */
+  AutocompleteTriggerDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the component's value has changed (when wrapped in Field.Root).
+   */
+  AutocompleteTriggerDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the component has a value (when wrapped in Field.Root).
+   */
+  AutocompleteTriggerDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the trigger is focused (when wrapped in Field.Root).
+   */
+  AutocompleteTriggerDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  AutocompleteTriggerDataAttributes["listEmpty"] = "data-list-empty";
+  return AutocompleteTriggerDataAttributes;
+}({});

package/avatar/fallback/AvatarFallback.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { AvatarRoot } from "../root/AvatarRoot.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { AvatarRootState } from "../root/AvatarRoot.js";
 /**
  * Rendered when the image fails to load or when no image is provided.
  * Renders a `<span>` element.
@@ -9,10 +8,8 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
  */
 export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface AvatarFallbackState extends AvatarRoot.State {
-  transitionStatus: TransitionStatus;
-}
-export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarFallback.State> {
+export interface AvatarFallbackState extends AvatarRootState {}
+export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarFallbackState> {
   /**
    * How long to wait before showing the fallback. Specified in milliseconds.
    */

package/avatar/fallback/AvatarFallback.js

@@ -11,14 +11,6 @@ var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AvatarRootContext = require("../root/AvatarRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _stateAttributesMapping2 = require("../../utils/stateAttributesMapping");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
-const stateAttributesMapping = {
-  ..._stateAttributesMapping.avatarStateAttributesMapping,
-  ..._stateAttributesMapping2.transitionStatusMapping
-};
-
 /**
  * Rendered when the image fails to load or when no image is provided.
  * Renders a `<span>` element.
@@ -30,6 +22,7 @@ const AvatarFallback = exports.AvatarFallback = /*#__PURE__*/React.forwardRef(fu
     className,
     render,
     delay,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -37,13 +30,6 @@ const AvatarFallback = exports.AvatarFallback = /*#__PURE__*/React.forwardRef(fu
   } = (0, _AvatarRootContext.useAvatarRootContext)();
   const [delayPassed, setDelayPassed] = React.useState(delay === undefined);
   const timeout = (0, _useTimeout.useTimeout)();
-  const visible = imageLoadingStatus !== 'loaded' && delayPassed;
-  const {
-    mounted,
-    transitionStatus,
-    setMounted
-  } = (0, _useTransitionStatus.useTransitionStatus)(visible);
-  const fallbackRef = React.useRef(null);
   React.useEffect(() => {
     if (delay !== undefined) {
       timeout.start(delay, () => setDelayPassed(true));
@@ -51,28 +37,15 @@ const AvatarFallback = exports.AvatarFallback = /*#__PURE__*/React.forwardRef(fu
     return timeout.clear;
   }, [timeout, delay]);
   const state = {
-    imageLoadingStatus,
-    transitionStatus
+    imageLoadingStatus
   };
-  (0, _useOpenChangeComplete.useOpenChangeComplete)({
-    open: visible,
-    ref: fallbackRef,
-    onComplete() {
-      if (!visible) {
-        setMounted(false);
-      }
-    }
-  });
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
-    ref: [forwardedRef, fallbackRef],
+    ref: forwardedRef,
     props: elementProps,
-    stateAttributesMapping,
-    enabled: mounted
+    stateAttributesMapping: _stateAttributesMapping.avatarStateAttributesMapping,
+    enabled: imageLoadingStatus !== 'loaded' && delayPassed
   });
-  if (!mounted) {
-    return null;
-  }
   return element;
 });
 if (process.env.NODE_ENV !== "production") AvatarFallback.displayName = "AvatarFallback";

package/avatar/image/AvatarImage.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { AvatarRoot } from "../root/AvatarRoot.js";
+import type { AvatarRootState } from "../root/AvatarRoot.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 import { ImageLoadingStatus } from "./useImageLoadingStatus.js";
 /**
@@ -10,10 +10,13 @@ import { ImageLoadingStatus } from "./useImageLoadingStatus.js";
  * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
  */
 export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
-export interface AvatarImageState extends AvatarRoot.State {
+export interface AvatarImageState extends AvatarRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImage.State> {
+export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImageState> {
   /**
    * Callback fired when the loading status changes.
    */

package/avatar/image/AvatarImage.js

@@ -34,6 +34,7 @@ const AvatarImage = exports.AvatarImage = /*#__PURE__*/React.forwardRef(function
     onLoadingStatusChange: onLoadingStatusChangeProp,
     referrerPolicy,
     crossOrigin,
+    style,
     ...elementProps
   } = componentProps;
   const context = (0, _AvatarRootContext.useAvatarRootContext)();
@@ -41,7 +42,7 @@ const AvatarImage = exports.AvatarImage = /*#__PURE__*/React.forwardRef(function
     referrerPolicy,
     crossOrigin
   });
-  const isVisible = imageLoadingStatus === 'loading' || imageLoadingStatus === 'loaded';
+  const isVisible = imageLoadingStatus === 'loaded';
   const {
     mounted,
     transitionStatus,
@@ -57,10 +58,9 @@ const AvatarImage = exports.AvatarImage = /*#__PURE__*/React.forwardRef(function
       handleLoadingStatusChange(imageLoadingStatus);
     }
   }, [imageLoadingStatus, handleLoadingStatusChange]);
-  const resolvedTransitionStatus = imageLoadingStatus === 'loading' ? 'starting' : transitionStatus;
   const state = {
     imageLoadingStatus,
-    transitionStatus: resolvedTransitionStatus
+    transitionStatus
   };
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open: isVisible,

package/avatar/image/AvatarImageDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum AvatarImageDataAttributes {
+  /**
+   * Present when the image is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the image is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/avatar/image/AvatarImageDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarImageDataAttributes = void 0;
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let AvatarImageDataAttributes = exports.AvatarImageDataAttributes = function (AvatarImageDataAttributes) {
+  /**
+   * Present when the image is animating in.
+   */
+  AvatarImageDataAttributes[AvatarImageDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the image is animating out.
+   */
+  AvatarImageDataAttributes[AvatarImageDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return AvatarImageDataAttributes;
+}({});

package/avatar/image/useImageLoadingStatus.js

@@ -35,6 +35,11 @@ function useImageLoadingStatus(src, {
     }
     image.crossOrigin = crossOrigin ?? null;
     image.src = src;
+
+    // Fast path for cached/decoded images
+    if (image.complete) {
+      setLoadingStatus(image.naturalWidth > 0 ? 'loaded' : 'error');
+    }
     return () => {
       isMounted = false;
     };

package/avatar/root/AvatarRoot.d.ts

@@ -9,9 +9,12 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 export declare const AvatarRoot: React.ForwardRefExoticComponent<Omit<AvatarRootProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 export interface AvatarRootState {
+  /**
+   * The image loading status.
+   */
   imageLoadingStatus: ImageLoadingStatus;
 }
-export interface AvatarRootProps extends BaseUIComponentProps<'span', AvatarRoot.State> {}
+export interface AvatarRootProps extends BaseUIComponentProps<'span', AvatarRootState> {}
 export declare namespace AvatarRoot {
   type State = AvatarRootState;
   type Props = AvatarRootProps;

package/avatar/root/AvatarRoot.js

@@ -21,6 +21,7 @@ const AvatarRoot = exports.AvatarRoot = /*#__PURE__*/React.forwardRef(function A
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const [imageLoadingStatus, setImageLoadingStatus] = React.useState('idle');

package/button/Button.js

@@ -22,6 +22,7 @@ const Button = exports.Button = /*#__PURE__*/React.forwardRef(function Button(co
     disabled = false,
     focusableWhenDisabled = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/calendar/day-button/CalendarDayButton.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+/**
+ * An individual interactive day button in the calendar.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+export declare const CalendarDayButton: React.NamedExoticComponent<Omit<CalendarDayButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface CalendarDayButtonState {
+  /**
+   * Whether the day is selected.
+   */
+  selected: boolean;
+  /**
+   * Whether the day is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Whether the day is not available.
+   */
+  unavailable: boolean;
+  /**
+   * Whether the day contains the current date.
+   */
+  current: boolean;
+  /**
+   * Whether the day is outside the month rendered by the day grid wrapping it.
+   */
+  outsideMonth: boolean;
+}
+export interface CalendarDayButtonProps extends Omit<BaseUIComponentProps<'button', CalendarDayButtonState>, 'value'>, NativeButtonProps {
+  /**
+   * The format used to display the day.
+   * @default adapter.formats.dayOfMonth
+   */
+  format?: string | undefined;
+  /**
+   * When `true` the item remains focusable when disabled.
+   * @default false
+   */
+  focusableWhenDisabled?: boolean | undefined;
+}
+export declare namespace CalendarDayButton {
+  type State = CalendarDayButtonState;
+  type Props = CalendarDayButtonProps;
+}

package/calendar/day-button/CalendarDayButton.js

@@ -0,0 +1,130 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarDayButton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _store = require("@base-ui/utils/store");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _CalendarDayButtonDataAttributes = require("./CalendarDayButtonDataAttributes");
+var _useButton = require("../../use-button");
+var _SharedCalendarRootContext = require("../root/SharedCalendarRootContext");
+var _SharedCalendarDayGridBodyContext = require("../day-grid-body/SharedCalendarDayGridBodyContext");
+var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
+var _SharedCalendarDayGridCellContext = require("../day-grid-cell/SharedCalendarDayGridCellContext");
+var _CompositeItem = require("../../composite/item/CompositeItem");
+var _store2 = require("../store");
+var _jsxRuntime = require("react/jsx-runtime");
+const stateAttributesMapping = {
+  selected(value) {
+    return value ? {
+      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.selected]: ''
+    } : null;
+  },
+  disabled(value) {
+    return value ? {
+      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.disabled]: ''
+    } : null;
+  },
+  unavailable(value) {
+    return value ? {
+      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.unavailable]: ''
+    } : null;
+  },
+  current(value) {
+    return value ? {
+      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.current]: ''
+    } : null;
+  },
+  outsideMonth(value) {
+    return value ? {
+      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.outsideMonth]: ''
+    } : null;
+  }
+};
+const InnerCalendarDayButton = /*#__PURE__*/React.forwardRef(function InnerCalendarDayButton(componentProps, forwardedRef) {
+  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
+  const {
+    className,
+    render,
+    nativeButton,
+    format = adapter.formats.dayOfMonth,
+    disabled,
+    focusableWhenDisabled = false,
+    style,
+    ...elementProps
+  } = componentProps;
+  const store = (0, _SharedCalendarRootContext.useSharedCalendarRootContext)();
+  const {
+    month,
+    today
+  } = (0, _SharedCalendarDayGridBodyContext.useSharedCalendarDayGridBodyContext)();
+  const {
+    isDisabled: isCellDisabled,
+    isUnavailable,
+    isOutsideCurrentMonth,
+    value
+  } = (0, _SharedCalendarDayGridCellContext.useCalendarDayGridCellContext)();
+  const isSelected = (0, _store.useStore)(store, _store2.selectors.isDayButtonSelected, value);
+  const isTabbable = (0, _store.useStore)(store, _store2.selectors.isDayButtonTabbable, value, month);
+  const isCurrent = adapter.isSameDay(value, today);
+  const formattedDate = React.useMemo(() => adapter.format(value, 'localizedDateWithFullMonthAndWeekDay'), [adapter, value]);
+  const isDisabled = disabled ?? isCellDisabled;
+  const isInteractionDisabled = isDisabled || isOutsideCurrentMonth;
+  const {
+    getButtonProps,
+    buttonRef
+  } = (0, _useButton.useButton)({
+    disabled: isInteractionDisabled,
+    native: nativeButton,
+    focusableWhenDisabled
+  });
+  const formattedValue = React.useMemo(() => adapter.formatByString(value, format), [adapter, value, format]);
+  const itemMetadata = React.useMemo(() => ({
+    focusable: (focusableWhenDisabled || !isDisabled) && !isOutsideCurrentMonth
+  }), [focusableWhenDisabled, isDisabled, isOutsideCurrentMonth]);
+  const props = {
+    'aria-label': formattedDate,
+    'aria-selected': isSelected ? true : undefined,
+    'aria-current': isCurrent ? 'date' : undefined,
+    'aria-disabled': isDisabled || isOutsideCurrentMonth || isUnavailable ? true : undefined,
+    children: formattedValue,
+    tabIndex: isTabbable ? 0 : -1,
+    onClick(event) {
+      if (isUnavailable || isInteractionDisabled) {
+        return;
+      }
+      store.selectDate(value, event);
+    }
+  };
+  const state = React.useMemo(() => ({
+    selected: isSelected,
+    disabled: isDisabled,
+    unavailable: isUnavailable,
+    current: isCurrent,
+    outsideMonth: isOutsideCurrentMonth
+  }), [isSelected, isDisabled, isUnavailable, isCurrent, isOutsideCurrentMonth]);
+  const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
+    state,
+    ref: [buttonRef, forwardedRef],
+    props: [props, elementProps, getButtonProps],
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
+    metadata: itemMetadata,
+    render: element
+  });
+});
+
+/**
+ * An individual interactive day button in the calendar.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+if (process.env.NODE_ENV !== "production") InnerCalendarDayButton.displayName = "InnerCalendarDayButton";
+const CalendarDayButton = exports.CalendarDayButton = /*#__PURE__*/React.memo(InnerCalendarDayButton);
+if (process.env.NODE_ENV !== "production") CalendarDayButton.displayName = "CalendarDayButton";

package/calendar/day-button/CalendarDayButtonDataAttributes.d.ts

@@ -0,0 +1,22 @@
+export declare enum CalendarDayButtonDataAttributes {
+  /**
+   * Present when the day is selected.
+   */
+  selected = "data-selected",
+  /**
+   * Present when the day is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the day is unavailable.
+   */
+  unavailable = "data-unavailable",
+  /**
+   * Present when the day is the current date.
+   */
+  current = "data-current",
+  /**
+   * Present when the day is outside the month rendered by the day grid wrapping it.
+   */
+  outsideMonth = "data-outside-month",
+}

package/calendar/day-button/CalendarDayButtonDataAttributes.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarDayButtonDataAttributes = void 0;
+let CalendarDayButtonDataAttributes = exports.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/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/calendar/day-grid/CalendarDayGrid.js

@@ -0,0 +1,32 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarDayGrid = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRenderElement = require("../../utils/useRenderElement");
+/**
+ * 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)
+ */
+const CalendarDayGrid = exports.CalendarDayGrid = /*#__PURE__*/React.forwardRef(function CalendarDayGrid(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    style,
+    ...elementProps
+  } = componentProps;
+  const element = (0, _useRenderElement.useRenderElement)('table', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      role: 'grid'
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") CalendarDayGrid.displayName = "CalendarDayGrid";

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

@@ -0,0 +1,53 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarDayGridBody = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRenderElement = require("../../utils/useRenderElement");
+var _SharedCalendarDayGridBodyContext = require("./SharedCalendarDayGridBodyContext");
+var _useSharedCalendarDayGridBody = require("./useSharedCalendarDayGridBody");
+var _CompositeRoot = require("../../composite/root/CompositeRoot");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Groups all parts of the calendar's day grid.
+ * Renders a `<tbody>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+const CalendarDayGridBody = exports.CalendarDayGridBody = /*#__PURE__*/React.forwardRef(function CalendarDayGridBody(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    children,
+    fixedWeekNumber,
+    offset,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    props,
+    compositeRootProps,
+    context,
+    ref
+  } = (0, _useSharedCalendarDayGridBody.useSharedCalendarDayGridBody)({
+    children,
+    fixedWeekNumber,
+    offset
+  });
+  const element = (0, _useRenderElement.useRenderElement)('tbody', componentProps, {
+    ref: [forwardedRef, ref],
+    props: [props, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharedCalendarDayGridBodyContext.SharedCalendarDayGridBodyContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
+      ...compositeRootProps,
+      render: element
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") CalendarDayGridBody.displayName = "CalendarDayGridBody";

package/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;