@utilitywarehouse/hearth-react-native 0.27.3 → 0.28.0

package/build/components/Combobox/ComboboxOption.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { useComboboxContext } from './Combobox.context';
+const ComboboxOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }) => {
+    const { selectedValue, selectOption } = useComboboxContext();
+    const isSelected = selected !== undefined ? selected : selectedValue === value;
+    styles.useVariants({ disabled });
+    const handlePress = () => {
+        if (disabled) {
+            return;
+        }
+        if (onPress) {
+            onPress(value);
+            return;
+        }
+        selectOption({ label, value });
+    };
+    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.components.select.dropdown.item.gap,
+        borderRadius: theme.components.select.dropdown.item.borderRadius,
+        paddingVertical: theme.components.select.dropdown.item.padding,
+        paddingHorizontal: theme.components.select.dropdown.padding,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+        _web: {
+            _hover: {
+                backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+            },
+        },
+    },
+    icon: {
+        color: theme.color.interactive.functional.foreground.subtle,
+    },
+    pressed: {
+        backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+    },
+    labelContainer: {
+        flex: 1,
+    },
+}));
+ComboboxOption.displayName = 'ComboboxOption';
+export default ComboboxOption;

package/build/components/Combobox/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Combobox } from './Combobox';
+export { ComboboxContext, useComboboxContext } from './Combobox.context';
+export { default as ComboboxOption } from './ComboboxOption';
+export type { default as ComboboxProps, ComboboxOptionItemProps, ComboboxOptionProps, ComboboxRenderContentProps, } from './Combobox.props';

package/build/components/Combobox/index.js

@@ -0,0 +1,3 @@
+export { default as Combobox } from './Combobox';
+export { ComboboxContext, useComboboxContext } from './Combobox.context';
+export { default as ComboboxOption } from './ComboboxOption';

package/build/components/Modal/Modal.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { BottomSheetFooter, } from '@gorhom/bottom-sheet';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle, } from 'react-native';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { AccessibilityInfo, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -11,6 +11,7 @@ import { BodyText } from '../BodyText';
 import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
 import { Button } from '../Button';
 import { Heading } from '../Heading';
+import { SafeAreaView } from '../SafeAreaView';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, background = 'default', scrollable = true, ...props }) => {
@@ -21,13 +22,6 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
     const isBrandBackground = background === 'brand';
-    const [inNavModalHeight, setInNavModalHeight] = useState();
-    const isNavModalFullScreen = useMemo(() => {
-        if (!inNavModalHeight || !inNavModal)
-            return false;
-        const screenHeight = Dimensions.get('window').height;
-        return inNavModalHeight >= screenHeight;
-    }, [inNavModalHeight, inNavModal]);
     const triggerCloseAnimation = useCallback(() => {
         if (Platform.OS === 'android' && inNavModal) {
             pretendContentTranslateY.value = withTiming(20, {
@@ -39,7 +33,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
                 easing: Easing.in(Easing.quad),
             });
         }
-    }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
+    }, [inNavModal, pretendContentTranslateY, backgroundOpacity]);
     useImperativeHandle(ref, () => ({
         ...bottomSheetModalRef.current,
         triggerCloseAnimation,
@@ -84,28 +78,28 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         }
         props.onChange?.(index, position, type);
     };
-    const handleCloseButtonPress = () => {
+    const handleCloseButtonPress = useCallback(() => {
         bottomSheetModalRef.current?.dismiss();
         if (onPressCloseButton) {
             onPressCloseButton();
         }
-    };
-    const handlePrimaryButtonPress = () => {
+    }, [onPressCloseButton]);
+    const handlePrimaryButtonPress = useCallback(() => {
         if (onPressPrimaryButton) {
             onPressPrimaryButton();
         }
         if (closeOnPrimaryButtonPress) {
             bottomSheetModalRef.current?.dismiss();
         }
-    };
-    const handleSecondaryButtonPress = () => {
+    }, [closeOnPrimaryButtonPress, onPressPrimaryButton]);
+    const handleSecondaryButtonPress = useCallback(() => {
         if (onPressSecondaryButton) {
             onPressSecondaryButton();
         }
         if (closeOnSecondaryButtonPress) {
             bottomSheetModalRef.current?.dismiss();
         }
-    };
+    }, [closeOnSecondaryButtonPress, onPressSecondaryButton]);
     const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
     styles.useVariants({
         loading,
@@ -114,11 +108,19 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         stickyFooter,
         showHandle: props.showHandle,
         background: isBrandBackground ? 'brand' : 'primary',
-        ...(inNavModal && {
-            fullscreen: isNavModalFullScreen,
-        }),
     });
-    const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
+    const footer = useMemo(() => (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })), [
+        handlePrimaryButtonPress,
+        handleSecondaryButtonPress,
+        inNavModal,
+        isBrandBackground,
+        onPressPrimaryButton,
+        onPressSecondaryButton,
+        primaryButtonProps,
+        primaryButtonText,
+        secondaryButtonProps,
+        secondaryButtonText,
+    ]);
     const InNavModalContainer = scrollable ? ScrollView : View;
     const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: {
                         flex: stickyFooter ? 1 : 0,
@@ -126,20 +128,11 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
                     }, ...(scrollable ? { contentContainerStyle: { paddingHorizontal: 1 } } : {}), children: [children, !stickyFooter ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons
                     ? footer
                     : null] })) }));
