import React$1, { ReactNode, RefObject } from 'react'; import { StyleProp, ViewStyle, Animated, PressableProps, ViewProps, TextStyle, View } from 'react-native'; import { ActivityIndicatorProps, ButtonProps, ViewProps as ViewProps$1, TextProps } from '@react-native-blossom-ui/components'; /** * Overlay Provider Props */ type Listener = () => void; type OverlayUpdate = Partial>; interface OverlayControllerProps extends OverlayActions { /** * Subscribe to overlay state changes. The provided listener function will be called whenever there is a change in the overlay state, such as when an overlay is shown, updated, or dismissed. The function returns an unsubscribe function that can be called to stop listening for changes. * * @returns A function that can be called to unsubscribe the listener. * @example * const unsubscribe = overlayController.subscribe(() => { * console.log('Overlay state changed!') * }) * * // To unsubscribe later * unsubscribe() * @param listener custom listener function */ subscribe(listener: Listener): () => void; /** * Get the current state of all overlays. This method returns an array of overlay nodes, each representing an active overlay in the system. * * @returns An array of `OverlayNode` objects representing the current active overlays. * * @example * const currentOverlays = overlayController.getState() * console.log(currentOverlays) */ getState(): OverlayNode[]; /** * Check if an overlay with the specified ID exists. * @returns `true` if an overlay with the given ID exists, otherwise `false`. * @param id overlay node id to find */ has(id: string): boolean; } type OverlayContextValue = OverlayControllerProps; type OverlayActions = { /** * Show a new overlay with the specified properties. This method adds a new overlay to the stack and returns its unique identifier. */ show: (node: Omit) => string; /** * This method allows you to modify the properties of an active overlay, such as its content, position, or visibility. * * @param id The unique identifier of the overlay to update. * @param updatedNode An object containing the properties to update for the specified overlay. This can include any of the properties defined in `OverlayNode`, except for `id`. */ update: (id: string, updatedNode: Partial>) => void; /** * Dismiss an active overlay by its unique identifier. This will trigger the exit animation and eventually remove the overlay from the stack. * @param id The unique identifier of the overlay to dismiss. */ dismiss: (id: string) => void; /** * Remove an active overlay by its unique identifier. This will immediately remove the overlay from the stack without triggering the exit animation. * @param id The unique identifier of the overlay to remove. */ remove: (id: string) => void; /** * Dismiss the most recently shown overlay, optionally filtering by type. * @param type Optional type of the overlay to dismiss. If not provided, it will dismiss the most recent overlay of any type. */ dismissLast: (type?: OverlayNode['type']) => void; /** * Dismiss all overlays within the specified scope. * @param scope The scope of the overlays to dismiss. This will dismiss all overlays that belong to the specified scope. If no scope is provided, it will not dismiss any overlays. */ dismissScope: (scope: string) => void; /** * Dismiss all active overlays, regardless of their type or scope. This will trigger the exit animation for all overlays and eventually remove them from the stack. * Use this method with caution, as it will close all overlays that are currently open. */ dismissAll: () => void; }; type OverlayBackdropProps = PressableProps & ViewProps & Pick; /** * Components types */ type OverlayType = 'dialog' | 'menu' | 'modal' | 'popover' | 'sheet' | 'snackbar' | 'spotlight' | 'toast' | 'tooltip'; type OverlayBackdropBehavior = 'interactive' | 'block' | 'dismiss'; interface BaseOverlayNode { /** * Whether the overlay is currently visible or not. This property is used internally to manage the visibility of the overlay and trigger the appropriate animations when showing or dismissing the overlay. It should not be provided by the user when showing an overlay, as it will be automatically managed by the system. */ visible?: boolean; /** * Unique identifier for the overlay node. * This is used internally to manage the overlay stack and should not be provided by the user. * The `show` method will return the generated id when an overlay is shown. */ id: string; /** * Type of the overlay, this can be used to categorize the overlays * no default styles or behavior are attached to the type, it's just for categorization and easier management of the overlays * except for dismissLast method which can dismiss the last overlay of a specific type */ type: OverlayType; /** * The content of the overlay */ content?: ReactNode; /** * Custom styles for the overlay content */ contentStyle?: StyleProp; /** * The absolute position from the top of the screen where the overlay should appear. */ top: number; /** * The absolute position from the left of the screen where the overlay should appear. */ left: number; /** * Custom styles for the backdrop of the overlay. This will only be applied if `withBackdrop` is true. */ backdropStyle?: StyleProp; /** * Whether to show a backdrop behind the overlay. * If true, the backdrop will be rendered and its behavior will be determined by the `backdropBehavior` property. */ withBackdrop?: boolean; /** * Control the behavior of the backdrop when the overlay is open * - interactive: allows interaction with the backdrop * - block: won't allow any interaction with the backdrop and won't trigger onDismiss when the backdrop is pressed * - dismiss: will trigger onDismiss when the backdrop is pressed but won't allow any interaction with the backdrop * * @default interactive */ backdropBehavior?: OverlayBackdropBehavior; /** * Control whether the overlay should be dismissed when the back button is pressed on Android * @platform android */ dismissOnBackPress?: boolean; /** * Optional scope for grouping overlays. * This can be used to dismiss all overlays within the same scope using the `dismissScope` method. */ scope?: string; /** * Duration in milliseconds after which the overlay will be automatically dismissed. */ duration?: number; /** * Callback function that is called when the overlay is dismissed. */ onDismiss?: () => void; /** * Custom animation configuration for the overlay. * This allows you to define custom enter and exit animations for the overlay. */ animationConfig?: OverlayAnimationConfig; /** * Custom animation driver for the overlay. This is a function that takes an Animated.Value and returns an Animated.CompositeAnimation. * If `renderAnimated` is provided, this driver will be used to control the animation of the overlay. * If not provided, the default fade in/out animation will be used. */ animationDriver?: OverlayAnimationDriver; /** * Custom render function for the overlay content with animation support. This allows you to have full control over the rendering and animation of the overlay. * If this is provided, the `animationDriver` will be used to control the animation of the overlay, and the `content` property will be ignored. * The render function receives an object with the following properties: * @param ctx * - progress: An Animated.Value that represents the progress of the animation (0 to 1). * - phase: A string that indicates the current phase of the animation ('entering', 'entered', 'exiting', 'exited'). * - requestDismiss: A function that can be called to request the dismissal of the overlay. * @returns A ReactNode that represents the content of the overlay. This content will be rendered with the provided animation. */ renderAnimated?: (ctx: OverlayAnimationProps) => React.ReactNode; } type OverlayNodeContent = BaseOverlayNode & { /** * The content of the overlay. This can be any ReactNode and will be rendered as the content of the overlay. If `renderAnimated` is provided, this property will be ignored in favor of the custom render function. */ content: ReactNode; }; type OverlayNodeAnimatedContent = BaseOverlayNode & { /** * Custom render function for the overlay content with animation support. This allows you to have full control over the rendering and animation of the overlay. * If this is provided, the `animationDriver` will be used to control the animation of the overlay, and the `content` property will be ignored. * The render function receives an object with the following properties: * @param ctx * - progress: An Animated.Value that represents the progress of the animation (0 to 1). * - phase: A string that indicates the current phase of the animation ('entering', 'entered', 'exiting', 'exited'). * - requestDismiss: A function that can be called to request the dismissal of the overlay. * @returns A ReactNode that represents the content of the overlay. This content will be rendered with the provided animation. */ renderAnimated: (ctx: OverlayAnimationProps) => React.ReactNode; }; type OverlayNode = OverlayNodeContent | OverlayNodeAnimatedContent; interface OverlayContainerProps { /** * Node properties used to render the overlay content and control its behavior. */ node: OverlayNode; /** * The index of the overlay in the stack, used to calculate zIndex */ stackIndex: number; } type OverlayAnimationProps = { /** * An Animated.Value that represents the progress of the animation, typically ranging from 0 to 1. This value can be used to drive custom animations for the overlay content. */ progress: Animated.Value; /** * A string that indicates the current phase of the animation. It can be one of the following values: * - 'entering': The overlay is in the process of entering (becoming visible). * - 'entered': The overlay has fully entered and is now visible. * - 'exiting': The overlay is in the process of exiting (becoming hidden). * - 'exited': The overlay has fully exited and is now hidden. */ phase: 'entering' | 'entered' | 'exiting' | 'exited'; /** * A function that can be called to request the dismissal of the overlay. */ requestDismiss: () => void; }; type AnimationPhase = 'entering' | 'entered' | 'exiting' | 'exited'; type OverlayAnimationDriver = (value: Animated.Value) => Animated.CompositeAnimation; type OverlayAnimationConfig = { /** * Custom animation for when the overlay enters. This is a function that takes an Animated.Value and returns an Animated.CompositeAnimation. * If not provided, the default fade in animation will be used. */ enter?: OverlayAnimationDriver; /** * Custom animation for when the overlay exits. This is a function that takes an Animated.Value and returns an Animated.CompositeAnimation. * If not provided, the default fade out animation will be used. */ exit?: OverlayAnimationDriver; }; declare const Overlay: OverlayActions; declare const useOverlay: () => OverlayActions; declare function OverlayProvider({ children }: { children: ReactNode; }): React$1.JSX.Element; type ToastStatus = 'default' | 'info' | 'success' | 'warning' | 'error'; type ToastTheme = 'light' | 'dark' | 'auto'; interface ToastViewProps { /** * The main message to be displayed in the toast. */ message: string; /** * An optional description providing additional details about the toast message. */ description?: string; /** * The status of the toast, which can be used to indicate the type of message. * * @default default */ status?: ToastStatus; /** * Whether to use the native Android toast implementation. * * @default false */ shouldUseNativeAndroidToast?: boolean; /** * The theme of the toast, which can be 'light', 'dark', or 'auto' to match the system theme. * * @default auto */ theme?: ToastTheme; } type AndroidToastViewProps = Pick; interface ToastOptions { /** * The main message to be displayed in the toast. */ message: string; /** * An optional description providing additional details about the toast message. */ description?: string; /** * The status of the toast, which can be used to indicate the type of message. * * @default default */ status?: ToastStatus; /** * The offset from the top or bottom of the screen where the toast should appear. */ offset?: number; /** * The duration for which the toast should be visible, in milliseconds. */ duration?: number; /** * The position of the toast on the screen. * * @default bottom */ position?: 'top' | 'bottom'; /** * The theme of the toast, which can be 'light', 'dark', or 'auto' to match the system theme. * * @default auto */ theme?: ToastTheme; /** * Callback function that is called when the toast is shown. */ onShow?: () => void; /** * Callback function that is called when the toast is hidden. */ onHide?: () => void; } interface ToastHandlerOptions { /** * Show a toast with the given options. */ show: (options: ToastOptions) => void; /** * Hide the currently visible toast, if any. If there are multiple toast visible, it will hide the most recently shown one. */ hide: () => void; } declare const Toast: ToastHandlerOptions; type SnackbarTheme = 'light' | 'dark' | 'auto'; interface SnackbarViewProps { /** * The main message to be displayed in the snackbar. */ text: string; /** * Text style for the main message in the snackbar. */ textStyle?: StyleProp; /** * Control the number of lines for the main message in the snackbar. */ numberOfLines?: number; /** * The theme of the snackbar, which can be 'light', 'dark', or 'auto' to match the system theme. * * @default auto */ theme?: SnackbarTheme; /** * The label for the action button in the snackbar. If not provided, the action button will not be displayed. */ actionText?: string; /** * Text style for the action button in the snackbar. */ actionTextStyle?: StyleProp; /** * Callback function that is called when the action button in the snackbar is pressed. */ onActionPress?: () => void; /** * Custom style for the snackbar container. */ containerStyle?: StyleProp; } interface SnackbarOptions extends SnackbarViewProps { /** * The offset from the top or bottom of the screen where the snackbar should appear. * * @default 100 */ offset?: number; /** * The duration for which the snackbar should be visible, in milliseconds. * If not provided, it will default to 2000 milliseconds (2 seconds). * * @default 2000 */ duration?: number; /** * The position of the snackbar on the screen. * * @default bottom */ position?: 'top' | 'bottom'; /** * Callback when a snackbar is shown */ onShow?: () => void; /** * Callback when a snackbar is going to hide */ onHide?: () => void; } interface SnackbarHandlerOptions { /** * Show a snackbar with the given options. */ show: (options: SnackbarOptions) => void; /** * Hide the currently visible snackbar, if any. If there are multiple snackbar visible, it will hide the most recently shown one. */ hide: () => void; } declare const Snackbar: SnackbarHandlerOptions; interface ActionSheetItem { /** * A unique key to identify the option. This will be passed to the `onItemPress` callback when the option is pressed. * It is important to ensure that each option has a unique key to avoid unexpected behavior. */ key: string; /** * Label to be displayed for the option in the ActionSheet. */ label: string; /** * Optional icon to be displayed alongside the option label on its left side */ icon?: ReactNode; /** * Whether the option is disabled or not. */ disabled?: boolean; /** * Whether the option is destructive or not. * If destructive is true, the option label will be styled with an error color to indicate that it performs a destructive action. */ destructive?: boolean; /** * Style for the option text */ labelStyle?: StyleProp; } interface ActionSheetViewProps { /** * Title to be displayed at the top of the ActionSheet */ title?: string; /** * Style for the title of the ActionSheet */ titleStyle?: StyleProp; /** * Message to be displayed below the title of the ActionSheet */ message?: string; /** * Style for the message of the ActionSheet */ messageStyle?: StyleProp; /** * Options to be displayed in the ActionSheet */ options: ActionSheetItem[]; /** * Style for the container of the ActionSheet */ containerStyle?: StyleProp; /** * Whether to show a cancel button at the bottom of the ActionSheet */ withCancelButton?: boolean; /** * Label for the cancel button. If not provided, it will default to "Cancel". * * @default Cancel */ cancelButtonLabel?: string; /** * Style for the cancel button text */ cancelButtonTextStyle?: StyleProp; /** * Action item style for each item in the ActionSheet */ itemStyle?: StyleProp; /** * Callback function for option press action * * @param key The key of the pressed option * @param index The index of the pressed option */ onItemPress?: (key: string, index: number) => void; } interface ActionSheetOptions extends ActionSheetViewProps { /** * Callback function that is called when the ActionSheet is shown. This can be used to perform any setup or side effects when the ActionSheet becomes visible. */ onShow?: () => void; /** * Callback function that is called when the ActionSheet is dismissed. This can be used to perform any cleanup or side effects when the ActionSheet becomes not visible. */ onHide?: () => void; } interface ActionSheetHandlerOptions { /** * Show an ActionSheet with the given options. If an ActionSheet is already visible, it will be replaced with the new one. */ show: (options: ActionSheetOptions) => void; /** * Hide the currently visible ActionSheet, if any. If there are multiple ActionSheets visible, it will hide the most recently shown one. */ hide: () => void; } declare const ActionSheet: ActionSheetHandlerOptions; interface BottomSheetProps { /** * Whether the BottomSheet is visible or not. */ visible: boolean; /** * The content to be displayed inside the BottomSheet. */ children: React.ReactNode; /** * Callback function that is called when the BottomSheet requests to be dismissed. * This can happen when the user taps on the backdrop (if `backdropBehavior` is set to 'dismiss') or when the `duration` expires. */ onDismiss: () => void; /** * Control the behavior of the backdrop when the BottomSheet is visible. * - 'interactive': The backdrop will be rendered and will allow interactions with it. Tapping on the backdrop will trigger the `onDismiss` callback. * - 'block': The backdrop will be rendered and will block interactions with it. Tapping on the backdrop will not do anything. * - 'dismiss': The backdrop will be rendered and tapping on it will trigger the `onDismiss` callback, but it will not allow any interactions with the backdrop itself. * * @default interactive */ backdropBehavior?: 'interactive' | 'block' | 'dismiss'; /** * style for the container of the BottomSheet */ style?: StyleProp; /** * style for the backdrop of the BottomSheet */ backdropStyle?: StyleProp; } declare function BottomSheet(props: BottomSheetProps): null; interface ModalProps { /** * Whether the Modal is visible or not. */ visible: boolean; /** * The content to be displayed inside the Modal. */ children: React$1.ReactNode; /** * Callback function that is called when the Modal is dismissed. * This is invoked whenever the Modal becomes not visible, for example when the user taps * on the backdrop (if `backdropBehavior` is set to 'dismiss') or when it is dismissed * programmatically. */ onDismiss?: () => void; /** * Control the behavior of the backdrop when the Modal is visible. * - 'interactive': The backdrop will be rendered and will allow user interactions on the backdrop itself. * - 'block': The backdrop will be rendered and will block interactions with it. Tapping on the backdrop will not do anything. * - 'dismiss': The backdrop will be rendered and used solely as a tap-to-dismiss surface. Tapping on the backdrop will trigger the `onDismiss` callback, but no other interactions with the backdrop are allowed. * * @default dismiss */ backdropBehavior?: 'interactive' | 'block' | 'dismiss'; /** * Style for the content of the Modal. */ style?: StyleProp; /** * Style for the backdrop of the Modal. */ backdropStyle?: StyleProp; /** * Control whether the overlay should be dismissed when the back button is pressed on Android * @platform android */ dismissOnBackPress?: boolean; } interface LoadingOverlayProps extends Pick, ActivityIndicatorProps { } interface ProgressDialogProps extends Omit, 'children' | 'visible'> { /** * Whether the ProgressDialog is visible or not. */ visible?: boolean; /** * The label to be displayed next to the ActivityIndicator. If not provided, it will default to "Loading...". * * @default 'Loading...' */ label?: string; /** * Style for the label text */ labelStyle?: StyleProp; /** * Customize the activity indicator shown in the progress dialog */ activityIndicatorProps?: ActivityIndicatorProps; } declare function Modal(props: ModalProps): null; declare function LoadingOverlay(props: LoadingOverlayProps): React$1.JSX.Element; declare function ProgressDialog(props: ProgressDialogProps): React$1.JSX.Element; interface DialogBaseProps { /** * Whether the Dialog is visible or not. */ visible: boolean; /** * The content of the Dialog, which can be any React node. */ children?: ReactNode; /** * Callback function that is called when the Dialog is dismissed. * This is invoked whenever the Dialog becomes not visible, for example when the user taps * on the backdrop (if `backdropBehavior` is set to 'dismiss') or when it is dismissed * programmatically. */ onDismiss: () => void; /** * Control the behavior of the backdrop when the Dialog is visible. * - 'interactive': The backdrop will be rendered and will allow user interactions on the backdrop itself. * - 'block': The backdrop will be rendered and will block interactions with it. Tapping on the backdrop will not do anything. * - 'dismiss': The backdrop will be rendered and used solely as a tap-to-dismiss surface. Tapping on the backdrop will trigger the `onDismiss` callback, but no other interactions with the backdrop are allowed. * * @default dismiss */ backdropBehavior?: 'interactive' | 'block' | 'dismiss'; /** * Style for the container of the Dialog. */ style?: StyleProp; /** * Style for the backdrop of the Dialog. */ backdropStyle?: StyleProp; } interface DialogProps extends Omit { /** * icon to be displayed at the top of the Dialog */ icon?: ReactNode; /** * title to be displayed below the icon */ title?: string; /** * description to be displayed below the title */ description?: string; /** * Actions to be displayed at the bottom of the Dialog. * * Multiple actions are rendered together in the Dialog's action area in the same order * as they are provided in the array. * * If this prop is omitted or an empty array is provided, no action buttons are rendered. */ actions?: ButtonProps[]; } declare function DialogAction({ children, ...rest }: ButtonProps): React$1.JSX.Element; declare function DialogActions({ children, ...rest }: ViewProps$1): React$1.JSX.Element; declare function DialogContent({ children, ...rest }: ViewProps$1): React$1.JSX.Element; declare function DialogTitle({ children, ...rest }: TextProps): React$1.JSX.Element; declare function DialogIcon({ children, ...rest }: ViewProps$1): React$1.JSX.Element; declare function DialogRoot(props: DialogBaseProps): React$1.JSX.Element; declare function DialogAlert(props: DialogProps): React$1.JSX.Element; declare const Dialog: { Alert: typeof DialogAlert; Root: typeof DialogRoot; Icon: typeof DialogIcon; Title: typeof DialogTitle; Content: typeof DialogContent; Actions: typeof DialogActions; Action: typeof DialogAction; }; type PopoverPosition = 'top' | 'bottom' | 'left' | 'right'; type BasePopoverOptions = Pick; type PopoverOptions = BasePopoverOptions & { /** * The target element that the popover will be anchored to. * The popover will be positioned relative to this target element based on the `position` prop. */ Target: ReactNode; /** * The position of the popover relative to the target element. * Can be one of "top", "bottom", "left", or "right". The default value is "bottom". * @default bottom */ position?: PopoverPosition; /** * The horizontal offset distance between the popover and the target element. * Positive values will move the popover to the right, while negative values will move it to the left. * @default 0 */ offsetX?: number; /** * The vertical offset distance between the popover and the target element. * Positive values will move the popover downwards, while negative values will move it upwards. * @default 0 */ offsetY?: number; /** * Whether to show an arrow pointing from the popover to the target element. * @default false */ withArrow?: boolean; /** * The offset of the arrow from the center of the popover. * Positive values will move the arrow to the right, while negative values will move it to the left. */ arrowOffset?: number; }; type PopoverWithContentOptions = PopoverOptions & { content: ReactNode; }; type PopoverProps = PopoverOptions & { /** * Whether the popover is visible or not. */ visible: boolean; /** * The content of the popover. */ children: ReactNode; /** * Whether the popover should fit the width of the target element. */ fitTargetWidth?: boolean; /** * Style for the container of the target element. * This prop exposed to add custom styles to the container of the target element. */ targetContainerStyle?: StyleProp; }; /** * The style for positioning the popover content. */ type PopoverPositionStyle = { left?: number; right?: number; top?: number; bottom?: number; width?: number; maxWidth?: number; }; /** * The style for positioning the arrow indicator. */ type PopoverArrowStyle = { left?: number; right?: number; top?: number; bottom?: number; transform?: { rotate: string; }[]; }; declare function usePopover(targetWidth: number, fitTargetWidth: boolean): { open: (anchorRef: RefObject, options: PopoverWithContentOptions) => void; close: () => void; update: (anchorRef: RefObject, options: PopoverWithContentOptions) => void; }; declare function Popover(props: PopoverProps): React$1.JSX.Element; declare function Triangle({ style }: { style?: StyleProp; }): React$1.JSX.Element; export { ActionSheet, type ActionSheetHandlerOptions, type ActionSheetItem, type ActionSheetOptions, type ActionSheetViewProps, type AndroidToastViewProps, type AnimationPhase, type BaseOverlayNode, type BasePopoverOptions, BottomSheet, type BottomSheetProps, Dialog, type DialogBaseProps, type DialogProps, type Listener, LoadingOverlay, type LoadingOverlayProps, Modal, type ModalProps, Overlay, type OverlayActions, type OverlayAnimationConfig, type OverlayAnimationDriver, type OverlayAnimationProps, type OverlayBackdropBehavior, type OverlayBackdropProps, type OverlayContainerProps, type OverlayContextValue, type OverlayControllerProps, type OverlayNode, type OverlayNodeAnimatedContent, type OverlayNodeContent, OverlayProvider, type OverlayType, type OverlayUpdate, Popover, type PopoverArrowStyle, type PopoverOptions, type PopoverPosition, type PopoverPositionStyle, type PopoverProps, type PopoverWithContentOptions, ProgressDialog, type ProgressDialogProps, Snackbar, type SnackbarHandlerOptions, type SnackbarOptions, type SnackbarTheme, type SnackbarViewProps, Toast, type ToastHandlerOptions, type ToastOptions, type ToastStatus, type ToastTheme, type ToastViewProps, Triangle, useOverlay, usePopover };