@cdek-it/react-native-ui-kit 0.2.0

package/dist/components/Button/utils/useButtonContainerCallbackStyle.js

@@ -0,0 +1,141 @@
+import { useCallback, useMemo } from 'react';
+import { StyleSheet, } from 'react-native';
+import { makeStyles } from '../../../utils/makeStyles';
+import { useTypeBasedStyle } from './useTypeBasedStyle';
+export const useButtonContainerCallbackStyle = (size, variant, shape, disabled, loading, iconOnly, style, containerVariantStyles, pressedVariantStyles) => {
+    const styles = useButtonContainerStyle();
+    const sizeBasedStyle = useTypeBasedStyle(size, styles);
+    const variantBasedStyle = useTypeBasedStyle(variant, containerVariantStyles);
+    const shapeBasedStyle = useTypeBasedStyle(shape, styles);
+    const pressedStyle = useTypeBasedStyle(variant, pressedVariantStyles);
+    const iconOnlyLinkContainerStyle = useIconOnlyLinkContainerStyle();
+    const disabledStyle = useMemo(() => {
+        if (variant === 'link') {
+            return;
+        }
+        return styles.disabled;
+    }, [styles.disabled, variant]);
+    return useCallback(({ pressed }) => {
+        const containerStyle = [
+            styles.container,
+            sizeBasedStyle,
+            variantBasedStyle,
+            shapeBasedStyle,
+        ];
+        if (iconOnly) {
+            containerStyle.push(styles.iconOnly);
+            if (variant === 'link') {
+                containerStyle.push(iconOnlyLinkContainerStyle[size]);
+            }
+        }
+        if (disabled || loading) {
+            containerStyle.push(disabledStyle);
+        }
+        if (pressed) {
+            containerStyle.push(pressedStyle);
+        }
+        if (typeof style === 'function') {
+            containerStyle.push(style({ pressed }));
+        }
+        else {
+            containerStyle.push(style);
+        }
+        return StyleSheet.flatten(containerStyle);
+    }, [
+        disabled,
+        disabledStyle,
+        iconOnly,
+        iconOnlyLinkContainerStyle,
+        loading,
+        pressedStyle,
+        shapeBasedStyle,
+        size,
+        sizeBasedStyle,
+        style,
+        styles.container,
+        styles.iconOnly,
+        variant,
+        variantBasedStyle,
+    ]);
+};
+const useButtonContainerStyle = makeStyles(({ theme, border, spacing }) => ({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: border.Width.border,
+    },
+    xlarge: {
+        paddingHorizontal: spacing.Padding['p-6'],
+        paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
+        height: theme.Button.Common.buttonHeightXL,
+        minHeight: theme.Button.Common.buttonHeightXL,
+        maxHeight: theme.Button.Common.buttonHeightXL,
+        gap: spacing.Gap['gap-3'],
+        borderRadius: theme.General.borderRadius2XL,
+    },
+    large: {
+        paddingHorizontal: spacing.Padding['p-6'],
+        paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
+        height: theme.Button.Common.buttonHeightLG,
+        minHeight: theme.Button.Common.buttonHeightLG,
+        maxHeight: theme.Button.Common.buttonHeightLG,
+        gap: spacing.Gap['gap-3'],
+        borderRadius: theme.General.borderRadius2XL,
+    },
+    base: {
+        paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight,
+        paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
+        height: theme.Button.Common.buttonHeight,
+        minHeight: theme.Button.Common.buttonHeight,
+        maxHeight: theme.Button.Common.buttonHeight,
+        gap: theme.General.inlineSpacing,
+        borderRadius: theme.General.borderRadiusXL,
+    },
+    small: {
+        paddingHorizontal: spacing.Padding['p-3'],
+        paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
+        height: theme.Button.Common.buttonHeightSM,
+        minHeight: theme.Button.Common.buttonHeightSM,
+        maxHeight: theme.Button.Common.buttonHeightSM,
+        gap: theme.General.inlineSpacing,
+        borderRadius: theme.General.borderRadiusXL,
+    },
+    square: {},
+    circle: { borderRadius: border.Radius['rounded-full'] },
+    disabled: {
+        backgroundColor: theme.Button.Disabled.disabledButtonBg,
+        borderColor: theme.Button.Disabled.disabledButtonBorderColor,
+    },
+    iconOnly: { aspectRatio: 1 },
+}));
+const useIconOnlyLinkContainerStyle = makeStyles(({ spacing, sizing }) => ({
+    xlarge: {
+        paddingHorizontal: spacing.Gap['gap-1'],
+        paddingVertical: spacing.Gap['gap-1'],
+        height: sizing.Height['h-2'],
+        minHeight: sizing.Height['h-2'],
+        maxHeight: sizing.Height['h-2'],
+    },
+    large: {
+        paddingHorizontal: spacing.Gap['gap-0'],
+        paddingVertical: spacing.Gap['gap-0'],
+        height: 24.5,
+        minHeight: 24.5,
+        maxHeight: 24.5,
+    },
+    base: {
+        paddingHorizontal: spacing.Gap['gap-1'],
+        paddingVertical: spacing.Gap['gap-1'],
+        height: 21.5,
+        minHeight: 21.5,
+        maxHeight: 21.5,
+    },
+    small: {
+        paddingHorizontal: spacing.Gap['gap-1'],
+        paddingVertical: spacing.Gap['gap-1'],
+        height: sizing.Height['h-1'],
+        minHeight: sizing.Height['h-2'],
+        maxHeight: sizing.Height['h-2'],
+    },
+}));

