stream-chat-react-native-core 9.0.0-beta.9 → 9.0.0

package/src/components/ui/Badge/ErrorBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Exclamation } from '../../../icons/Exclamation';
+import { Exclamation } from '../../../icons/exclamation-mark-fill';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -20,21 +20,6 @@ const sizes = {
   },
 };
 
-const iconSizes = {
-  xs: {
-    height: 8,
-    width: 2,
-  },
-  sm: {
-    height: 9,
-    width: 2,
-  },
-  md: {
-    height: 11,
-    width: 3,
-  },
-};
-
 export type ErrorBadgeProps = ViewProps & {
   /**
    * The size of the badge
@@ -59,8 +44,8 @@ export const ErrorBadge = (props: ErrorBadgeProps) => {
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
       <Exclamation
-        height={iconSizes[size].height}
-        width={iconSizes[size].width}
+        height={sizes[size].height}
+        width={sizes[size].width}
         fill={semantics.textOnAccent}
       />
     </View>

package/src/components/ui/Badge/GiphyBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Giphy } from '../../../icons/Giphy';
+import { Giphy } from '../../../icons/giphy';
 import { primitives } from '../../../theme';
 
 export const GiphyBadge = () => {

package/src/components/ui/Badge/ImgurBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Imgur } from '../../../icons/Imgur';
+import { Imgur } from '../../../icons/imgur';
 import { primitives } from '../../../theme';
 
 export const ImgurBadge = () => {
@@ -32,7 +32,7 @@ const useStyles = () => {
         alignItems: 'center',
       },
       text: {
-        color: semantics.badgeTextInverse,
+        color: semantics.badgeTextOnInverse,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,

package/src/components/ui/Badge/RetryBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { RotateCircle } from '../../../icons/RotateCircle';
+import { Reload } from '../../../icons/refresh';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -50,7 +50,7 @@ export const RetryBadge = (props: RetryBadgeProps) => {
   const styles = useStyles();
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
-      <RotateCircle
+      <Reload
         height={iconSizes[size].height}
         width={iconSizes[size].width}
         stroke={semantics.textOnAccent}

package/src/components/ui/Button/Button.tsx

@@ -76,6 +76,8 @@ export const Button = ({
 
   const LeftIcon = isRTL ? TrailingIcon : LeadingIcon;
   const RightIcon = isRTL ? LeadingIcon : TrailingIcon;
+  const IconOnlyIcon = LeadingIcon ?? TrailingIcon;
+  const PrimaryIcon = iconOnly ? IconOnlyIcon : LeftIcon;
 
   return (
     <View
@@ -109,8 +111,8 @@ export const Button = ({
         disabled={disabled}
         {...rest}
       >
-        {LeftIcon ? (
-          <LeftIcon
+        {PrimaryIcon ? (
+          <PrimaryIcon
             height={20}
             width={20}
             strokeWidth={1.5}

package/src/components/ui/Button/hooks/useButtonStyles.ts

@@ -79,7 +79,7 @@ export const useButtonStyles = ({ variant, type }: ButtonStylesConfig) => {
         borderColor: semantics.buttonSecondaryBorder,
         disabledForegroundColor: semantics.textDisabled,
         disabledBackgroundColor: undefined,
-        disabledBorderColor: semantics.buttonSecondaryBorder,
+        disabledBorderColor: semantics.borderUtilityDisabled,
       },
       secondaryGhost: {
         foregroundColor: semantics.buttonSecondaryText,

package/src/components/ui/GiphyChip.tsx

@@ -6,8 +6,8 @@ import { TextComposerState } from 'stream-chat';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { Cross } from '../../icons/Cross';
-import { Lightning } from '../../icons/Lightning';
+import { Lightning } from '../../icons/bolt';
+import { Cross } from '../../icons/xmark-1';
 import { primitives } from '../../theme';
 
 const textComposerStateSelector = (state: TextComposerState) => ({
@@ -32,10 +32,10 @@ export const GiphyChip = () => {
 
   return (
     <View style={styles.container}>
-      <Lightning fill={semantics.textInverse} height={16} width={16} />
+      <Lightning fill={semantics.textOnInverse} height={16} width={16} />
       <Text style={styles.text}>{commandName}</Text>
       <Pressable onPress={onPressHandler}>
-        <Cross stroke={semantics.textInverse} height={16} width={16} />
+        <Cross stroke={semantics.textOnInverse} height={16} width={16} />
       </Pressable>
     </View>
   );
@@ -59,7 +59,7 @@ const useStyles = () => {
           height: 24,
         },
         text: {
-          color: semantics.textInverse,
+          color: semantics.textOnInverse,
           fontSize: primitives.typographyFontSizeSm,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightNormal,

package/src/components/ui/Input/Input.tsx

@@ -13,8 +13,8 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Checkmark } from '../../../icons/Checkmark';
-import { InfoTooltip } from '../../../icons/InfoTooltip';
+import { Checkmark } from '../../../icons/checkmark-1';
+import { InfoTooltip } from '../../../icons/info';
 import { primitives } from '../../../theme';
 import { IconRenderer } from '../Button';
 
@@ -166,12 +166,14 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       inputContainer: {
         alignItems: 'center',
@@ -190,6 +192,7 @@ const useStyles = () => {
         fontWeight: primitives.typographyFontWeightRegular,
         color: semantics.inputTextDefault,
         paddingVertical: 0, // android is adding extra padding so we remove it
+        textAlign: I18nManager.isRTL ? 'right' : 'left',
       },
       helperContainer: {
         alignItems: 'center',
@@ -201,6 +204,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
     });
   }, [semantics]);

package/src/components/ui/VideoPlayIndicator.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Play } from '../../icons/Play';
+import { Play } from '../../icons/play-fill';
 import { primitives } from '../../theme';
 
 const sizes = {

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -2,7 +2,6 @@ import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
 
 import BottomSheet from '@gorhom/bottom-sheet';
 
-import { AttachmentPickerContentProps } from '../../components';
 import {
   AttachmentPickerStore,
   SelectedPickerType,
@@ -21,10 +20,6 @@ export type AttachmentPickerContextValue = Pick<
   MessageInputContextValue,
   'attachmentSelectionBarHeight' | 'attachmentPickerBottomSheetHeight'
 > & {
-  /**
-   * Custom UI Component to render select more photos for selected gallery access in iOS.
-   */
-  AttachmentPickerIOSSelectMorePhotos: React.ComponentType;
   /**
    * `bottomInset` determine the height of the `AttachmentPicker` and the underlying shift to the `MessageList` when it is opened.
    * This can also be set via the `setBottomInset` function provided by the `useAttachmentPickerContext` hook.
@@ -39,16 +34,6 @@ export type AttachmentPickerContextValue = Pick<
   topInset: number;
 
   disableAttachmentPicker?: boolean;
-  /**
-   * Custom UI component to render overlay component, that shows up on top of [selected
-   * image](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) (with tick mark)
-   *
-   * **Default**
-   * [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
-   */
-  ImageOverlaySelectedComponent: React.ComponentType<{ index: number }>;
-  AttachmentPickerSelectionBar: React.ComponentType;
-  AttachmentPickerContent: React.ComponentType<AttachmentPickerContentProps>;
   attachmentPickerStore: AttachmentPickerStore;
   numberOfAttachmentPickerImageColumns?: number;
   numberOfAttachmentImagesToLoadPerCall?: number;

package/src/contexts/bottomSheetContext/BottomSheetContext.tsx

@@ -8,6 +8,7 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 export type BottomSheetContextValue = {
   close: (closeAnimationFinishedCallback?: () => void) => void;
   currentSnapIndex: SharedValue<number>;
+  topSnapIndex: SharedValue<number>;
 };
 
 export const BottomSheetContext = React.createContext(

package/src/contexts/channelContext/ChannelContext.tsx

@@ -3,9 +3,6 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { Channel, ChannelState } from 'stream-chat';
 
 import { MarkReadFunctionOptions } from '../../components/Channel/Channel';
-import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
-import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
-import { StickyHeaderProps } from '../../components/MessageList/StickyHeader';
 import {
   ChannelUnreadStateStore,
   ChannelUnreadStateStoreType,
@@ -38,12 +35,6 @@ export type ChannelContextValue = {
    * @overrideType Channel
    */
   channel: Channel;
-  /**
-   * Custom UI component to display empty state when channel has no messages.
-   *
-   * **Default** [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx)
-   */
-  EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
   /**
    * When set to true, reactions will be limited to 1 per user. If user selects another reaction
    * then his previous reaction will be removed and replaced with new one.
@@ -90,10 +81,6 @@ export type ChannelContextValue = {
     setTargetedMessage?: (messageId: string) => void;
   }) => Promise<void>;
 
-  /**
-   * Custom loading indicator to override the Stream default
-   */
-  LoadingIndicator: React.ComponentType<LoadingProps>;
   markRead: (options?: MarkReadFunctionOptions) => void;
   /**
    *
@@ -119,10 +106,6 @@ export type ChannelContextValue = {
    * ```
    */
   members: ChannelState['members'];
-  /**
-   * Custom network down indicator to override the Stream default
-   */
-  NetworkDownIndicator: React.ComponentType;
   read: ChannelState['read'];
   reloadChannel: () => Promise<void>;
   scrollToFirstUnreadThreshold: number;
@@ -156,13 +139,6 @@ export type ChannelContextValue = {
    * currently near them within the viewport.
    */
   maximumMessageLimit?: number;
-  /**
-   * Custom UI component for sticky header of channel.
-   *
-   * **Default** [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
-   */
-  StickyHeader?: React.ComponentType<StickyHeaderProps>;
-
   /**
    * Id of message, around which Channel/MessageList gets loaded when opened.
    * You will see a highlighted background for targetted message, when opened.

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -5,23 +5,8 @@ import type { FlatList } from 'react-native-gesture-handler';
 
 import type { Channel } from 'stream-chat';
 
-import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
 import type { GetChannelActionItems } from '../../components/ChannelList/hooks/useChannelActionItems';
 import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
-import type { ChannelDetailsBottomSheetProps } from '../../components/ChannelPreview/ChannelDetailsBottomSheet';
-import { ChannelLastMessagePreviewProps } from '../../components/ChannelPreview/ChannelLastMessagePreview';
-import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
-import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
-import type { ChannelPreviewStatusProps } from '../../components/ChannelPreview/ChannelPreviewStatus';
-import type { ChannelPreviewTitleProps } from '../../components/ChannelPreview/ChannelPreviewTitle';
-import { ChannelPreviewTypingIndicatorProps } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
-import type { ChannelPreviewUnreadCountProps } from '../../components/ChannelPreview/ChannelPreviewUnreadCount';
-import type { ChannelPreviewViewProps } from '../../components/ChannelPreview/ChannelPreviewView';
-import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
-import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
-import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
-
-import { ChannelAvatarProps } from '../../components/ui/Avatar/ChannelAvatar';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -53,18 +38,6 @@ export type ChannelsContextValue = {
    * Channels can be either an array of channels or a promise which resolves to an array of channels
    */
   channels: Channel[] | null;
-  /**
-   * Custom indicator to use when channel list is empty
-   *
-   * Default: [EmptyStateIndicator](https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#emptystateindicator)
-   * */
-  EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
-  /**
-   * Custom loading indicator to display at bottom of the list, while loading further pages
-   *
-   * Default: [ChannelListFooterLoadingIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#footerloadingindicator)
-   */
-  FooterLoadingIndicator: React.ComponentType;
   /**
    * Incremental number change to force update the FlatList
    */
@@ -73,35 +46,13 @@ export type ChannelsContextValue = {
    * Whether or not the FlatList has another page to render
    */
   hasNextPage: boolean;
-  /**
-   * Custom indicator to display error at top of list, if loading/pagination error occurs
-   *
-   * Default: [ChannelListHeaderErrorIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#headererrorindicator)
-   */
-  HeaderErrorIndicator: React.ComponentType<HeaderErrorProps>;
-  /**
-   * Custom indicator to display network-down error at top of list, if there is connectivity issue
-   *
-   * Default: [ChannelListHeaderNetworkDownIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#headernetworkdownindicator)
-   */
-  HeaderNetworkDownIndicator: React.ComponentType;
   /**
    * Initial channels query loading state, triggers the LoadingIndicator
    */
   loadingChannels: boolean;
   /**
-   * Custom indicator to use when there is error in fetching channels
-   *
-   * Default: [LoadingErrorIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#loadingerrorindicator)
-   * */
-  LoadingErrorIndicator: React.ComponentType<LoadingErrorProps>;
-  /**
-   * Custom loading indicator to use on Channel List
-   *
-   * */
-  LoadingIndicator: React.ComponentType<Pick<LoadingProps, 'listType'>>;
-  /**
-   * Whether or not additional channels are being loaded, triggers the FooterLoadingIndicator
+   * Whether or not additional channels are being loaded, triggers the
+   * ChannelListFooterLoadingIndicator
    */
   loadingNextPage: boolean;
   /**
@@ -121,12 +72,6 @@ export type ChannelsContextValue = {
    * Number of skeletons that should show when loading. Default: 6
    */
   numberOfSkeletons: number;
-  /**
-   * Custom UI component to display individual channel list items
-   *
-   * Default: [ChannelPreviewView](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-preview-view/)
-   */
-  Preview: React.ComponentType<ChannelPreviewViewProps>;
   /**
    * Triggered when the channel list is refreshing, displays a loading spinner at the top of the list
    */
@@ -159,73 +104,16 @@ export type ChannelsContextValue = {
    * ```
    */
   setFlatListRef: (ref: FlatList<Channel> | null) => void;
-  /**
-   * Custom UI component to display loading channel skeletons
-   *
-   * Default: [Skeleton](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#skeleton)
-   */
-  Skeleton: React.ComponentType;
   /**
    * Error in channels query, if any
    */
   error?: Error;
-  ListHeaderComponent?: React.ComponentType;
   /**
    * Function to set the currently active channel, acts as a bridge between ChannelList and Channel components
    *
    * @param channel A channel object
    */
   onSelect?: (channel: Channel) => void;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelAvatar.tsx)
-   */
-  PreviewAvatar?: React.ComponentType<ChannelAvatarProps>;
-  /**
-   * Custom UI component to render preview of latest message on channel.
-   *
-   * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
-   */
-  PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps>;
-  /**
-   * Custom UI component to render delivery status of latest message on channel.
-   *
-   * **Default** [ChannelMessagePreviewDeliveryStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx)
-   */
-  PreviewMessageDeliveryStatus?: React.ComponentType<ChannelMessagePreviewDeliveryStatusProps>;
-  /**
-   * Custom UI component to render muted status.
-   *
-   * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
-   */
-  PreviewMutedStatus?: React.ComponentType;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelPreviewStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewStatus.tsx)
-   */
-  PreviewStatus?: React.ComponentType<ChannelPreviewStatusProps>;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelPreviewTitle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewTitle.tsx)
-   */
-  PreviewTitle?: React.ComponentType<ChannelPreviewTitleProps>;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx)
-   */
-  PreviewUnreadCount?: React.ComponentType<ChannelPreviewUnreadCountProps>;
-  PreviewTypingIndicator?: React.ComponentType<ChannelPreviewTypingIndicatorProps>;
-  ChannelDetailsBottomSheet?: React.ComponentType<ChannelDetailsBottomSheetProps>;
-  /**
-   * Custom UI component to render preview of last message on channel.
-   *
-   * **Default** [ChannelLastMessagePreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx)
-   */
-  PreviewLastMessage?: React.ComponentType<ChannelLastMessagePreviewProps>;
   getChannelActionItems?: GetChannelActionItems;
   swipeActionsEnabled?: boolean;
 

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, useContext } from 'react';
-import type { ImageProps } from 'react-native';
 
 import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 
@@ -32,10 +31,6 @@ export type ChatContextValue = {
   client: StreamChat;
   connectionRecovering: boolean;
   enableOfflineSupport: boolean;
-  /**
-   * Drop in replacement of all the underlying Image components within SDK. This is useful for the purpose of offline caching of images. Please check the Offline Support Guide for usage.
-   */
-  ImageComponent: React.ComponentType<ImageProps>;
   isOnline: boolean | null;
   mutedUsers: Mute[];
   /**

package/src/contexts/componentsContext/ComponentsContext.tsx

@@ -0,0 +1,63 @@
+import React, { PropsWithChildren, useContext, useMemo } from 'react';
+
+/**
+ * All overridable UI components in the SDK.
+ * Derived from the DEFAULT_COMPONENTS map in defaultComponents.ts.
+ * Adding a new default automatically makes it available as an override.
+ *
+ * Every key is optional — only specify the components you want to override.
+ */
+export type ComponentOverrides = Partial<
+  (typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']
+> &
+  import('./defaultComponents').OptionalComponentOverrides;
+
+const ComponentsContext = React.createContext<ComponentOverrides>({});
+
+/**
+ * Provider to override UI components at any level of the tree.
+ * Supports nesting — inner overrides merge over outer ones (closest wins).
+ *
+ * @example
+ * ```tsx
+ * <WithComponents overrides={{ Message: MyCustomMessage, SendButton: MyCustomSendButton }}>
+ *   <Channel channel={channel}>
+ *     <MessageList />
+ *     <MessageInput />
+ *   </Channel>
+ * </WithComponents>
+ * ```
+ */
+export const WithComponents = ({
+  children,
+  overrides,
+}: PropsWithChildren<{ overrides: ComponentOverrides }>) => {
+  const parent = useContext(ComponentsContext);
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+  const merged = useMemo(() => ({ ...parent, ...overrides }), []);
+  return <ComponentsContext.Provider value={merged}>{children}</ComponentsContext.Provider>;
+};
+
+// Lazy-loaded to break circular dependency:
+// defaultComponents.ts → imports components → components import useComponentsContext from this file
+let cachedDefaults: ComponentOverrides | undefined;
+const getDefaults = (): ComponentOverrides => {
+  if (!cachedDefaults) {
+    cachedDefaults = (require('./defaultComponents') as { DEFAULT_COMPONENTS: ComponentOverrides })
+      .DEFAULT_COMPONENTS;
+  }
+  return cachedDefaults;
+};
+
+/**
+ * Hook to access resolved component overrides.
+ * Returns all components with defaults filled in — user overrides merged over defaults.
+ */
+export const useComponentsContext = () => {
+  const overrides = useContext(ComponentsContext);
+  return useMemo(
+    () => ({ ...getDefaults(), ...overrides }) as Required<ComponentOverrides>,
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+    [],
+  );
+};