@base-ui/react 1.2.0 → 1.4.0

package/esm/tabs/list/TabsList.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
 import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.js";
 import { useTabsRootContext } from "../root/TabsRootContext.js";
@@ -22,10 +21,10 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
     className,
     loopFocus = true,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
-    getTabElementBySelectedValue,
     onValueChange,
     orientation,
     value,
@@ -34,13 +33,52 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
   } = useTabsRootContext();
   const [highlightedTabIndex, setHighlightedTabIndex] = React.useState(0);
   const [tabsListElement, setTabsListElement] = React.useState(null);
-  const detectActivationDirection = useActivationDirectionDetector(value,
-  // the old value
-  orientation, tabsListElement, getTabElementBySelectedValue);
+  const indicatorUpdateListenersRef = React.useRef(new Set());
+  const tabResizeObserverElementsRef = React.useRef(new Set());
+  const resizeObserverRef = React.useRef(null);
+  const notifyIndicatorUpdateListeners = useStableCallback(() => {
+    indicatorUpdateListenersRef.current.forEach(listener => {
+      listener();
+    });
+  });
+  React.useEffect(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      if (!indicatorUpdateListenersRef.current.size) {
+        return;
+      }
+      notifyIndicatorUpdateListeners();
+    });
+    resizeObserverRef.current = resizeObserver;
+    if (tabsListElement) {
+      resizeObserver.observe(tabsListElement);
+    }
+    tabResizeObserverElementsRef.current.forEach(element => {
+      resizeObserver.observe(element);
+    });
+    return () => {
+      resizeObserver.disconnect();
+      resizeObserverRef.current = null;
+    };
+  }, [tabsListElement, notifyIndicatorUpdateListeners]);
+  const registerIndicatorUpdateListener = useStableCallback(listener => {
+    indicatorUpdateListenersRef.current.add(listener);
+    return () => {
+      indicatorUpdateListenersRef.current.delete(listener);
+    };
+  });
+  const registerTabResizeObserverElement = useStableCallback(element => {
+    tabResizeObserverElementsRef.current.add(element);
+    resizeObserverRef.current?.observe(element);
+    return () => {
+      tabResizeObserverElementsRef.current.delete(element);
+      resizeObserverRef.current?.unobserve(element);
+    };
+  });
   const onTabActivation = useStableCallback((newValue, eventDetails) => {
     if (newValue !== value) {
-      const activationDirection = detectActivationDirection(newValue);
-      eventDetails.activationDirection = activationDirection;
       onValueChange(newValue, eventDetails);
     }
   });
@@ -55,16 +93,18 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
   const tabsListContextValue = React.useMemo(() => ({
     activateOnFocus,
     highlightedTabIndex,
+    registerIndicatorUpdateListener,
+    registerTabResizeObserverElement,
     onTabActivation,
     setHighlightedTabIndex,
-    tabsListElement,
-    value
-  }), [activateOnFocus, highlightedTabIndex, onTabActivation, setHighlightedTabIndex, tabsListElement, value]);
+    tabsListElement
+  }), [activateOnFocus, highlightedTabIndex, registerIndicatorUpdateListener, registerTabResizeObserverElement, onTabActivation, setHighlightedTabIndex, tabsListElement]);
   return /*#__PURE__*/_jsx(TabsListContext.Provider, {
     value: tabsListContextValue,
     children: /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef, setTabsListElement],
       props: [defaultProps, elementProps],
@@ -79,81 +119,4 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
     })
   });
 });
-if (process.env.NODE_ENV !== "production") TabsList.displayName = "TabsList";
-function getInset(tab, tabsList) {
-  const {
-    left: tabLeft,
-    top: tabTop
-  } = tab.getBoundingClientRect();
-  const {
-    left: listLeft,
-    top: listTop
-  } = tabsList.getBoundingClientRect();
-  const left = tabLeft - listLeft;
-  const top = tabTop - listTop;
-  return {
-    left,
-    top
-  };
-}
-function useActivationDirectionDetector(
-// the old value
-activeTabValue, orientation, tabsListElement, getTabElement) {
-  const [previousTabEdge, setPreviousTabEdge] = React.useState(null);
-  useIsoLayoutEffect(() => {
-    // Whenever orientation changes, reset the state.
-    if (activeTabValue == null || tabsListElement == null) {
-      setPreviousTabEdge(null);
-      return;
-    }
-    const activeTab = getTabElement(activeTabValue);
-    if (activeTab == null) {
-      setPreviousTabEdge(null);
-      return;
-    }
-    const {
-      left,
-      top
-    } = getInset(activeTab, tabsListElement);
-    setPreviousTabEdge(orientation === 'horizontal' ? left : top);
-  }, [orientation, getTabElement, tabsListElement, activeTabValue]);
-  return React.useCallback(newValue => {
-    if (newValue === activeTabValue) {
-      return 'none';
-    }
-    if (newValue == null) {
-      setPreviousTabEdge(null);
-      return 'none';
-    }
-    if (newValue != null && tabsListElement != null) {
-      const activeTabElement = getTabElement(newValue);
-      if (activeTabElement != null) {
-        const {
-          left,
-          top
-        } = getInset(activeTabElement, tabsListElement);
-        if (previousTabEdge == null) {
-          setPreviousTabEdge(orientation === 'horizontal' ? left : top);
-          return 'none';
-        }
-        if (orientation === 'horizontal') {
-          if (left < previousTabEdge) {
-            setPreviousTabEdge(left);
-            return 'left';
-          }
-          if (left > previousTabEdge) {
-            setPreviousTabEdge(left);
-            return 'right';
-          }
-        } else if (top < previousTabEdge) {
-          setPreviousTabEdge(top);
-          return 'up';
-        } else if (top > previousTabEdge) {
-          setPreviousTabEdge(top);
-          return 'down';
-        }
-      }
-    }
-    return 'none';
-  }, [getTabElement, orientation, previousTabEdge, tabsListElement, activeTabValue]);
-}
+if (process.env.NODE_ENV !== "production") TabsList.displayName = "TabsList";

package/esm/tabs/list/TabsListContext.d.ts