-    const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
-        onPressPrimaryButton,
-        primaryButtonText,
-        onPressSecondaryButton,
-        secondaryButtonText,
-        primaryButtonProps,
-        secondaryButtonProps,
-    ]);
-    return inNavModal ? (_jsxs(View, { onLayout: e => {
-            setInNavModalHeight(e.nativeEvent.layout.height);
-        }, style: {
+    const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [footer]);
+    return inNavModal ? (_jsxs(View, { style: {
             flex: 1,
             backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
-        }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
+        }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(SafeAreaView, { edges: ['top', 'bottom'], style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     modal: {
@@ -245,7 +238,7 @@ const styles = StyleSheet.create((theme, rt) => ({
         borderTopLeftRadius: theme.components.modal.borderRadius,
         borderTopRightRadius: theme.components.modal.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+        padding: theme.components.bottomSheet.padding,
         variants: {
             background: {
                 primary: {},
@@ -253,15 +246,6 @@ const styles = StyleSheet.create((theme, rt) => ({
                     backgroundColor: theme.color.background.brand,
                 },
             },
-            fullscreen: {
-                true: {
-                    padding: theme.components.bottomSheet.padding,
-                    paddingTop: rt.insets.top,
-                },
-                false: {
-                    padding: theme.components.bottomSheet.padding,
-                },
-            },
         },
     },
     inNavModalFooterContainer: {

package/build/components/Modal/Modal.web.js

@@ -141,13 +141,13 @@ const styles = StyleSheet.create((theme, rt) => ({
         borderTopRightRadius: theme.components.modal.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
         gap: theme.components.modal.gap,
-        padding: theme.components.modal.padding,
+        padding: theme.components.bottomSheet.padding,
         paddingBottom: theme.components.modal.padding + rt.insets.bottom,
     },
     androidContainer: {
         height: rt.insets.top + 18,
-        paddingLeft: theme.components.modal.padding,
-        paddingRight: theme.components.modal.padding,
+        paddingLeft: theme.components.bottomSheet.padding,
+        paddingRight: theme.components.bottomSheet.padding,
         justifyContent: 'flex-end',
     },
     pretendContent: {

package/build/components/Pagination/Pagination.d.ts

@@ -0,0 +1,6 @@
+import type PaginationProps from './Pagination.props';
+declare const Pagination: {
+    ({ currentPage, totalPages, onPageChange, condensed, hideSkipButtons, style, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Pagination;

package/build/components/Pagination/Pagination.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftSmallIcon, ChevronRightSmallIcon, SkipFirstSmallIcon, SkipLastSmallIcon, } from '@utilitywarehouse/hearth-react-native-icons';
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { ELLIPSIS, generatePageNumbers } from './Pagination.utils';
+const PaginationItem = ({ label, selected = false, onPress }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    styles.useVariants({ selected });
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Go to page ${label}`, accessibilityState: { selected }, onBlur: () => setIsFocused(false), onFocus: () => setIsFocused(true), onPress: onPress, style: ({ pressed }) => [
+            styles.pageItem,
+            pressed && !selected && styles.pageItemPressed,
+            isFocused && styles.pageItemFocused,
+        ], children: _jsx(BodyText, { size: "md", style: styles.pageItemText, children: label }) }));
+};
+const PaginationArrowButton = ({ accessibilityLabel, disabled, icon, onPress, }) => {
+    return (_jsx(UnstyledIconButton, { accessibilityLabel: accessibilityLabel, disabled: disabled, icon: icon, onPress: onPress, size: "sm", style: styles.arrowButton }));
+};
+const Pagination = ({ currentPage, totalPages, onPageChange, condensed = false, hideSkipButtons = false, style, ...props }) => {
+    const pages = generatePageNumbers(currentPage, totalPages);
+    const handleFirst = () => {
+        if (currentPage !== 1) {
+            onPageChange(1);
+        }
+    };
+    const handlePrevious = () => {
+        if (currentPage > 1) {
+            onPageChange(currentPage - 1);
+        }
+    };
+    const handleNext = () => {
+        if (currentPage < totalPages) {
+            onPageChange(currentPage + 1);
+        }
+    };
+    const handleLast = () => {
+        if (currentPage !== totalPages) {
+            onPageChange(totalPages);
+        }
+    };
+    return (_jsxs(View, { accessibilityLabel: "Pagination", style: [styles.container, style], ...props, children: [_jsxs(View, { style: styles.controllers, children: [!hideSkipButtons ? (_jsx(PaginationArrowButton, { accessibilityLabel: "Go to first page", disabled: currentPage === 1, icon: SkipFirstSmallIcon, onPress: handleFirst })) : null, _jsx(PaginationArrowButton, { accessibilityLabel: "Go to previous page", disabled: currentPage === 1, icon: ChevronLeftSmallIcon, onPress: handlePrevious })] }), condensed ? (_jsxs(BodyText, { size: "md", children: ["Page ", currentPage, " of ", totalPages] })) : (_jsx(View, { style: styles.pages, children: pages.map((page, index) => {
+                    if (page === ELLIPSIS) {
+                        return (_jsx(BodyText, { size: "md", style: styles.ellipsis, children: ELLIPSIS }, `ellipsis-${index}`));
+                    }
+                    return (_jsx(PaginationItem, { label: page, onPress: () => onPageChange(page), selected: page === currentPage }, page));
+                }) })), _jsxs(View, { style: styles.controllers, children: [_jsx(PaginationArrowButton, { accessibilityLabel: "Go to next page", disabled: currentPage === totalPages, icon: ChevronRightSmallIcon, onPress: handleNext }), !hideSkipButtons ? (_jsx(PaginationArrowButton, { accessibilityLabel: "Go to last page", disabled: currentPage === totalPages, icon: SkipLastSmallIcon, onPress: handleLast })) : null] })] }));
+};
+PaginationItem.displayName = 'PaginationItem';
+Pagination.displayName = 'Pagination';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        width: '100%',
+        minHeight: theme.components.pagination.item.height,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: theme.components.pagination.gap,
+    },
+    controllers: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.components.pagination.gap,
+    },
+    arrowButton: {
+        width: theme.components.pagination.item.width,
+        height: theme.components.pagination.item.height,
+    },
+    pages: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        gap: theme.components.pagination.gap,
+    },
+    pageItem: {
+        width: theme.components.pagination.item.width,
+        height: theme.components.pagination.item.height,
+        borderRadius: theme.components.pagination.item.radius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'transparent',
+        _web: {
+            _hover: {
+                backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+            },
+        },
+        variants: {
+            selected: {
+                true: {
+                    backgroundColor: theme.color.interactive.brand.surface.strong.default,
+                },
+            },
+        },
+    },
+    pageItemPressed: {
+        backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+    },
+    pageItemFocused: {
+        outlineWidth: 2,
+        outlineOffset: -2,
+        outlineColor: theme.color.border.strong,
+        outlineStyle: 'solid',
+    },
+    pageItemText: {
+        variants: {
+            selected: {
+                true: {
+                    color: theme.color.text.inverted,
+                },
+                false: {
+                    color: theme.color.text.primary,
+                },
+            },
+        },
+    },
+    ellipsis: {
+        minWidth: theme.components.pagination.item.width,
+        textAlign: 'center',
+        color: theme.color.text.primary,
+    },
+}));
+export default Pagination;

package/build/components/Pagination/Pagination.props.d.ts

@@ -0,0 +1,26 @@
+import type { ViewProps } from 'react-native';
+export interface PaginationProps extends ViewProps {
+    /**
+     * The current active page number (1-indexed).
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * Callback fired when the page changes.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Whether to show condensed copy instead of individual page items.
+     * @default false
+     */
+    condensed?: boolean;
+    /**
+     * Whether to hide the first and last page controls.
+     * @default false
+     */
+    hideSkipButtons?: boolean;
+}
+export default PaginationProps;

package/build/components/Pagination/Pagination.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Pagination/Pagination.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const ELLIPSIS = "...";
+export declare const generatePageNumbers: (currentPage: number, totalPages: number) => Array<number | typeof ELLIPSIS>;

package/build/components/Pagination/Pagination.utils.js

@@ -0,0 +1,20 @@
+export const ELLIPSIS = '...';
+const MAX_VISIBLE_ITEMS = 7;
+export const generatePageNumbers = (currentPage, totalPages) => {
+    if (totalPages <= MAX_VISIBLE_ITEMS) {
+        return Array.from({ length: totalPages }, (_, index) => index + 1);
+    }
+    const pages = [];
+    const isNearStart = currentPage <= 4;
+    const isNearEnd = currentPage > totalPages - 4;
+    if (isNearStart) {
+        pages.push(1, 2, 3, 4, 5, ELLIPSIS, totalPages);
+        return pages;
+    }
+    if (isNearEnd) {
+        pages.push(1, ELLIPSIS, totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
+        return pages;
+    }
+    pages.push(1, ELLIPSIS, currentPage - 1, currentPage, currentPage + 1, ELLIPSIS, totalPages);
+    return pages;
+};

package/build/components/Pagination/Pagination.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/Pagination/Pagination.utils.test.js

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { ELLIPSIS, generatePageNumbers } from './Pagination.utils';
+describe('generatePageNumbers', () => {
+    it('returns all pages when the total fits within the visible limit', () => {
+        expect(generatePageNumbers(1, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+    });
+    it('returns the leading window when the current page is near the start', () => {
+        expect(generatePageNumbers(2, 10)).toEqual([1, 2, 3, 4, 5, ELLIPSIS, 10]);
+    });
+    it('returns the centered window when the current page is in the middle', () => {
+        expect(generatePageNumbers(5, 10)).toEqual([1, ELLIPSIS, 4, 5, 6, ELLIPSIS, 10]);
+    });
+    it('returns the trailing window when the current page is near the end', () => {
+        expect(generatePageNumbers(9, 10)).toEqual([1, ELLIPSIS, 6, 7, 8, 9, 10]);
+    });
+});

package/build/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { default as PaginationProps } from './Pagination.props';

package/build/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination';

package/build/components/SafeAreaView/SafeAreaView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { View } from 'react-native';
+import SafeAreaViewProps from './SafeAreaView.props';
+declare const SafeAreaView: React.ForwardRefExoticComponent<SafeAreaViewProps & React.RefAttributes<View>>;
+export default SafeAreaView;

package/build/components/SafeAreaView/SafeAreaView.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { StyleSheet as RNStyleSheet, useWindowDimensions, View, } from 'react-native';
+import { UnistylesRuntime } from '../../core';
+const DEFAULT_EDGES = ['top', 'right', 'bottom', 'left'];
+const EMPTY_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+const EDGE_EPSILON = 1;
+const getNumericStyleValue = (value) => {
+    return typeof value === 'number' ? value : 0;
+};
+const getStyleInsetValue = (style, mode, edge) => {
+    const prefix = mode === 'margin' ? 'margin' : 'padding';
+    if (!style) {
+        // No style specified at all; treat as zero inset for safe-area calculations.
+        return 0;
+    }
+    if (edge === 'top') {
+        const raw = style[`${prefix}Top`] ?? style[`${prefix}Vertical`] ?? style[prefix];
+        if (raw == null) {
+            return 0;
+        }
+        return getNumericStyleValue(raw);
+    }
+    if (edge === 'bottom') {
+        const raw = style[`${prefix}Bottom`] ?? style[`${prefix}Vertical`] ?? style[prefix];
+        if (raw == null) {
+            return 0;
+        }
+        return getNumericStyleValue(raw);
+    }
+    if (edge === 'left') {
+        const raw = style[`${prefix}Left`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
+        if (raw == null) {
+            return 0;
+        }
+        return getNumericStyleValue(raw);
+    }
+    const raw = style[`${prefix}Right`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
+    if (raw == null) {
+        return 0;
+    }
+    return getNumericStyleValue(raw);
+};
+const SafeAreaView = forwardRef(({ children, edges = DEFAULT_EDGES, mode = 'padding', onLayout, style, ...props }, ref) => {
+    const viewRef = useRef(null);
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const [edgeInsets, setEdgeInsets] = useState(EMPTY_INSETS);
+    const flattenedStyle = useMemo(() => RNStyleSheet.flatten(style), [style]);
+    const updateEdgeInsets = useCallback(() => {
+        const currentView = viewRef.current;
+        if (!currentView) {
+            return;
+        }
+        currentView.measureInWindow((x, y, width, height) => {
+            const runtimeInsets = UnistylesRuntime.insets ?? EMPTY_INSETS;
+            const nextEdgeInsets = {
+                top: edges.includes('top') ? Math.max(runtimeInsets.top - Math.max(y, 0), 0) : 0,
+                right: edges.includes('right')
+                    ? Math.max(runtimeInsets.right - Math.max(windowWidth - (x + width), 0), 0)
+                    : 0,
+                bottom: edges.includes('bottom')
+                    ? Math.max(runtimeInsets.bottom - Math.max(windowHeight - (y + height), 0), 0)
+                    : 0,
+                left: edges.includes('left') ? Math.max(runtimeInsets.left - Math.max(x, 0), 0) : 0,
+            };
+            setEdgeInsets(previousInsets => {
+                const hasChanged = Object.keys(nextEdgeInsets).some(edge => Math.abs(previousInsets[edge] - nextEdgeInsets[edge]) > EDGE_EPSILON);
+                return hasChanged ? nextEdgeInsets : previousInsets;
+            });
+        });
+    }, [edges, windowHeight, windowWidth]);
+    useEffect(() => {
+        const frame = requestAnimationFrame(updateEdgeInsets);
+        return () => cancelAnimationFrame(frame);
+    }, [updateEdgeInsets]);
+    const handleRef = useCallback((node) => {
+        viewRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleLayout = useCallback((event) => {
+        onLayout?.(event);
+        requestAnimationFrame(updateEdgeInsets);
+    }, [onLayout, updateEdgeInsets]);
+    const safeAreaStyle = useMemo(() => {
+        const nextStyle = {};
+        if (mode === 'padding') {
+            nextStyle.paddingTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
+            nextStyle.paddingRight =
+                getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
+            nextStyle.paddingBottom =
+                getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
+            nextStyle.paddingLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
+            return nextStyle;
+        }
+        nextStyle.marginTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
+        nextStyle.marginRight = getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
+        nextStyle.marginBottom =
+            getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
+        nextStyle.marginLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
+        return nextStyle;
+    }, [
+        edgeInsets.bottom,
+        edgeInsets.left,
+        edgeInsets.right,
+        edgeInsets.top,
+        flattenedStyle,
+        mode,
+    ]);
+    return (_jsx(View, { ref: handleRef, onLayout: handleLayout, style: [style, safeAreaStyle], ...props, children: children }));
+});
+SafeAreaView.displayName = 'SafeAreaView';
+export default SafeAreaView;

package/build/components/SafeAreaView/SafeAreaView.props.d.ts

@@ -0,0 +1,17 @@
+import { ViewProps } from 'react-native';
+export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
+interface SafeAreaViewProps extends ViewProps {
+    /**
+     * Which edges should receive safe area compensation.
+     *
+     * @default ['top', 'right', 'bottom', 'left']
+     */
+    edges?: SafeAreaEdge[];
+    /**
+     * Whether safe area compensation should be applied as padding or margin.
+     *
+     * @default 'padding'
+     */
+    mode?: 'padding' | 'margin';
+}
+export default SafeAreaViewProps;

package/build/components/SafeAreaView/SafeAreaView.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/SafeAreaView/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SafeAreaView } from './SafeAreaView';
+export type { default as SafeAreaViewProps, SafeAreaEdge } from './SafeAreaView.props';

package/build/components/SafeAreaView/index.js

@@ -0,0 +1 @@
+export { default as SafeAreaView } from './SafeAreaView';

package/build/components/Select/Select.js

@@ -11,6 +11,7 @@ import { Icon } from '../Icon';
 import { Input } from '../Input';
 import { SelectContext } from './Select.context';
 import SelectOption from './SelectOption';
+import { SafeAreaView } from '../SafeAreaView';
 const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
@@ -72,11 +73,11 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
                     ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {
                                 const IconAny = Icon;
                                 return _jsx(IconAny, { as: LeadingIcon, style: styles.icon });
-                            })() })), _jsx(View, { style: styles.optionContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.placeholderText, children: selectedOption?.label || selectedLabel || placeholder }) }), _jsx(View, { children: _jsx(Icon, { as: ExpandSmallIcon, style: styles.icon }) })] }) }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: ['25%', '40%', '80%'], onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsxs(SelectContext.Provider, { value: {
+                            })() })), _jsx(View, { style: styles.optionContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.placeholderText, children: selectedOption?.label || selectedLabel || placeholder }) }), _jsx(View, { children: _jsx(Icon, { as: ExpandSmallIcon, style: styles.icon }) })] }) }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: ['25%', '40%', '80%'], onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsx(SelectContext.Provider, { value: {
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
+                    }, children: _jsxs(SafeAreaView, { edges: ['top'], style: { flex: 1 }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {