@pallasoft/ps-mobile-components 1.5.0 → 1.7.0

package/dist/components/ps-infinite-list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-infinite-list';
+export * from './ps-infinite-list-props';

package/dist/components/ps-infinite-list/index.js

@@ -0,0 +1,2 @@
+export * from './ps-infinite-list';
+export * from './ps-infinite-list-props';

package/dist/components/ps-infinite-list/ps-infinite-list-footer.d.ts

@@ -0,0 +1,2 @@
+import type { PsInfiniteListFooterProps } from './ps-infinite-list-props';
+export declare const PsInfiniteListFooter: ({ isLoadingMore }: PsInfiniteListFooterProps) => import("react").JSX.Element | null;

package/dist/components/ps-infinite-list/ps-infinite-list-footer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+export const PsInfiniteListFooter = ({ isLoadingMore }) => isLoadingMore ? (_jsx(View, { style: { alignItems: 'center', paddingVertical: PsLayoutConfig.gutter }, testID: 'ps-infinite-list-loading-more', children: _jsx(PsSpinner, {}) })) : null;

package/dist/components/ps-infinite-list/ps-infinite-list-item.d.ts

@@ -0,0 +1,2 @@
+import type { PsInfiniteListItemProps } from './ps-infinite-list-props';
+export declare const PsInfiniteListItem: ({ children, count, index }: PsInfiniteListItemProps) => import("react").JSX.Element;

package/dist/components/ps-infinite-list/ps-infinite-list-item.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsInfiniteListService } from '../../services/ps-infinite-list-service';
+export const PsInfiniteListItem = ({ children, count, index }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(View, { style: PsInfiniteListService.itemFrame(theme, index, count), children: [index === 0 ? null : _jsx(View, { style: PsInfiniteListService.divider(theme) }), children] }));
+};

package/dist/components/ps-infinite-list/ps-infinite-list-props.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { PsListVariant } from '../../services/ps-list-service';
+import type { PsListSkeletonLayout } from '../ps-list/ps-list-props';
+export interface PsInfiniteSection<T> {
+    data: T[];
+    footer?: string;
+    key: string;
+    title?: string;
+}
+export interface PsInfiniteListProps<T> {
+    empty?: ReactNode;
+    hasMore: boolean;
+    header?: ReactNode;
+    isLoading?: boolean;
+    isLoadingMore?: boolean;
+    items?: T[];
+    keyExtractor: (item: T) => string;
+    onEndReached: () => void;
+    onRefresh?: () => Promise<void>;
+    renderItem: (item: T) => ReactElement;
+    sections?: PsInfiniteSection<T>[];
+    skeleton?: PsListSkeletonLayout;
+    style?: StyleProp<ViewStyle>;
+    variant?: PsListVariant;
+}
+export interface PsInfiniteListFooterProps {
+    isLoadingMore: boolean;
+}
+export interface PsInfiniteListItemProps {
+    children: ReactElement;
+    count: number;
+    index: number;
+}

package/dist/components/ps-infinite-list/ps-infinite-list-props.js

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

package/dist/components/ps-infinite-list/ps-infinite-list.d.ts

@@ -0,0 +1,2 @@
+import type { PsInfiniteListProps } from './ps-infinite-list-props';
+export declare const PsInfiniteList: <T>({ empty, hasMore, header, isLoading, isLoadingMore, items, keyExtractor, onEndReached, onRefresh, renderItem, sections, skeleton, style, variant, }: PsInfiniteListProps<T>) => import("react").JSX.Element;