package/dist/components/Button/utils/useButtonLabelStyle.d.ts

@@ -0,0 +1,3 @@
+import { type TextStyle } from 'react-native';
+import type { BaseButtonProps, ButtonVariant, LabelVariantStyles } from '../types';
+export declare const useButtonLabelStyle: <Variant extends ButtonVariant>(size: Required<BaseButtonProps<Variant>>["size"], variant: Required<BaseButtonProps<Variant>>["variant"], disabled: Required<BaseButtonProps<Variant>>["disabled"], loading: Required<BaseButtonProps<Variant>>["loading"], labelVariantStyles: LabelVariantStyles<Variant>) => TextStyle;

package/dist/components/Button/utils/useButtonLabelStyle.js

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { makeStyles } from '../../../utils/makeStyles';
+import { useTypeBasedStyle } from './useTypeBasedStyle';
+export const useButtonLabelStyle = (size, variant, disabled, loading, labelVariantStyles) => {
+    const styles = useButtonLabelStyles();
+    const sizeBasedStyle = useTypeBasedStyle(size, styles);
+    const variantBasedStyle = useTypeBasedStyle(variant, labelVariantStyles);
+    return useMemo(() => {
+        const containerStyle = [
+            styles.font,
+            sizeBasedStyle,
+            variantBasedStyle,
+        ];
+        if (disabled || loading) {
+            containerStyle.push(styles.disabled);
+        }
+        return StyleSheet.flatten(containerStyle);
+    }, [
+        disabled,
+        loading,
+        sizeBasedStyle,
+        styles.disabled,
+        styles.font,
+        variantBasedStyle,
+    ]);
+};
+const useButtonLabelStyles = makeStyles(({ theme, typography, fonts }) => ({
+    font: {
+        fontWeight: 600,
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontFamily: fonts.primary,
+    },
+    xlarge: { fontSize: typography.Size['text-xl'] },
+    large: { fontSize: typography.Size['text-xl'] },
+    base: { fontSize: typography.Size['text-base'] },
+    small: { fontSize: typography.Size['text-sm'] },
+    disabled: { color: theme.Button.Disabled.disabledButtonTextColor },
+}));

package/dist/components/Button/utils/useIconStyle.d.ts

@@ -0,0 +1,7 @@
+import { type ColorValue } from 'react-native';
+import type { BaseButtonProps, ButtonVariant, IconVariantStyles } from '../types';
+export declare const useIconStyle: <Variant extends ButtonVariant>(size: Required<BaseButtonProps<Variant>>["size"], variant: Required<BaseButtonProps<Variant>>["variant"], disabled: Required<BaseButtonProps<Variant>>["disabled"], loading: Required<BaseButtonProps<Variant>>["loading"], iconVariantStyles: IconVariantStyles<Variant>) => {
+    width: number;
+    height: number;
+    color: ColorValue;
+};