@@ -3,6 +3,8 @@ import type { TabsRoot } from "../root/TabsRoot.js";
 export interface TabsListContext {
   activateOnFocus: boolean;
   highlightedTabIndex: number;
+  registerIndicatorUpdateListener: (listener: () => void) => () => void;
+  registerTabResizeObserverElement: (element: HTMLElement) => () => void;
   onTabActivation: (newValue: any, eventDetails: TabsRoot.ChangeEventDetails) => void;
   setHighlightedTabIndex: (index: number) => void;
   tabsListElement: HTMLElement | null;

package/esm/tabs/panel/TabsPanel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsRootState } from "../root/TabsRoot.js";
 import type { TabsTab } from "../tab/TabsTab.js";
 /**
  * A panel displayed when the corresponding tab is active.
@@ -14,11 +14,17 @@ export interface TabsPanelMetadata {
   id?: string | undefined;
   value: TabsTab.Value;
 }
-export interface TabsPanelState extends TabsRoot.State {
+export interface TabsPanelState extends TabsRootState {
+  /**
+   * Whether the component is hidden.
+   */
   hidden: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanel.State> {
+export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanelState> {
   /**
    * The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
    */

package/esm/tabs/panel/TabsPanel.js

@@ -29,6 +29,7 @@ export const TabsPanel = /*#__PURE__*/React.forwardRef(function TabPanel(compone
     value,
     render,
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/tabs/panel/TabsPanelDataAttributes.d.ts

@@ -17,4 +17,12 @@ export declare enum TabsPanelDataAttributes {
    * Present when the panel is hidden.
    */
   hidden = "data-hidden",
+  /**
+   * Present when the panel is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the panel is animating out.
+   */
+  endingStyle = "data-ending-style",
 }

package/esm/tabs/panel/TabsPanelDataAttributes.js

@@ -1,4 +1,5 @@
-export let TabsPanelDataAttributes = /*#__PURE__*/function (TabsPanelDataAttributes) {
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let TabsPanelDataAttributes = function (TabsPanelDataAttributes) {
   /**
    * Indicates the index of the tab panel.
    */
@@ -17,5 +18,13 @@ export let TabsPanelDataAttributes = /*#__PURE__*/function (TabsPanelDataAttribu
    * Present when the panel is hidden.
    */
   TabsPanelDataAttributes["hidden"] = "data-hidden";
+  /**
+   * Present when the panel is animating in.
+   */
+  TabsPanelDataAttributes[TabsPanelDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the panel is animating out.
+   */
+  TabsPanelDataAttributes[TabsPanelDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return TabsPanelDataAttributes;
 }({});

package/esm/tabs/root/TabsRoot.d.ts

@@ -12,10 +12,16 @@ import { REASONS } from "../../utils/reasons.js";
 export declare const TabsRoot: React.ForwardRefExoticComponent<Omit<TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type TabsRootOrientation = BaseOrientation;
 export interface TabsRootState {
+  /**
+   * The component orientation.
+   */
   orientation: TabsRoot.Orientation;
+  /**
+   * The direction used for tab activation.
+   */
   tabActivationDirection: TabsTab.ActivationDirection;
 }
-export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRoot.State> {
+export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRootState> {
   /**
    * The value of the currently active `Tab`. Use when the component is controlled.
    * When the value is `null`, no Tab will be active.

package/esm/tabs/root/TabsRoot.js

@@ -6,7 +6,6 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { CompositeList } from "../../composite/list/CompositeList.js";
-import { useDirection } from "../../direction-provider/DirectionContext.js";
 import { TabsRootContext } from "./TabsRootContext.js";
 import { tabsStateAttributesMapping } from "./stateAttributesMapping.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,9 +23,9 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
     orientation = 'horizontal',
     render,
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
-  const direction = useDirection();
 
   // Track whether the user explicitly provided a `defaultValue` prop.
   // Used to determine if we should honor a disabled tab selection.
@@ -41,14 +40,62 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
   });
   const isControlled = valueProp !== undefined;
   const [tabMap, setTabMap] = React.useState(() => new Map());
-  const [tabActivationDirection, setTabActivationDirection] = React.useState('none');
+
+  // Used for activation direction detection via tab element positions.
+  const getTabElementBySelectedValue = React.useCallback(selectedValue => {
+    if (selectedValue === undefined) {
+      return null;
+    }
+    for (const [tabElement, tabMetadata] of tabMap.entries()) {
+      if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) {
+        return tabElement;
+      }
+    }
+    return null;
+  }, [tabMap]);
+  const [activationDirectionState, setActivationDirectionState] = React.useState(() => ({
+    previousValue: value,
+    tabActivationDirection: 'none'
+  }));
+  const {
+    previousValue,
+    tabActivationDirection: committedTabActivationDirection
+  } = activationDirectionState;
+  let tabActivationDirection = committedTabActivationDirection;
+  let directionComputationIncomplete = false;
+
+  // Compute activation direction during render when value changes so children see
+  // the correct direction on their very first render after the selection update.
+  // The previous value snapshot is stored in state and synced after commit.
+  // https://github.com/mui/base-ui/issues/3873
+  if (previousValue !== value) {
+    tabActivationDirection = computeActivationDirection(previousValue, value, orientation, tabMap);
+
+    // When a new tab is added and selected in the same controlled update,
+    // the tab element may not yet be registered in tabMap, so direction was
+    // computed from a value-based fallback. Keep the previous value snapshot
+    // stale so we re-compute from DOM positions once tabMap is up to date.
+    directionComputationIncomplete = previousValue != null && value != null && getTabElementBySelectedValue(value) == null;
+  }
+  const nextPreviousValue = directionComputationIncomplete ? previousValue : value;
+  const shouldSyncActivationDirectionState = previousValue !== nextPreviousValue || committedTabActivationDirection !== tabActivationDirection;
+  useIsoLayoutEffect(() => {
+    if (!shouldSyncActivationDirectionState) {
+      return;
+    }
+    setActivationDirectionState({
+      previousValue: nextPreviousValue,
+      tabActivationDirection
+    });
+  }, [nextPreviousValue, shouldSyncActivationDirectionState, tabActivationDirection]);
   const onValueChange = useStableCallback((newValue, eventDetails) => {
+    const activationDirection = computeActivationDirection(value, newValue, orientation, tabMap);
+    eventDetails.activationDirection = activationDirection;
     onValueChangeProp?.(newValue, eventDetails);
     if (eventDetails.isCanceled) {
       return;
     }
     setValue(newValue);
-    setTabActivationDirection(eventDetails.activationDirection);
   });
   const registerMountedTabPanel = useStableCallback((panelValue, panelId) => {
     setMountedTabPanels(prev => {
@@ -85,21 +132,7 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
     }
     return undefined;
   }, [tabMap]);
-
-  // used in `useActivationDirectionDetector` for setting data-activation-direction
-  const getTabElementBySelectedValue = React.useCallback(selectedValue => {
-    if (selectedValue === undefined) {
-      return null;
-    }
-    for (const [tabElement, tabMetadata] of tabMap.entries()) {
-      if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) {
-        return tabElement;
-      }
-    }
-    return null;
-  }, [tabMap]);
   const tabsContextValue = React.useMemo(() => ({
-    direction,
     getTabElementBySelectedValue,
     getTabIdByPanelValue,
     getTabPanelIdByValue,
@@ -110,7 +143,7 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
     unregisterMountedTabPanel,
     tabActivationDirection,
     value
-  }), [direction, getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, unregisterMountedTabPanel, tabActivationDirection, value]);
+  }), [getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, unregisterMountedTabPanel, tabActivationDirection, value]);
   const selectedTabMetadata = React.useMemo(() => {
     for (const tabMetadata of tabMap.values()) {
       if (tabMetadata != null && tabMetadata.value === value) {
@@ -153,8 +186,16 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
       return;
     }
     setValue(fallbackValue);
-    setTabActivationDirection('none');
-  }, [defaultValueProp, firstEnabledTabValue, hasExplicitDefaultValueProp, isControlled, selectedTabMetadata, setTabActivationDirection, setValue, tabMap, value]);
+    setActivationDirectionState(prev => {
+      if (prev.tabActivationDirection === 'none') {
+        return prev;
+      }
+      return {
+        ...prev,
+        tabActivationDirection: 'none'
+      };
+    });
+  }, [defaultValueProp, firstEnabledTabValue, hasExplicitDefaultValueProp, isControlled, selectedTabMetadata, setValue, tabMap, value]);
   const state = {
     orientation,
     tabActivationDirection
@@ -173,4 +214,56 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
     })
   });
 });
-if (process.env.NODE_ENV !== "production") TabsRoot.displayName = "TabsRoot";
+if (process.env.NODE_ENV !== "production") TabsRoot.displayName = "TabsRoot";
+function computeActivationDirection(oldValue, newValue, orientation, tabMap) {
+  if (oldValue == null || newValue == null) {
+    return 'none';
+  }
+  let oldTab = null;
+  let newTab = null;
+  for (const [tabElement, tabMetadata] of tabMap.entries()) {
+    if (tabMetadata == null) {
+      continue;
+    }
+    const tabValue = tabMetadata.value ?? tabMetadata.index;
+    if (oldValue === tabValue) {
+      oldTab = tabElement;
+    }
+    if (newValue === tabValue) {
+      newTab = tabElement;
+    }
+    if (oldTab != null && newTab != null) {
+      break;
+    }
+  }
+  if (oldTab == null || newTab == null) {
+    // Fallback for dynamic tabs: when a tab element isn't registered yet
+    // (e.g. added and selected in the same update), infer direction from
+    // the values themselves. Works for comparable types (numbers, strings).
+    if (oldTab !== newTab && (typeof oldValue === 'number' || typeof oldValue === 'string') && typeof oldValue === typeof newValue) {
+      if (orientation === 'horizontal') {
+        return newValue > oldValue ? 'right' : 'left';
+      }
+      return newValue > oldValue ? 'down' : 'up';
+    }
+    return 'none';
+  }
+  const oldRect = oldTab.getBoundingClientRect();
+  const newRect = newTab.getBoundingClientRect();
+  if (orientation === 'horizontal') {
+    if (newRect.left < oldRect.left) {
+      return 'left';
+    }
+    if (newRect.left > oldRect.left) {
+      return 'right';
+    }
+  } else {
+    if (newRect.top < oldRect.top) {
+      return 'up';
+    }
+    if (newRect.top > oldRect.top) {
+      return 'down';
+    }
+  }
+  return 'none';
+}

package/esm/tabs/root/TabsRootContext.d.ts

@@ -30,7 +30,7 @@ export interface TabsRootContext {
   getTabPanelIdByValue: (tabValue: TabsTab.Value) => string | undefined;
   registerMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   setTabMap: (map: Map<Node, (TabsTab.Metadata & {
-    index?: (number | null) | undefined;
+    index?: number | null | undefined;
   }) | null>) => void;
   unregisterMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   /**

package/esm/tabs/root/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
-import type { TabsRoot } from "./TabsRoot.js";
+import type { TabsRootState } from "./TabsRoot.js";
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-export declare const tabsStateAttributesMapping: StateAttributesMapping<TabsRoot.State>;
+export declare const tabsStateAttributesMapping: StateAttributesMapping<TabsRootState>;

package/esm/tabs/tab/TabsTab.d.ts

@@ -30,10 +30,16 @@ export interface TabsTabState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * Whether the component is active.
+   */
   active: boolean;
+  /**
+   * The component orientation.
+   */
   orientation: TabsRoot.Orientation;
 }
-export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'button', TabsTab.State> {
+export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'button', TabsTabState> {
   /**
    * The value of the Tab.
    */

package/esm/tabs/tab/TabsTab.js

@@ -28,6 +28,7 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
     value,
     id: idProp,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -39,6 +40,7 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
     activateOnFocus,
     highlightedTabIndex,
     onTabActivation,
+    registerTabResizeObserverElement,
     setHighlightedTabIndex,
     tabsListElement
   } = useTabsListContext();
@@ -59,6 +61,14 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   });
   const active = value === activeTabValue;
   const isNavigatingRef = React.useRef(false);
+  const tabElementRef = React.useRef(null);
+  React.useEffect(() => {
+    const tabElement = tabElementRef.current;
+    if (!tabElement) {
+      return undefined;
+    }
+    return registerTabResizeObserverElement(tabElement);
+  }, [registerTabResizeObserverElement]);
 
   // Keep the highlighted item in sync with the currently active tab
   // when the value prop changes externally (controlled mode)
@@ -152,7 +162,7 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   };
   const element = useRenderElement('button', componentProps, {
     state,
-    ref: [forwardedRef, buttonRef, compositeRef],
+    ref: [forwardedRef, buttonRef, compositeRef, tabElementRef],
     props: [compositeProps, {
       role: 'tab',
       'aria-controls': tabPanelId,

package/esm/temporal-adapter-date-fns/TemporalAdapterDateFns.d.ts

@@ -0,0 +1,93 @@
+import { Locale as DateFnsLocale } from 'date-fns/locale';
+import { TemporalAdapterFormats, DateBuilderReturnType, TemporalTimezone, TemporalAdapter } from "../types/temporal/index.js";
+declare module '@base-ui/react/types/temporal' {
+  interface TemporalSupportedObjectLookup {
+    'date-fns': Date;
+  }
+}
+export declare class TemporalAdapterDateFns implements TemporalAdapter {
+  isTimezoneCompatible: boolean;
+  lib: string;
+  private locale;
+  formats: TemporalAdapterFormats;
+  escapedCharacters: {
+    start: string;
+    end: string;
+  };
+  constructor({
+    locale
+  }?: TemporalAdapterDateFns.ConstructorParameters);
+  now: (timezone: TemporalTimezone) => Date;
+  date: <T extends string | null>(value: T, timezone: TemporalTimezone) => DateBuilderReturnType<T>;
+  parse: (value: string, format: string, timezone: TemporalTimezone) => Date;
+  getTimezone: (value: Date) => string;
+  setTimezone: (value: Date, timezone: TemporalTimezone) => Date;
+  toJsDate: (value: Date) => Date;
+  getCurrentLocaleCode: () => string;
+  isValid: (value: Date | null) => value is Date;
+  format: (value: Date, formatKey: keyof TemporalAdapterFormats) => string;
+  formatByString: (value: Date, format: string) => string;
+  isEqual: (value: Date | null, comparing: Date | null) => boolean;
+  isSameYear: (value: Date, comparing: Date) => boolean;
+  isSameMonth: (value: Date, comparing: Date) => boolean;
+  isSameDay: (value: Date, comparing: Date) => boolean;
+  isSameHour: (value: Date, comparing: Date) => boolean;
+  isAfter: (value: Date, comparing: Date) => boolean;
+  isBefore: (value: Date, comparing: Date) => boolean;
+  isWithinRange: (value: Date, [start, end]: [Date, Date]) => boolean;
+  startOfYear: (value: Date) => Date;
+  startOfMonth: (value: Date) => Date;
+  startOfWeek: (value: Date) => Date;
+  startOfDay: (value: Date) => Date;
+  startOfHour: (value: Date) => Date;
+  startOfMinute: (value: Date) => Date;
+  startOfSecond: (value: Date) => Date;
+  endOfYear: (value: Date) => Date;
+  endOfMonth: (value: Date) => Date;
+  endOfWeek: (value: Date) => Date;
+  endOfDay: (value: Date) => Date;
+  endOfHour: (value: Date) => Date;
+  endOfMinute: (value: Date) => Date;
+  endOfSecond: (value: Date) => Date;
+  addYears: (value: Date, amount: number) => Date;
+  addMonths: (value: Date, amount: number) => Date;
+  addWeeks: (value: Date, amount: number) => Date;
+  addDays: (value: Date, amount: number) => Date;
+  addHours: (value: Date, amount: number) => Date;
+  addMinutes: (value: Date, amount: number) => Date;
+  addSeconds: (value: Date, amount: number) => Date;
+  addMilliseconds: (value: Date, amount: number) => Date;
+  getYear: (value: Date) => number;
+  getMonth: (value: Date) => number;
+  getDate: (value: Date) => number;
+  getHours: (value: Date) => number;
+  getMinutes: (value: Date) => number;
+  getSeconds: (value: Date) => number;
+  getMilliseconds: (value: Date) => number;
+  getTime: (value: Date) => number;
+  setYear: (value: Date, year: number) => Date;
+  setMonth: (value: Date, month: number) => Date;
+  setDate: (value: Date, date: number) => Date;
+  setHours: (value: Date, hours: number) => Date;
+  setMinutes: (value: Date, minutes: number) => Date;
+  setSeconds: (value: Date, seconds: number) => Date;
+  setMilliseconds: (value: Date, milliseconds: number) => Date;
+  differenceInYears: (value: Date, comparing: Date) => number;
+  differenceInMonths: (value: Date, comparing: Date) => number;
+  differenceInWeeks: (value: Date, comparing: Date) => number;
+  differenceInDays: (value: Date, comparing: Date) => number;
+  differenceInHours: (value: Date, comparing: Date) => number;
+  differenceInMinutes: (value: Date, comparing: Date) => number;
+  getDaysInMonth: (value: Date) => number;
+  getWeekNumber: (value: Date) => number;
+  getDayOfWeek: (value: Date) => number;
+}
+export declare namespace TemporalAdapterDateFns {
+  interface ConstructorParameters {
+    /**
+     * The locale to use for formatting and parsing dates.
+     * @default enUS
+     */
+    locale?: DateFnsLocale | undefined;
+  }
+}