package/dist/components/ps-infinite-list/ps-infinite-list.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform, RefreshControl, SectionList, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsInfiniteConfig } from '../../constants/ps-infinite-config';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsSelectionBarConfig } from '../../constants/ps-selection-bar-config';
+import { PsScrollContext } from '../../contexts/ps-scroll-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsRefresh } from '../../hooks/use-ps-refresh';
+import { usePsScrollHost } from '../../hooks/use-ps-scroll-host';
+import { usePsTabBar } from '../../hooks/use-ps-tab-bar';
+import { usePsTopInset } from '../../hooks/use-ps-top-inset';
+import { PsInfiniteListService } from '../../services/ps-infinite-list-service';
+import { PsListService } from '../../services/ps-list-service';
+import { PsScreenService } from '../../services/ps-screen-service';
+import { PsSkeletonList } from '../ps-skeleton/ps-skeleton-list';
+import { PsText } from '../ps-text/ps-text';
+import { PsInfiniteListFooter } from './ps-infinite-list-footer';
+import { PsInfiniteListItem } from './ps-infinite-list-item';
+export const PsInfiniteList = ({ empty, hasMore, header, isLoading = false, isLoadingMore = false, items, keyExtractor, onEndReached, onRefresh, renderItem, sections, skeleton, style, variant = 'grouped', }) => {
+    const theme = usePsMobileTheme();
+    const insets = useSafeAreaInsets();
+    const topInset = usePsTopInset();
+    const { hasTabBar, isHidden: isTabBarHidden } = usePsTabBar();
+    const { isRefreshing, refresh } = usePsRefresh(onRefresh);
+    const host = usePsScrollHost();
+    const shown = isLoading ? [] : PsInfiniteListService.sections(items, sections);
+    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(PsScrollContext, { value: host.context, children: _jsx(SectionList, { ListEmptyComponent: isLoading ? _jsx(PsSkeletonList, { layout: skeleton }) : _jsx(_Fragment, { children: empty }), ListFooterComponent: _jsx(PsInfiniteListFooter, { isLoadingMore: isLoadingMore }), ListHeaderComponent: header === undefined ? undefined : (_jsx(View, { style: { marginBottom: PsLayoutConfig.listGap }, children: header })), contentContainerStyle: PsScreenService.content({
+                        bottom: PsScreenService.bottomInset(insets.bottom, hasTabBar, isTabBarHidden),
+                        top: topInset,
+                    }, Platform.OS === 'ios', PsListService.hasGutter(variant), 0, isTabBarHidden ? PsSelectionBarConfig.height : 0), contentInsetAdjustmentBehavior: 'automatic', initialNumToRender: PsInfiniteConfig.initialNumToRender, keyExtractor: keyExtractor, keyboardDismissMode: 'interactive', keyboardShouldPersistTaps: 'handled', maxToRenderPerBatch: PsInfiniteConfig.maxToRenderPerBatch, onContentSizeChange: host.onContentSizeChange, onEndReached: () => {
+                        if (PsInfiniteListService.shouldLoadMore(hasMore, isLoading, isLoadingMore))
+                            onEndReached();
+                    }, onEndReachedThreshold: PsInfiniteConfig.endReachedThreshold, onLayout: host.onLayout, onScroll: host.onScroll, refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], onRefresh: () => void refresh(), progressBackgroundColor: theme.surface, refreshing: isRefreshing, tintColor: theme.primary })), renderItem: ({ index, item, section }) => (_jsx(PsInfiniteListItem, { count: section.data.length, index: index, children: renderItem(item) })), renderSectionFooter: ({ section }) => (_jsx(View, { style: {
+                            gap: PsLayoutConfig.listSectionGap,
+                            paddingBottom: section === shown[shown.length - 1] ? 0 : PsLayoutConfig.listGap,
+                            paddingTop: section.footer === undefined ? 0 : PsLayoutConfig.listSectionGap,
+                        }, children: section.footer === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: section.footer })) })), renderSectionHeader: ({ section }) => section.title === undefined ? null : (_jsx(View, { style: { paddingBottom: PsLayoutConfig.listSectionGap }, children: _jsx(PsText, { accessibilityRole: 'header', tone: 'muted', variant: 'label', children: section.title }) })), scrollEnabled: !host.isLocked, scrollEventThrottle: PsLayoutConfig.scrollEventThrottle, sections: shown, showsVerticalScrollIndicator: false, stickySectionHeadersEnabled: false, style: [{ backgroundColor: theme.background, flex: 1 }, style], testID: 'ps-infinite-list', windowSize: PsInfiniteConfig.windowSize }) }), header === undefined ? null : (_jsx(View, { pointerEvents: 'none', style: [PsScreenService.statusBarScrim(topInset), { backgroundColor: theme.background }], testID: 'ps-infinite-list-status-bar-scrim' }))] }));
+};

package/dist/components/ps-list/ps-list-select-row.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsNativeMenuService } from '../../services/ps-native-menu-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsSelectService } from '../../services/ps-select-service';
 import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