package/dist/components/Button/utils/useIconStyle.js

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { makeStyles } from '../../../utils/makeStyles';
+import { useTypeBasedStyle } from './useTypeBasedStyle';
+export const useIconStyle = (size, variant, disabled, loading, iconVariantStyles) => {
+    const styles = useStyles();
+    const sizeBasedStyle = useTypeBasedStyle(size, styles);
+    const variantBasedStyle = useTypeBasedStyle(variant, iconVariantStyles);
+    return useMemo(() => {
+        const containerStyle = [sizeBasedStyle, variantBasedStyle];
+        if (disabled || loading) {
+            containerStyle.push(styles.disabled);
+        }
+        return StyleSheet.flatten(containerStyle);
+    }, [disabled, loading, sizeBasedStyle, styles.disabled, variantBasedStyle]);
+};
+const useStyles = makeStyles(({ theme, typography }) => ({
+    xlarge: {
+        height: typography.Size['text-2xl'],
+        width: typography.Size['text-2xl'],
+    },
+    large: {
+        height: typography.Size['text-2xl'],
+        width: typography.Size['text-2xl'],
+    },
+    base: {
+        height: typography.Size['text-xl'],
+        width: typography.Size['text-xl'],
+    },
+    small: {
+        height: typography.Size['text-base'],
+        width: typography.Size['text-base'],
+    },
+    disabled: { color: theme.Button.Disabled.disabledButtonTextColor },
+}));

package/dist/components/Button/utils/useTypeBasedStyle.d.ts

@@ -0,0 +1,2 @@
+import type { StyleProp, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+export declare const useTypeBasedStyle: <Type extends string, Style extends TextStyle | ViewStyle | ImageStyle | object>(type: Type, styles: Record<Type, StyleProp<Style>>) => Record<Type, StyleProp<Style>>[Type];

package/dist/components/Button/utils/useTypeBasedStyle.js

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+export const useTypeBasedStyle = (type, styles) => {
+    return useMemo(() => styles[type], [styles, type]);
+};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type AccessibilityProps } from 'react-native';
+import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+type CheckboxState = 'default' | 'danger';
+export interface CheckboxProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+    /** Обработчик нажатия на чекбокс */
+    readonly onPress: () => void;
+    /**
+     * true, если необходим компонент в активном состоянии
+     * @default false
+     */
+    readonly checked?: boolean;
+    /**
+     * true, если необходим компонент в неопределенном состоянии
+     * @default false
+     */
+    readonly indeterminate?: boolean;
+    /**
+     * Управление доступностью компонента
+     * @default false
+     */
+    readonly disabled?: boolean;
+    /** Выбор состояния компонента */
+    readonly state: CheckboxState;
+}
+/**
+ * Используется для множественного выбора элементов
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5316
+ */
+export declare const Checkbox: React.NamedExoticComponent<CheckboxProps>;
+export {};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,55 @@
+import { IconCheck, IconMinus } from '@tabler/icons-react-native';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, View, } from 'react-native';
+import { makeStyles } from '../../utils/makeStyles';
+import { usePressableStyles } from './hooks/usePressableStyles';
+/**
+ * Используется для множественного выбора элементов
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5316
+ */
+export const Checkbox = memo(({ onPress, checked = false, disabled = false, indeterminate = false, testID, state, }) => {
+    const [isPressed, setIsPressed] = useState(false);
+    const Icon = useMemo(() => {
+        if (indeterminate) {
+            return IconMinus;
+        }
+        if (checked) {
+            return IconCheck;
+        }
+        return null;
+    }, [indeterminate, checked]);
+    const getPressableStyles = usePressableStyles({
+        checked,
+        indeterminate,
+        disabled,
+        state,
+    });
+    const styles = useStyles();
+    const onPressIn = useCallback(() => {
+        setIsPressed(true);
+    }, []);
+    const onPressOut = useCallback(() => {
+        setIsPressed(false);
+    }, []);
+    const pressableStyles = useMemo(() => {
+        return getPressableStyles(isPressed);
+    }, [getPressableStyles, isPressed]);
+    return (<Pressable accessibilityRole='button' disabled={disabled} hitSlop={10} style={styles.container} testID={testID || 'CheckboxButton_Pressable'} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut}>
+        <View style={[styles.background, pressableStyles]}/>
+        {Icon ? (<Icon height={styles.icon.height} style={styles.icon} width={styles.icon.width}/>) : null}
+      </Pressable>);
+});
+const useStyles = makeStyles(({ theme, sizing }) => ({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: theme.Form.Checkbox.checkboxWidth,
+        height: theme.Form.Checkbox.checkboxHeight,
+    },
+    background: { ...StyleSheet.absoluteFillObject },
+    icon: {
+        height: sizing.Height['h-1'],
+        width: sizing.Width['w-1'],
+        color: theme.Form.Checkbox.checkboxIconActiveColor,
+    },
+}));

package/dist/components/Checkbox/hooks/usePressableStyles.d.ts

@@ -0,0 +1,15 @@
+import type { CheckboxProps } from '../Checkbox';
+export declare const usePressableStyles: ({ checked, indeterminate, disabled, state, }: Pick<CheckboxProps, "checked" | "indeterminate" | "disabled" | "state">) => (pressed: boolean) => (false | {
+    width: number;
+    height: number;
+    borderRadius: number;
+    borderWidth: number;
+} | {
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    borderColor: string;
+    opacity: number;
+    outlineWidth: number;
+    mixBlendMode: "luminosity";
+})[];

package/dist/components/Checkbox/hooks/usePressableStyles.js

@@ -0,0 +1,91 @@
+import { useCallback, useMemo } from 'react';
+import { makeStyles } from '../../../utils/makeStyles';
+export const usePressableStyles = ({ checked, indeterminate = false, disabled = false, state, }) => {
+    const styles = useStyles();
+    const styleMap = useMemo(() => ({
+        default: { filled: styles.defaultFilled, clean: styles.defaultClean },
+        disabled: { filled: styles.disabledFilled, clean: styles.disabledClean },
+        danger: {
+            filled: { ...styles.dangerFilled, ...styles.dangerOutline },
+            clean: { ...styles.dangerClean, ...styles.dangerOutline },
+        },
+        hover: { filled: styles.hoverFilled, clean: styles.hoverClean },
+    }), [
+        styles.defaultFilled,
+        styles.defaultClean,
+        styles.disabledFilled,
+        styles.disabledClean,
+        styles.dangerFilled,
+        styles.dangerClean,
+        styles.hoverFilled,
+        styles.hoverClean,
+        styles.dangerOutline,
+    ]);
+    return useCallback((pressed) => {
+        const isFilled = checked || indeterminate;
+        const stateStyles = state in styleMap && isFilled
+            ? styleMap[state].filled
+            : styleMap[state].clean;
+        const disabledStyles = isFilled
+            ? styleMap.disabled.filled
+            : styleMap.disabled.clean;
+        const pressedStyles = isFilled
+            ? styleMap.hover.filled
+            : styleMap.hover.clean;
+        return [
+            styles.container,
+            stateStyles,
+            disabled && disabledStyles,
+            pressed && pressedStyles,
+        ];
+    }, [checked, indeterminate, disabled, state, styles.container, styleMap]);
+};
+const useStyles = makeStyles(({ theme, border }) => ({
+    container: {
+        width: theme.Form.Checkbox.checkboxWidth,
+        height: theme.Form.Checkbox.checkboxHeight,
+        borderRadius: border.Radius['rounded-lg'],
+        borderWidth: border.Width.border,
+    },
+    defaultClean: {
+        backgroundColor: theme.Form.InputText.inputBg,
+        borderColor: theme.Form.InputText.inputBorderColor,
+    },
+    defaultFilled: {
+        backgroundColor: theme.Form.Checkbox.checkboxActiveBg,
+        borderColor: theme.Form.Checkbox.checkboxActiveBorderColor,
+    },
+    hoverClean: {
+        backgroundColor: theme.Form.InputText.inputBg,
+        borderColor: theme.Form.InputText.inputHoverBorderColor,
+    },
+    hoverFilled: {
+        backgroundColor: theme.Form.Checkbox.checkboxActiveHoverBg,
+        borderColor: theme.Form.Checkbox.checkboxActiveHoverBorderColor,
+    },
+    dangerClean: {
+        backgroundColor: theme.Form.InputText.inputBg,
+        borderColor: theme.Form.InputText.inputErrorBorderColor,
+    },
+    dangerFilled: {
+        backgroundColor: theme.Form.Checkbox.checkboxActiveBg,
+        borderColor: theme.Form.InputText.inputErrorBorderColor,
+    },
+    dangerOutline: {
+        outlineStyle: 'solid',
+        outlineColor: theme.General.focusOutlineErrorColor,
+        outlineWidth: Math.round(theme.General.focusShadowWidth),
+    },
+    disabledClean: {
+        backgroundColor: theme.Button.Disabled.disabledButtonBg,
+        borderColor: theme.Form.InputText.inputBorderColor,
+        outlineWidth: 0,
+        mixBlendMode: 'luminosity',
+    },
+    disabledFilled: {
+        borderColor: theme.Form.Checkbox.checkboxActiveBorderColor,
+        opacity: 0.2,
+        outlineWidth: 0,
+        mixBlendMode: 'luminosity',
+    },
+}));

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';

package/dist/components/Checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,30 @@
+import { type PressableProps } from 'react-native';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface ChipProps extends PressableProps {
+    /** SVG-иконка */
+    Icon?: SvgSource;
+    /** Текст для отображения */
+    label: string;
+    /**
+     * Показывать или скрыть кнопку для скрытия компонента
+     * @default true если onClose задан, иначе false
+     */
+    showClose?: boolean;
+    /**
+     * Показывать или скрыть иконку внутри компонента
+     * @default true
+     */
+    showIcon?: boolean;
+    /** Обработчик нажатия на кнопку скрытия компонента */
+    onClose?: () => void;
+}
+/**
+ * Компонет Нажимабельного тега с возможностью закрытия
+ * Используется для представления массива данных в виде меток
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5126&t=jMMaE0JO924pG1ga-4
+ */
+export declare const Chip: import("react").NamedExoticComponent<ChipProps>;
+export declare enum TestId {
+    Container = "Chip_Container",
+    RemoveButton = "Chip_RemoveButton"
+}

package/dist/components/Chip/Chip.js

@@ -0,0 +1,70 @@
+import { IconX } from '@tabler/icons-react-native';
+import { memo } from 'react';
+import { Text, Pressable } from 'react-native';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+/**
+ * Компонет Нажимабельного тега с возможностью закрытия
+ * Используется для представления массива данных в виде меток
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5126&t=jMMaE0JO924pG1ga-4
+ */
+export const Chip = memo(({ Icon, label, disabled, testID, onClose, showClose = !!onClose, showIcon = true, ...rest }) => {
+    const styles = useStyles();
+    return (<Pressable {...rest} disabled={disabled} style={[styles.chip, disabled && styles.disabledChip]} testID={testID || TestId.Container}>
+        {showIcon && Icon ? (<SvgUniversal color={disabled ? styles.disabledIcon.color : styles.icon.color} height={styles.icon.height} source={Icon} width={styles.icon.width}/>) : null}
+
+        <Text numberOfLines={1} style={[styles.text, disabled && styles.disabledText]}>
+          {label}
+        </Text>
+
+        {showClose ? (<Pressable disabled={disabled} testID={TestId.RemoveButton} onPress={onClose}>
+            {({ pressed }) => (<IconX color={disabled ? styles.disabledIcon.color : styles.icon.color} height={styles.icon.height} style={pressed ? styles.pressedClose : null} width={styles.icon.width}/>)}
+          </Pressable>) : null}
+      </Pressable>);
+});
+const useStyles = makeStyles(({ theme, typography, border, fonts }) => ({
+    chip: {
+        height: theme.Misc.Chip.chipHeight,
+        alignSelf: 'flex-start',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: theme.General.inlineSpacing,
+        paddingHorizontal: theme.Misc.Chip.chipPaddingLeftRight,
+        paddingVertical: theme.Misc.Chip.chipPaddingTopBottom,
+        borderRadius: theme.Misc.Chip.chipBorderRadius,
+        borderWidth: border.Width.border,
+        backgroundColor: theme.Misc.Chip.chipBg,
+        borderColor: theme.Misc.Chip.chipBorderColor,
+    },
+    disabledChip: {
+        backgroundColor: theme.Button.Disabled.disabledButtonBg,
+        borderColor: theme.Button.Disabled.disabledButtonBorderColor,
+        opacity: 0.6,
+        mixBlendMode: 'luminosity',
+    },
+    icon: {
+        width: typography.Size['text-base'],
+        height: typography.Size['text-base'],
+        color: theme.Misc.Chip.chipTextColor,
+    },
+    disabledIcon: { color: theme.Button.Disabled.disabledButtonTextColor },
+    text: {
+        fontSize: typography.Size['text-base'],
+        verticalAlign: 'middle',
+        color: theme.Misc.Chip.chipTextColor,
+        includeFontPadding: false,
+        fontFamily: fonts.secondary,
+    },
+    disabledText: { color: theme.General.textSecondaryColor },
+    pressedClose: {
+        borderWidth: border.Width['border-3'],
+        borderColor: border.Color.Service['border-success'][400],
+        borderRadius: border.Radius['rounded-full'],
+    },
+}));
+export var TestId;
+(function (TestId) {
+    TestId["Container"] = "Chip_Container";
+    TestId["RemoveButton"] = "Chip_RemoveButton";
+})(TestId || (TestId = {}));