@@ -15,14 +17,16 @@ export const PsListSelectRow = ({ isDisabled = false, isLoading = false, onChang
     const theme = usePsMobileTheme();
     if (isLoading)
         return _jsx(PsListRowSkeleton, { subtitle: subtitle, value: value });
-    return (_jsx(PsNativeMenu, { isDisabled: isDisabled, isFullWidth: true, items: PsNativeMenuService.items(options, value), label: title, onSelect: onChange, children: () => (_jsxs(View, { accessibilityRole: 'button', accessibilityValue: { text: PsSelectService.selectedLabel(options, value) }, style: {
+    return (_jsx(PsNativeMenu, { isDisabled: isDisabled, isFullWidth: true, items: PsNativeMenuService.items(options, value), label: title, onSelect: onChange, children: ({ open }) => (_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, accessibilityValue: { text: PsSelectService.selectedLabel(options, value) }, android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), disabled: isDisabled, onPress: open, style: ({ pressed }) => ({
                 alignItems: 'center',
-                backgroundColor: theme.surface,
+                backgroundColor: pressed
+                    ? PsStateService.pressedFill(theme, theme.surface)
+                    : theme.surface,
                 flexDirection: 'row',
                 gap: PsLayoutConfig.headerSlotGap,
                 minHeight: PsLayoutConfig.rowMinHeight,
                 opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
                 paddingHorizontal: PsLayoutConfig.gutter,
                 paddingVertical: PsLayoutConfig.rowPaddingVertical,
-            }, testID: 'ps-list-select-row', children: [_jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'small', children: subtitle }))] }), valueAccessory, _jsx(PsText, { numberOfLines: 1, style: { maxWidth: PsLayoutConfig.rowValueMaxWidth }, tone: 'muted', children: PsSelectService.selectedLabel(options, value) }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Sort, size: PsMobileControlConfig.iconSizeInline })] })) }));
+            }), testID: 'ps-list-select-row', children: [_jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'small', children: subtitle }))] }), valueAccessory, _jsx(PsText, { numberOfLines: 1, style: { maxWidth: PsLayoutConfig.rowValueMaxWidth }, tone: 'muted', children: PsSelectService.selectedLabel(options, value) }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Sort, size: PsMobileControlConfig.iconSizeInline })] })) }));
 };

package/dist/components/ps-menu-popup/ps-menu-popup-divider.js

@@ -1,7 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMenuPopupStyleService } from '../../services/ps-menu-popup-style-service';
 export const PsMenuPopupDivider = () => {
-    const theme = usePsMobileTheme();
-    return _jsx(View, { style: { backgroundColor: theme.line, height: 1 } });
+    const divider = PsMenuPopupStyleService.divider(usePsMobileTheme(), usePsMaterialScheme(), PsMenuPopupStyleService.isMaterial());
+    return (_jsx(View, { style: {
+            backgroundColor: divider.backgroundColor,
+            height: 1,
+            marginVertical: divider.marginVertical,
+        } }));
 };

package/dist/components/ps-menu-popup/ps-menu-popup-row.js

@@ -3,20 +3,32 @@ import { PsIconKey } from '@pallasoft/ps-icons';
 import { Pressable, View } from 'react-native';
 import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMenuPopupStyleService } from '../../services/ps-menu-popup-style-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
 export const PsMenuPopupRow = ({ iconKey, isChecked = false, isDanger = false, isDisabled = false, isWarning = false, label, onPress, subtitle, }) => {
     const theme = usePsMobileTheme();
+    const scheme = usePsMaterialScheme();
+    const isMaterial = PsMenuPopupStyleService.isMaterial();
     const tint = isDanger ? theme.danger : theme.ink;
-    return (_jsxs(Pressable, { accessibilityRole: 'menuitem', accessibilityState: { disabled: isDisabled, selected: isChecked }, disabled: isDisabled, onPress: onPress, style: ({ pressed }) => ({
-            alignItems: 'center',
-            backgroundColor: pressed ? theme.primarySoft : 'transparent',
-            flexDirection: 'row',
-            gap: PsMobileControlConfig.rowSpacing,
-            minHeight: PsMenuPopupConfig.rowHeight,
-            opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
-            paddingHorizontal: PsMenuPopupConfig.rowPaddingHorizontal,
-        }), children: [iconKey === undefined ? null : _jsx(PsIcon, { color: tint, iconKey: iconKey }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { numberOfLines: 1, tone: isDanger ? 'danger' : 'ink', weight: isChecked ? 'semibold' : 'regular', children: label }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: isWarning ? 'warning' : 'muted', variant: 'small', children: subtitle }))] }), isChecked ? _jsx(PsIcon, { color: theme.primaryText, iconKey: PsIconKey.Check }) : null] }));
+    return (_jsxs(Pressable, { accessibilityRole: 'menuitem', accessibilityState: { disabled: isDisabled, selected: isChecked }, android_ripple: PsRippleService.resolve(theme, isDanger ? PsRippleKind.Danger : PsRippleKind.Surface), disabled: isDisabled, onPress: onPress, style: ({ pressed }) => {
+            const row = PsMenuPopupStyleService.row(theme, scheme, isMaterial, isChecked, pressed);
+            return {
+                alignItems: 'center',
+                backgroundColor: row.backgroundColor,
+                borderRadius: row.borderRadius,
+                flexDirection: 'row',
+                gap: PsMobileControlConfig.rowSpacing,
+                marginHorizontal: row.marginHorizontal,
+                minHeight: PsMenuPopupConfig.rowHeight,
+                opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
+                overflow: 'hidden',
+                paddingHorizontal: row.paddingHorizontal,
+            };
+        }, children: [iconKey === undefined ? null : _jsx(PsIcon, { color: tint, iconKey: iconKey }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { numberOfLines: 1, tone: isDanger ? 'danger' : 'ink', weight: PsMenuPopupStyleService.labelWeight(isMaterial, isChecked), children: label }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: isWarning ? 'warning' : 'muted', variant: 'small', children: subtitle }))] }), isChecked ? _jsx(PsIcon, { color: theme.primaryText, iconKey: PsIconKey.Check }) : null] }));
 };

package/dist/components/ps-menu-popup/ps-menu-popup.js

@@ -1,35 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Modal, Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { Modal, Pressable, ScrollView, StyleSheet, useWindowDimensions } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
+import { usePsMenuPopupReveal } from '../../hooks/use-ps-menu-popup-reveal';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsMenuPopupService } from '../../services/ps-menu-popup-service';
+import { PsMenuPopupStyleService } from '../../services/ps-menu-popup-style-service';
 export const PsMenuPopup = ({ anchor, children, isFullWidth = false, onClose, }) => {
     const theme = usePsMobileTheme();
+    const scheme = usePsMaterialScheme();
     const window = useWindowDimensions();
+    const isMaterial = PsMenuPopupStyleService.isMaterial();
     const [size, setSize] = useState(undefined);
     const layout = size === undefined
         ? undefined
         : PsMenuPopupService.layout(anchor, window, size.height, size.width, isFullWidth);
-    return (_jsxs(Modal, { animationType: 'fade', navigationBarTranslucent: true, onRequestClose: onClose, statusBarTranslucent: true, transparent: true, visible: true, children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: onClose, style: StyleSheet.absoluteFill, testID: 'ps-menu-popup-backdrop' }), _jsx(View, { onLayout: (event) => {
+    const container = PsMenuPopupStyleService.container(theme, scheme, isMaterial);
+    const reveal = usePsMenuPopupReveal(layout !== undefined, layout === undefined || layout.isBelow, isMaterial);
+    return (_jsxs(Modal, { animationType: isMaterial ? 'none' : 'fade', navigationBarTranslucent: true, onRequestClose: onClose, statusBarTranslucent: true, transparent: true, visible: true, children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: onClose, style: StyleSheet.absoluteFill, testID: 'ps-menu-popup-backdrop' }), _jsx(Animated.View, { onLayout: (event) => {
                     if (size === undefined)
                         setSize({
                             height: event.nativeEvent.layout.height,
                             width: event.nativeEvent.layout.width,
                         });
-                }, pointerEvents: layout === undefined ? 'none' : 'auto', style: {
-                    backgroundColor: theme.surface,
-                    borderColor: theme.line,
-                    borderRadius: PsMenuPopupConfig.radius,
-                    borderWidth: 1,
-                    left: layout === undefined ? 0 : layout.left,
-                    maxHeight: layout === undefined ? undefined : layout.maxHeight,
-                    maxWidth: PsMenuPopupConfig.maxWidth,
-                    minWidth: isFullWidth ? undefined : PsMenuPopupConfig.minWidth,
-                    opacity: layout === undefined ? 0 : 1,
-                    overflow: 'hidden',
-                    position: 'absolute',
-                    top: layout === undefined ? 0 : layout.top,
-                    width: layout === undefined ? undefined : layout.width,
-                }, testID: 'ps-menu-popup', children: _jsx(ScrollView, { bounces: false, contentContainerStyle: { paddingVertical: PsMenuPopupConfig.paddingVertical }, children: children }) })] }));
+                }, pointerEvents: layout === undefined ? 'none' : 'auto', style: [
+                    {
+                        backgroundColor: container.backgroundColor,
+                        borderColor: container.borderColor,
+                        borderRadius: container.borderRadius,
+                        borderWidth: container.borderWidth,
+                        elevation: container.elevation,
+                        left: layout === undefined ? 0 : layout.left,
+                        maxHeight: layout === undefined ? undefined : layout.maxHeight,
+                        maxWidth: PsMenuPopupConfig.maxWidth,
+                        minWidth: isFullWidth ? undefined : PsMenuPopupConfig.minWidth,
+                        overflow: 'hidden',
+                        position: 'absolute',
+                        top: layout === undefined ? 0 : layout.top,
+                        width: layout === undefined ? undefined : layout.width,
+                    },
+                    reveal,
+                ], testID: 'ps-menu-popup', children: _jsx(ScrollView, { bounces: false, contentContainerStyle: { paddingVertical: container.paddingVertical }, children: children }) })] }));
 };

package/dist/constants/ps-infinite-config.d.ts

@@ -0,0 +1,6 @@
+export declare const PsInfiniteConfig: {
+    readonly endReachedThreshold: 1.5;
+    readonly initialNumToRender: 12;
+    readonly maxToRenderPerBatch: 12;
+    readonly windowSize: 9;
+};

package/dist/constants/ps-infinite-config.js

@@ -0,0 +1,6 @@
+export const PsInfiniteConfig = {
+    endReachedThreshold: 1.5,
+    initialNumToRender: 12,
+    maxToRenderPerBatch: 12,
+    windowSize: 9,
+};

package/dist/constants/ps-material-menu-config.d.ts

@@ -0,0 +1,12 @@
+export declare const PsMaterialMenuConfig: {
+    readonly dividerInset: 8;
+    readonly elevation: 3;
+    readonly enterEasing: readonly [0.05, 0.7, 0.1, 1];
+    readonly enterDurationMs: 150;
+    readonly enterScale: 0.8;
+    readonly itemInset: 4;
+    readonly itemRadius: 12;
+    readonly paddingVertical: 4;
+    readonly radius: 16;
+    readonly rowPaddingHorizontal: 12;
+};

package/dist/constants/ps-material-menu-config.js

@@ -0,0 +1,12 @@
+export const PsMaterialMenuConfig = {
+    dividerInset: 8,
+    elevation: 3,
+    enterEasing: [0.05, 0.7, 0.1, 1],
+    enterDurationMs: 150,
+    enterScale: 0.8,
+    itemInset: 4,
+    itemRadius: 12,
+    paddingVertical: 4,
+    radius: 16,
+    rowPaddingHorizontal: 12,
+};

package/dist/constants/ps-scan-format.d.ts

@@ -0,0 +1,4 @@
+export declare enum PsScanFormat {
+    Pdf = "pdf",
+    Png = "png"
+}

package/dist/constants/ps-scan-format.js

@@ -0,0 +1,5 @@
+export var PsScanFormat;
+(function (PsScanFormat) {
+    PsScanFormat["Pdf"] = "pdf";
+    PsScanFormat["Png"] = "png";
+})(PsScanFormat || (PsScanFormat = {}));

package/dist/constants/ps-scan-output-config.d.ts

@@ -0,0 +1,17 @@
+import { PsScanFormat } from './ps-scan-format';
+export declare const PsScanOutputConfig: {
+    readonly extensions: Record<PsScanFormat, string>;
+    readonly jpegMarkerPrefix: 255;
+    readonly jpegSizeMarkers: readonly [192, 193, 194, 195, 197, 198, 199, 201, 202, 203, 205, 206, 207];
+    readonly jpegStartMarker: 216;
+    readonly jpegSegmentHeaderLength: 2;
+    readonly jpegSizeOffset: 3;
+    readonly pdfBinaryComment: readonly [37, 226, 227, 207, 211, 10];
+    readonly pdfLongEdgePoints: 842;
+    readonly pdfObjectsPerPage: 3;
+    readonly pdfPageObjectBase: 3;
+    readonly pdfType: "application/pdf";
+    readonly pngType: "image/png";
+    readonly promptDelayMs: 400;
+    readonly types: Record<PsScanFormat, string>;
+};

package/dist/constants/ps-scan-output-config.js

@@ -0,0 +1,23 @@
+import { PsScanFormat } from './ps-scan-format';
+export const PsScanOutputConfig = {
+    extensions: {
+        [PsScanFormat.Pdf]: 'pdf',
+        [PsScanFormat.Png]: 'png',
+    },
+    jpegMarkerPrefix: 0xff,
+    jpegSizeMarkers: [0xc0, 0xc1, 0xc2, 0xc3, 0xc5, 0xc6, 0xc7, 0xc9, 0xca, 0xcb, 0xcd, 0xce, 0xcf],
+    jpegStartMarker: 0xd8,
+    jpegSegmentHeaderLength: 2,
+    jpegSizeOffset: 3,
+    pdfBinaryComment: [0x25, 0xe2, 0xe3, 0xcf, 0xd3, 0x0a],
+    pdfLongEdgePoints: 842,
+    pdfObjectsPerPage: 3,
+    pdfPageObjectBase: 3,
+    pdfType: 'application/pdf',
+    pngType: 'image/png',
+    promptDelayMs: 400,
+    types: {
+        [PsScanFormat.Pdf]: 'application/pdf',
+        [PsScanFormat.Png]: 'image/png',
+    },
+};

package/dist/hooks/use-ps-document-scanner.js

@@ -3,12 +3,13 @@ import { PsDocumentScannerService } from '../services/ps-document-scanner-servic
 export const usePsDocumentScanner = (defaults = {}) => {
     const [isScanning, setIsScanning] = useState(false);
     const isAvailable = useMemo(() => PsDocumentScannerService.isAvailable(), []);
-    const { fileName, jpegQuality, maxPages } = defaults;
+    const { fileName, formatLabels, jpegQuality, maxPages } = defaults;
     const scan = useCallback(async (options = {}) => {
         setIsScanning(true);
         try {
             return await PsDocumentScannerService.scan({
                 fileName: options.fileName === undefined ? fileName : options.fileName,
+                formatLabels: options.formatLabels === undefined ? formatLabels : options.formatLabels,
                 jpegQuality: options.jpegQuality === undefined ? jpegQuality : options.jpegQuality,
                 maxPages: options.maxPages === undefined ? maxPages : options.maxPages,
             });
@@ -16,6 +17,6 @@ export const usePsDocumentScanner = (defaults = {}) => {
         finally {
             setIsScanning(false);
         }
-    }, [fileName, jpegQuality, maxPages]);
+    }, [fileName, formatLabels, jpegQuality, maxPages]);
     return { isAvailable, isScanning, scan };
 };

package/dist/hooks/use-ps-infinite-data.d.ts

@@ -0,0 +1,3 @@
+import type { PsInfiniteDataOptions } from '../interfaces/ps-infinite-data-options';
+import type { PsInfiniteDataResult } from '../interfaces/ps-infinite-data-result';
+export declare const usePsInfiniteData: <T>({ getKey, isEnabled, key, loadPage, onSettled, onWriteFailed, refreshKey, }: PsInfiniteDataOptions<T>) => PsInfiniteDataResult<T>;

package/dist/hooks/use-ps-infinite-data.js

@@ -0,0 +1,192 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { usePsChangeQueue, usePsOptimisticRows } from '@pallasoft/ps-utilities/react';
+import { PsInfiniteDataService } from '../services/ps-infinite-data-service';
+export const usePsInfiniteData = ({ getKey, isEnabled = true, key, loadPage, onSettled, onWriteFailed, refreshKey, }) => {
+    const [state, setState] = useState(() => PsInfiniteDataService.initial());
+    const [isSaving, setIsSaving] = useState(false);
+    const isSavingRef = useRef(false);
+    const submittedRef = useRef(0);
+    const stateRef = useRef(state);
+    const committedRef = useRef([]);
+    const versionRef = useRef(0);
+    const latestRef = useRef({ getKey, loadPage, onSettled, onWriteFailed });
+    useEffect(() => {
+        latestRef.current = { getKey, loadPage, onSettled, onWriteFailed };
+    });
+    const commit = useCallback((next) => {
+        stateRef.current = next(stateRef.current);
+        setState(stateRef.current);
+    }, []);
+    const setSaving = useCallback((value) => {
+        isSavingRef.current = value;
+        setIsSaving(value);
+    }, []);
+    const fetchFirst = useCallback(async (isSilent) => {
+        versionRef.current += 1;
+        const version = versionRef.current;
+        if (!isSilent)
+            commit(() => PsInfiniteDataService.initial());
+        try {
+            const page = await latestRef.current.loadPage(null);
+            if (version !== versionRef.current)
+                return;
+            commit(() => ({
+                error: false,
+                isLoading: false,
+                isLoadingMore: false,
+                items: page.items,
+                nextCursor: page.nextCursor,
+                pages: 1,
+            }));
+        }
+        catch {
+            if (version !== versionRef.current)
+                return;
+            commit((current) => ({ ...current, error: true, isLoading: false, isLoadingMore: false }));
+        }
+    }, [commit]);
+    const reloadLoaded = useCallback(async () => {
+        versionRef.current += 1;
+        const version = versionRef.current;
+        const target = Math.max(stateRef.current.pages, 1);
+        try {
+            let items = [];
+            let cursor = null;
+            let pages = 0;
+            while (pages < target) {
+                const page = await latestRef.current.loadPage(cursor);
+                if (version !== versionRef.current)
+                    return;
+                items = PsInfiniteDataService.merge(items, page.items, latestRef.current.getKey);
+                cursor = page.nextCursor;
+                pages += 1;
+                if (cursor === null)
+                    break;
+            }
+            commit(() => ({
+                error: false,
+                isLoading: false,
+                isLoadingMore: false,
+                items,
+                nextCursor: cursor,
+                pages,
+            }));
+        }
+        catch {
+            if (version !== versionRef.current)
+                return;
+            commit((current) => ({ ...current, error: true }));
+        }
+    }, [commit]);
+    useEffect(() => {
+        committedRef.current = [];
+        setSaving(false);
+        if (!isEnabled) {
+            versionRef.current += 1;
+            commit(() => PsInfiniteDataService.initial());
+            return undefined;
+        }
+        void fetchFirst(false);
+        return () => {
+            versionRef.current += 1;
+        };
+    }, [key, isEnabled, fetchFirst, commit, setSaving]);
+    const refreshRef = useRef(refreshKey);
+    useEffect(() => {
+        if (refreshRef.current === refreshKey)
+            return;
+        refreshRef.current = refreshKey;
+        if (isEnabled && !isSavingRef.current && !stateRef.current.isLoading)
+            void reloadLoaded();
+    }, [isEnabled, refreshKey, reloadLoaded]);
+    const loadMore = useCallback(async () => {
+        const current = stateRef.current;
+        if (current.isLoading || current.isLoadingMore || current.nextCursor === null)
+            return;
+        const version = versionRef.current;
+        const cursor = current.nextCursor;
+        commit((value) => ({ ...value, isLoadingMore: true }));
+        try {
+            const page = await latestRef.current.loadPage(cursor);
+            if (version !== versionRef.current)
+                return;
+            commit((value) => ({
+                ...value,
+                error: false,
+                isLoadingMore: false,
+                items: PsInfiniteDataService.merge(value.items, page.items, latestRef.current.getKey),
+                nextCursor: page.nextCursor,
+                pages: value.pages + 1,
+            }));
+        }
+        catch {
+            if (version !== versionRef.current)
+                return;
+            commit((value) => ({ ...value, error: true, isLoadingMore: false }));
+        }
+    }, [commit]);
+    const refresh = useCallback(() => fetchFirst(true), [fetchFirst]);
+    const apply = useCallback((rows, updates) => PsInfiniteDataService.apply(rows, updates), []);
+    const optimistic = usePsOptimisticRows({
+        apply,
+        isSaving,
+        rows: state.items,
+    });
+    const rememberRef = useRef(optimistic.remember);
+    useEffect(() => {
+        rememberRef.current = optimistic.remember;
+    });
+    const send = useCallback(async (writes) => {
+        for (const item of writes) {
+            await item.request();
+            committedRef.current = [...committedRef.current, item];
+            item.resolve(true);
+        }
+    }, []);
+    const onFailed = useCallback((failed, dropped) => {
+        for (const item of [...failed, ...dropped]) {
+            optimistic.forgetLast();
+            item.resolve(false);
+        }
+        if (latestRef.current.onWriteFailed !== undefined)
+            latestRef.current.onWriteFailed();
+    }, [optimistic.forgetLast]);
+    const onDrained = useCallback(() => {
+        const through = submittedRef.current;
+        const settled = committedRef.current;
+        committedRef.current = [];
+        void (async () => {
+            const settle = latestRef.current.onSettled;
+            if (settle !== undefined)
+                await settle().catch(() => undefined);
+            if (settled.length > 0)
+                commit((current) => ({
+                    ...current,
+                    items: PsInfiniteDataService.apply(current.items, settled.map((item) => item.update)),
+                }));
+            if (submittedRef.current === through)
+                setSaving(false);
+        })();
+    }, [commit, setSaving]);
+    const queue = usePsChangeQueue({ onDrained, onFailed, send });
+    const { enqueue } = queue;
+    const write = useCallback((update, request) => {
+        if (stateRef.current.isLoading)
+            return Promise.resolve(false);
+        submittedRef.current += 1;
+        setSaving(true);
+        rememberRef.current(update);
+        return new Promise((resolve) => enqueue({ request, resolve, update }));
+    }, [enqueue, setSaving]);
+    return useMemo(() => ({
+        committedItems: state.items,
+        error: state.error,
+        hasMore: PsInfiniteDataService.hasMore(state),
+        isLoading: state.isLoading,
+        isLoadingMore: state.isLoadingMore,
+        items: optimistic.rows,
+        loadMore,
+        refresh,
+        write,
+    }), [loadMore, optimistic.rows, refresh, state, write]);
+};