package/dist/components/Chip/index.d.ts

@@ -0,0 +1 @@
+export { Chip, type ChipProps } from './Chip';

package/dist/components/Chip/index.js

@@ -0,0 +1 @@
+export { Chip } from './Chip';

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type DialogComponentProps } from './DialogComponent';
+export interface DialogProps extends DialogComponentProps {
+    readonly isVisible: boolean;
+    readonly onClose?: () => void;
+    readonly onHideComplete?: () => void;
+    readonly testID?: string;
+}
+export declare const Dialog: React.FC<DialogProps>;
+export declare const DialogTestId: {
+    root: string;
+    backdrop: string;
+    contentContainer: string;
+};

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,96 @@
+import { Portal } from '@gorhom/portal';
+import React, { useCallback, useEffect } from 'react';
+import { View, StyleSheet, BackHandler, Pressable } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, withSpring, runOnJS, interpolate, } from 'react-native-reanimated';
+import { DialogComponent } from './DialogComponent';
+const ANIMATION_DURATION = 200;
+const BACKDROP_OPACITY = 0.5;
+const SCALE_DAMPING = 5;
+const SCALE_STIFFNESS = 50;
+const SCALE_INIT_VALUE = 0.9;
+// eslint-disable-next-line import-x/no-deprecated
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+export const Dialog = ({ isVisible, onClose, onHideComplete, header, footer, body, testID, }) => {
+    const opacity = useSharedValue(0);
+    const scale = useSharedValue(SCALE_INIT_VALUE);
+    const handleAnimationComplete = useCallback(() => {
+        if (onHideComplete) {
+            onHideComplete();
+        }
+    }, [onHideComplete]);
+    useEffect(() => {
+        if (isVisible) {
+            opacity.value = withTiming(1, { duration: ANIMATION_DURATION });
+            scale.value = withSpring(1, {
+                damping: SCALE_DAMPING,
+                stiffness: SCALE_STIFFNESS,
+            });
+        }
+        else {
+            opacity.value = withTiming(0, { duration: ANIMATION_DURATION });
+            scale.value = withTiming(SCALE_INIT_VALUE, { duration: ANIMATION_DURATION }, (finished) => {
+                if (finished) {
+                    runOnJS(handleAnimationComplete)();
+                }
+            });
+        }
+    }, [isVisible, opacity, scale, handleAnimationComplete]);
+    const backdropAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            opacity: interpolate(opacity.value, [0, 1], [0, BACKDROP_OPACITY]),
+        };
+    });
+    const dialogAnimatedStyle = useAnimatedStyle(() => {
+        return { opacity: opacity.value, transform: [{ scale: scale.value }] };
+    });
+    useEffect(() => {
+        const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+            if (isVisible) {
+                onClose?.();
+                return true;
+            }
+            return false;
+        });
+        return subscription.remove;
+    }, [isVisible, onClose]);
+    return (<Portal>
+      <View style={[
+            styles.container,
+            !isVisible && styles.containerNoPointerEvents,
+        ]} testID={testID ?? DialogTestId.root}>
+        <AnimatedPressable style={[styles.backdrop, backdropAnimatedStyle]} testID={DialogTestId.backdrop} onPress={onClose}/>
+        <Animated.View style={dialogAnimatedStyle} testID={DialogTestId.contentContainer}>
+          <DialogComponent body={body} footer={footer} header={header}/>
+        </Animated.View>
+      </View>
+    </Portal>);
+};
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 9999,
+        elevation: 999,
+        pointerEvents: 'auto',
+    },
+    containerNoPointerEvents: { pointerEvents: 'none' },
+    backdrop: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'black',
+    },
+});
+export const DialogTestId = {
+    root: 'DialogModal',
+    backdrop: 'Backdrop',
+    contentContainer: 'ContentContainer',
+};

package/dist/components/Dialog/DialogComponent.d.ts

@@ -0,0 +1,7 @@
+import React, { type ReactNode } from 'react';
+export interface DialogComponentProps {
+    readonly body?: React.ComponentType;
+    readonly footer?: React.ComponentType;
+    readonly header?: ReactNode;
+}
+export declare const DialogComponent: React.FC<DialogComponentProps>;