package/dist/hooks/use-ps-menu-popup-reveal.d.ts

@@ -0,0 +1,3 @@
+import type { ViewStyle } from 'react-native';
+import { type AnimatedStyle } from 'react-native-reanimated';
+export declare const usePsMenuPopupReveal: (isPlaced: boolean, isBelow: boolean, isMaterial: boolean) => AnimatedStyle<ViewStyle>;

package/dist/hooks/use-ps-menu-popup-reveal.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { Easing, interpolate, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { PsMaterialMenuConfig } from '../constants/ps-material-menu-config';
+import { usePsMobileTheme } from './use-ps-mobile-theme';
+export const usePsMenuPopupReveal = (isPlaced, isBelow, isMaterial) => {
+    const { isReduceMotion } = usePsMobileTheme();
+    const isInstant = isReduceMotion || !isMaterial;
+    const progress = useSharedValue(isInstant ? 1 : 0);
+    useEffect(() => {
+        if (!isPlaced)
+            return;
+        if (isInstant) {
+            progress.set(1);
+            return;
+        }
+        progress.set(withTiming(1, {
+            duration: PsMaterialMenuConfig.enterDurationMs,
+            easing: Easing.bezier(...PsMaterialMenuConfig.enterEasing),
+        }));
+    }, [isInstant, isPlaced, progress]);
+    return useAnimatedStyle(() => ({
+        opacity: isPlaced ? progress.get() : 0,
+        transform: [
+            { scaleY: interpolate(progress.get(), [0, 1], [PsMaterialMenuConfig.enterScale, 1]) },
+        ],
+        transformOrigin: isBelow ? 'top' : 'bottom',
+    }));
+};