@pallasoft/ps-mobile-components 1.3.0 → 1.4.0

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

@@ -0,0 +1,4 @@
+export * from './ps-menu-popup';
+export * from './ps-menu-popup-divider';
+export * from './ps-menu-popup-header';
+export * from './ps-menu-popup-row';

package/dist/components/ps-menu-popup/ps-menu-popup-divider.d.ts

@@ -0,0 +1 @@
+export declare const PsMenuPopupDivider: () => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsMenuPopupDivider = () => {
+    const theme = usePsMobileTheme();
+    return _jsx(View, { style: { backgroundColor: theme.line, height: 1 } });
+};

package/dist/components/ps-menu-popup/ps-menu-popup-header.d.ts

@@ -0,0 +1,5 @@
+export interface PsMenuPopupHeaderProps {
+    subtitle?: string;
+    title: string;
+}
+export declare const PsMenuPopupHeader: ({ subtitle, title }: PsMenuPopupHeaderProps) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { PsText } from '../ps-text/ps-text';
+export const PsMenuPopupHeader = ({ subtitle, title }) => (_jsxs(View, { style: {
+        paddingHorizontal: PsMenuPopupConfig.rowPaddingHorizontal,
+        paddingVertical: PsMenuPopupConfig.paddingVertical,
+    }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }));

package/dist/components/ps-menu-popup/ps-menu-popup-row.d.ts

@@ -0,0 +1,12 @@
+import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+export interface PsMenuPopupRowProps {
+    iconKey?: PsMobileIconKey;
+    isChecked?: boolean;
+    isDanger?: boolean;
+    isDisabled?: boolean;
+    isWarning?: boolean;
+    label: string;
+    onPress: () => void;
+    subtitle?: string;
+}
+export declare const PsMenuPopupRow: ({ iconKey, isChecked, isDanger, isDisabled, isWarning, label, onPress, subtitle, }: PsMenuPopupRowProps) => import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+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 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] }));
+};

package/dist/components/ps-menu-popup/ps-menu-popup.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { PsMenuAnchor } from '../../interfaces/ps-menu-anchor';
+export interface PsMenuPopupProps {
+    anchor: PsMenuAnchor;
+    children: ReactNode;
+    isFullWidth?: boolean;
+    onClose: () => void;
+}
+export declare const PsMenuPopup: ({ anchor, children, isFullWidth, onClose, }: PsMenuPopupProps) => import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+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 { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMenuPopupService } from '../../services/ps-menu-popup-service';
+export const PsMenuPopup = ({ anchor, children, isFullWidth = false, onClose, }) => {
+    const theme = usePsMobileTheme();
+    const window = useWindowDimensions();
+    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) => {
+                    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 }) })] }));
+};

package/dist/components/ps-mobile-theme-provider/ps-mobile-theme-provider-props.d.ts

@@ -7,6 +7,7 @@ export interface PsMobileThemeProviderProps {
     children: ReactNode;
     colorScheme?: PsColorSchemeChoice;
     hasHaptics?: boolean;
+    isBrandChart?: boolean;
     isReduceMotion?: boolean;
     primaryColor?: string;
     primaryContrastColor?: string;

package/dist/components/ps-mobile-theme-provider/ps-mobile-theme-provider.d.ts

@@ -1,2 +1,2 @@
 import type { PsMobileThemeProviderProps } from './ps-mobile-theme-provider-props';
-export declare const PsMobileThemeProvider: ({ chartPalette, children, colorScheme, hasHaptics, isReduceMotion, primaryColor, primaryContrastColor, product, secondaryColor, }: PsMobileThemeProviderProps) => import("react").JSX.Element;
+export declare const PsMobileThemeProvider: ({ chartPalette, children, colorScheme, hasHaptics, isBrandChart, isReduceMotion, primaryColor, primaryContrastColor, product, secondaryColor, }: PsMobileThemeProviderProps) => import("react").JSX.Element;

package/dist/components/ps-mobile-theme-provider/ps-mobile-theme-provider.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { ThemeProvider } from 'expo-router';
 import { useColorScheme } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
 import { PsMobileThemeContext } from '../../contexts/ps-mobile-theme-context';
 import { PsMobileBrandService } from '../../services/ps-mobile-brand-service';
 import { PsMobileThemeService } from '../../services/ps-mobile-theme-service';
-export const PsMobileThemeProvider = ({ chartPalette, children, colorScheme, hasHaptics, isReduceMotion, primaryColor, primaryContrastColor, product, secondaryColor, }) => {
+import { PsNavigationThemeService } from '../../services/ps-navigation-theme-service';
+export const PsMobileThemeProvider = ({ chartPalette, children, colorScheme, hasHaptics, isBrandChart, isReduceMotion, primaryColor, primaryContrastColor, product, secondaryColor, }) => {
     const scheme = useColorScheme();
     const isSystemReduced = useReducedMotion();
     const isDark = colorScheme === undefined || colorScheme === 'system'
@@ -21,7 +23,9 @@ export const PsMobileThemeProvider = ({ chartPalette, children, colorScheme, has
         });
         return PsMobileThemeService.create({
             chart: chartPalette === undefined ? undefined : isDark ? chartPalette.dark : chartPalette.light,
+            hasBrandSecondary: secondaryColor !== undefined,
             hasHaptics,
+            isBrandChart,
             isDark,
             isReduceMotion: isReduced,
             primary: brand.primary,
@@ -31,6 +35,7 @@ export const PsMobileThemeProvider = ({ chartPalette, children, colorScheme, has
     }, [
         chartPalette,
         hasHaptics,
+        isBrandChart,
         isDark,
         isReduced,
         primaryColor,
@@ -38,5 +43,6 @@ export const PsMobileThemeProvider = ({ chartPalette, children, colorScheme, has
         product,
         secondaryColor,
     ]);
-    return _jsx(PsMobileThemeContext.Provider, { value: theme, children: children });
+    const navigation = useMemo(() => PsNavigationThemeService.from(theme), [theme]);
+    return (_jsx(PsMobileThemeContext.Provider, { value: theme, children: _jsx(ThemeProvider, { value: navigation, children: children }) }));
 };

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

@@ -3,17 +3,17 @@ import { PsIconKey } from '@pallasoft/ps-icons';
 import { Pressable } 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 { PsMobileColorService } from '../../services/ps-mobile-color-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 PsNativeMenuRow = ({ item, onSelect }) => {
     const theme = usePsMobileTheme();
-    return (_jsxs(Pressable, { accessibilityRole: 'menuitem', accessibilityState: { selected: item.isSelected }, onPress: () => onSelect(item.value), style: ({ pressed }) => ({
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'menuitem', accessibilityState: { selected: item.isSelected }, onPress: () => onSelect(item.value), style: ({ pressed }) => ({
             alignItems: 'center',
-            backgroundColor: pressed
-                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
-                : theme.surface,
+            backgroundColor: pressed ? PsStateService.pressedFill(theme, theme.surface) : theme.surface,
             flexDirection: 'row',
             gap: PsMobileControlConfig.rowSpacing,
             minHeight: PsLayoutConfig.rowMinHeight,

package/dist/components/ps-native-menu/ps-native-menu.android.js

@@ -1,29 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { DropdownMenu, DropdownMenuItem, RNHostView, Text } from '@expo/ui/jetpack-compose';
-import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';
-import { PsNativeMenuConfig } from '../../constants/ps-native-menu-config';
+import { View } from 'react-native';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
-import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
-import { PsHostScope } from '../ps-host-scope/ps-host-scope';
+import { usePsMenuAnchor } from '../../hooks/use-ps-menu-anchor';
+import { PsMenuPopup } from '../ps-menu-popup/ps-menu-popup';
+import { PsMenuPopupRow } from '../ps-menu-popup/ps-menu-popup-row';
 export const PsNativeMenu = ({ children, isDisabled = false, isFullWidth = false, items, onSelect, }) => {
     const haptic = usePsHaptics();
-    const theme = usePsMobileTheme();
-    const [isOpen, setIsOpen] = useState(false);
-    const matchContents = isFullWidth ? { vertical: true } : true;
-    return (_jsx(PsHostScope, { matchContents: matchContents, children: _jsxs(DropdownMenu, { color: theme.surface, expanded: isOpen, modifiers: isFullWidth ? [fillMaxWidth()] : [], onDismissRequest: () => setIsOpen(false), children: [_jsx(DropdownMenu.Items, { children: items.map((item) => (_jsx(DropdownMenuItem, { elementColors: { textColor: item.isSelected ? theme.primaryText : theme.ink }, onClick: () => {
-                            setIsOpen(false);
-                            haptic('selection');
-                            onSelect(item.value);
-                        }, children: _jsx(DropdownMenuItem.Text, { children: _jsx(Text, { style: {
-                                    fontWeight: item.isSelected
-                                        ? PsNativeMenuConfig.selectedWeight
-                                        : PsNativeMenuConfig.unselectedWeight,
-                                }, children: item.label }) }) }, item.value))) }), _jsx(DropdownMenu.Trigger, { children: _jsx(RNHostView, { matchContents: matchContents, children: children({
-                            isOpen,
-                            open: () => {
-                                if (!isDisabled)
-                                    setIsOpen(true);
-                            },
-                        }) }) })] }) }));
+    const menu = usePsMenuAnchor();
+    return (_jsxs(View, { collapsable: false, ref: menu.ref, children: [children({
+                isOpen: menu.anchor !== undefined,
+                open: () => {
+                    if (!isDisabled)
+                        menu.open();
+                },
+            }), menu.anchor === undefined ? null : (_jsx(PsMenuPopup, { anchor: menu.anchor, isFullWidth: isFullWidth, onClose: menu.close, children: items.map((item) => (_jsx(PsMenuPopupRow, { isChecked: item.isSelected, label: item.label, onPress: () => {
+                        menu.close();
+                        haptic('selection');
+                        onSelect(item.value);
+                    } }, item.value))) }))] }));
 };

package/dist/components/ps-option-picker/ps-option-picker.js

@@ -3,9 +3,11 @@ import { useMemo, useState } from 'react';
 import { PsIconKey } from '@pallasoft/ps-icons';
 import { Pressable, View } from 'react-native';
 import { PsOptionPickerConfig } from '../../constants/ps-option-picker-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsOptionPickerService } from '../../services/ps-option-picker-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsCard } from '../ps-card/ps-card';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsSearchField } from '../ps-search-field/ps-search-field';
@@ -19,7 +21,7 @@ export const PsOptionPicker = ({ emptyLabel, limit = PsOptionPickerConfig.defaul
                     setSearch(next);
                     if (onSearchChange !== undefined)
                         onSearchChange(next);
-                }, placeholder: searchPlaceholder, value: search }), result.options.length === 0 ? (_jsx(PsText, { tone: 'muted', children: emptyLabel })) : (_jsx(PsCard, { padding: 'none', children: result.options.map((option, index) => (_jsxs(Pressable, { accessibilityRole: 'button', accessibilityState: { selected: option.value === selectedValue }, onPress: () => {
+                }, placeholder: searchPlaceholder, value: search }), result.options.length === 0 ? (_jsx(PsText, { tone: 'muted', children: emptyLabel })) : (_jsx(PsCard, { padding: 'none', children: result.options.map((option, index) => (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'button', accessibilityState: { selected: option.value === selectedValue }, onPress: () => {
                         haptic('selection');
                         onSelect(option.value);
                     }, style: {

package/dist/components/ps-page-header/ps-page-header.js

@@ -4,10 +4,12 @@ import { Pressable, View } from 'react-native';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
 import { PsPageHeaderConfig } from '../../constants/ps-page-header-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
 import { PsPageHeaderContext } from '../../contexts/ps-page-header-context';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsPageHeaderService } from '../../services/ps-page-header-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
 import { PsText } from '../ps-text/ps-text';
@@ -23,7 +25,7 @@ export const PsPageHeader = ({ actions, isLoading = false, leading, onTitlePress
                     gap: PsLayoutConfig.headerGap,
                     minWidth: 0,
                     paddingTop: layout.titleOffset,
-                }, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(PsSkeleton, { height: PsPageHeaderConfig.skeletonTitleHeight, shape: PsSkeletonShape.Line, width: PsPageHeaderConfig.skeletonTitleWidth }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsPageHeaderConfig.skeletonSubtitleWidth })] })) : (_jsxs(_Fragment, { children: [onTitlePress === undefined ? (_jsx(PsText, { accessibilityRole: 'header', numberOfLines: 1, variant: 'title', children: title })) : (_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: 'button', onPress: onTitlePress, style: {
+                }, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(PsSkeleton, { height: PsPageHeaderConfig.skeletonTitleHeight, shape: PsSkeletonShape.Line, width: PsPageHeaderConfig.skeletonTitleWidth }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsPageHeaderConfig.skeletonSubtitleWidth })] })) : (_jsxs(_Fragment, { children: [onTitlePress === undefined ? (_jsx(PsText, { accessibilityRole: 'header', numberOfLines: 1, variant: 'title', children: title })) : (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityLabel: title, accessibilityRole: 'button', onPress: onTitlePress, style: {
                                 alignItems: 'center',
                                 flexDirection: 'row',
                                 gap: PsPageHeaderConfig.actionGap,

package/dist/components/ps-pallasoft-sign-in-button/ps-pallasoft-sign-in-button.js

@@ -2,13 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftControlMetric } from '@pallasoft/ps-design-system';
 import { Pressable } from 'react-native';
 import { PsMotionConfig } from '../../constants/ps-motion-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsSignInSurfaceService } from '../../services/ps-sign-in-surface-service';
 import { PsPallasoftSignInContent } from './ps-pallasoft-sign-in-content';
 export const PsPallasoftSignInButton = ({ children, isLoading = false, onPress, size = 'default', }) => {
     const theme = usePsMobileTheme();
     const surface = PsSignInSurfaceService.resolve(theme, size);
-    return (_jsx(Pressable, { accessibilityRole: 'button', accessibilityState: { busy: isLoading, disabled: isLoading }, disabled: isLoading, onPress: onPress, style: ({ pressed }) => ({
+    return (_jsx(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'button', accessibilityState: { busy: isLoading, disabled: isLoading }, disabled: isLoading, onPress: onPress, style: ({ pressed }) => ({
             alignItems: 'center',
             alignSelf: 'stretch',
             backgroundColor: surface.backgroundColor,

package/dist/components/ps-screen/ps-screen.js

@@ -2,18 +2,23 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Platform, RefreshControl, ScrollView, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 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 { PsScreenService } from '../../services/ps-screen-service';
 export const PsScreen = ({ children, gap = PsLayoutConfig.listGap, hasGutter = true, header, onRefresh, style, }) => {
     const theme = usePsMobileTheme();
     const insets = useSafeAreaInsets();
+    const topInset = usePsTopInset();
+    const { hasTabBar, isHidden: isTabBarHidden } = usePsTabBar();
     const { isRefreshing, refresh } = usePsRefresh(onRefresh);
     const host = usePsScrollHost();
-    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(ScrollView, { contentContainerStyle: PsScreenService.content(insets, Platform.OS === 'ios', hasGutter, gap), contentInsetAdjustmentBehavior: 'automatic', keyboardDismissMode: 'interactive', onContentSizeChange: host.onContentSizeChange, onLayout: host.onLayout, onScroll: host.onScroll, keyboardShouldPersistTaps: 'handled', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primary], onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), ref: host.scrollRef, scrollEnabled: !host.isLocked, scrollEventThrottle: PsLayoutConfig.scrollEventThrottle, showsVerticalScrollIndicator: false, style: [{ backgroundColor: theme.background, flex: 1 }, style], testID: 'ps-screen', children: _jsxs(PsScrollContext, { value: host.context, children: [header, children] }) }), header === undefined ? null : (_jsx(View, { pointerEvents: 'none', style: [
-                    PsScreenService.statusBarScrim(insets.top),
-                    { backgroundColor: theme.background },
-                ], testID: 'ps-screen-status-bar-scrim' }))] }));
+    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(ScrollView, { contentContainerStyle: PsScreenService.content({
+                    bottom: PsScreenService.bottomInset(insets.bottom, hasTabBar, isTabBarHidden),
+                    top: topInset,
+                }, Platform.OS === 'ios', hasGutter, gap, isTabBarHidden ? PsSelectionBarConfig.height : 0), contentInsetAdjustmentBehavior: 'automatic', keyboardDismissMode: 'interactive', onContentSizeChange: host.onContentSizeChange, onLayout: host.onLayout, onScroll: host.onScroll, keyboardShouldPersistTaps: 'handled', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], progressBackgroundColor: theme.surface, onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), ref: host.scrollRef, scrollEnabled: !host.isLocked, scrollEventThrottle: PsLayoutConfig.scrollEventThrottle, showsVerticalScrollIndicator: false, style: [{ backgroundColor: theme.background, flex: 1 }, style], testID: 'ps-screen', children: _jsxs(PsScrollContext, { value: host.context, children: [header, children] }) }), header === undefined ? null : (_jsx(View, { pointerEvents: 'none', style: [PsScreenService.statusBarScrim(topInset), { backgroundColor: theme.background }], testID: 'ps-screen-status-bar-scrim' }))] }));
 };

package/dist/components/ps-search-field/ps-search-field.js

@@ -3,10 +3,12 @@ import { PsIconKey } from '@pallasoft/ps-icons';
 import { Pressable, TextInput, 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 { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
 import { usePsFocus } from '../../hooks/use-ps-focus';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsControlStyleService } from '../../services/ps-control-style-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
 export const PsSearchField = ({ clearLabel, isLoading = false, onChange, placeholder, value, }) => {
@@ -21,5 +23,5 @@ export const PsSearchField = ({ clearLabel, isLoading = false, onChange, placeho
                 isFocused: focus.isFocused,
             }),
             { gap: PsMobileControlConfig.buttonIconSpacing },
-        ], children: [_jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Search, size: PsMobileControlConfig.iconSizeInline }), _jsx(TextInput, { accessibilityLabel: placeholder, autoCorrect: false, onBlur: focus.onBlur, onChangeText: onChange, onFocus: focus.onFocus, placeholder: placeholder, placeholderTextColor: theme.muted, returnKeyType: 'search', selectionColor: theme.primary, style: PsControlStyleService.input(theme), value: value }), value === '' ? null : (_jsx(Pressable, { accessibilityLabel: clearLabel, accessibilityRole: 'button', hitSlop: PsLayoutConfig.hitSlop, onPress: () => onChange(''), children: _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Close, size: PsMobileControlConfig.iconSizeInline }) }))] }));
+        ], children: [_jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Search, size: PsMobileControlConfig.iconSizeInline }), _jsx(TextInput, { accessibilityLabel: placeholder, autoCorrect: false, onBlur: focus.onBlur, onChangeText: onChange, onFocus: focus.onFocus, placeholder: placeholder, placeholderTextColor: theme.muted, returnKeyType: 'search', selectionColor: theme.primary, style: PsControlStyleService.input(theme), value: value }), value === '' ? null : (_jsx(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Borderless), accessibilityLabel: clearLabel, accessibilityRole: 'button', hitSlop: PsLayoutConfig.hitSlop, onPress: () => onChange(''), children: _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Close, size: PsMobileControlConfig.iconSizeInline }) }))] }));
 };

package/dist/components/ps-segmented-control/ps-segmented-control.android.js

@@ -3,23 +3,18 @@ import { SegmentedButton, SingleChoiceSegmentedButtonRow, Text } from '@expo/ui/
 import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';
 import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
-import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
+import { PsMaterialControlService } from '../../services/ps-material-control-service';
 import { PsHostScope } from '../ps-host-scope/ps-host-scope';
 import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
 export const PsSegmentedControl = ({ getItemKey, getItemLabel, isLoading = false, items, onSelectionChange, selectedKey, }) => {
     const haptic = usePsHaptics();
-    const theme = usePsMobileTheme();
+    const colors = PsMaterialControlService.segmentedColors(usePsMaterialScheme());
     if (isLoading)
         return _jsx(PsSkeleton, { shape: PsSkeletonShape.Control });
     return (_jsx(PsHostScope, { matchContents: { vertical: true }, children: _jsx(SingleChoiceSegmentedButtonRow, { modifiers: [fillMaxWidth()], children: items.map((item) => {
                 const key = getItemKey(item);
-                return (_jsx(SegmentedButton, { colors: {
-                        activeBorderColor: theme.primary,
-                        activeContainerColor: theme.primarySoft,
-                        activeContentColor: theme.ink,
-                        inactiveBorderColor: theme.line,
-                        inactiveContentColor: theme.muted,
-                    }, onClick: () => {
+                return (_jsx(SegmentedButton, { colors: colors, onClick: () => {
                         haptic('selection');
                         onSelectionChange(key);
                     }, selected: key === selectedKey, children: _jsx(SegmentedButton.Label, { children: _jsx(Text, { children: getItemLabel(item) }) }) }, key));

package/dist/components/ps-selection-mode/ps-selection-bar.d.ts

@@ -0,0 +1,9 @@
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsSelectionBarProps {
+    actions: PsMenuItem[];
+    isAllSelected: boolean;
+    deselectAllLabel: string;
+    onSelectAll: () => void;
+    selectAllLabel: string;
+}
+export declare const PsSelectionBar: ({ actions, deselectAllLabel, isAllSelected, onSelectAll, selectAllLabel, }: PsSelectionBarProps) => import("react").JSX.Element;

package/dist/components/ps-selection-mode/ps-selection-bar.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsSelectionBarConfig } from '../../constants/ps-selection-bar-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsText } from '../ps-text/ps-text';
+export const PsSelectionBar = ({ actions, deselectAllLabel, isAllSelected, onSelectAll, selectAllLabel, }) => {
+    const theme = usePsMobileTheme();
+    const haptic = usePsHaptics();
+    const insets = useSafeAreaInsets();
+    return (_jsx(View, { style: {
+            backgroundColor: theme.surface,
+            borderTopColor: theme.line,
+            borderTopWidth: 1,
+            bottom: 0,
+            flexDirection: 'row',
+            left: 0,
+            paddingBottom: insets.bottom,
+            position: 'absolute',
+            right: 0,
+        }, testID: 'ps-selection-bar', children: _jsxs(View, { style: {
+                alignItems: 'center',
+                flex: 1,
+                flexDirection: 'row',
+                height: PsSelectionBarConfig.height,
+                justifyContent: 'space-between',
+                paddingHorizontal: PsSelectionBarConfig.paddingHorizontal,
+            }, children: [_jsx(Pressable, { accessibilityRole: 'button', onPress: () => {
+                        haptic('selection');
+                        onSelectAll();
+                    }, style: ({ pressed }) => ({
+                        backgroundColor: pressed ? theme.primarySoft : 'transparent',
+                        borderRadius: PsSelectionBarConfig.paddingHorizontal,
+                        justifyContent: 'center',
+                        minHeight: PsSelectionBarConfig.height,
+                        paddingHorizontal: PsSelectionBarConfig.paddingHorizontal,
+                    }), children: _jsx(PsText, { tone: 'primary', weight: 'semibold', children: isAllSelected ? deselectAllLabel : selectAllLabel }) }), actions.map((item) => (_jsx(Pressable, { accessibilityRole: 'button', accessibilityState: { disabled: item.isDisabled === true }, disabled: item.isDisabled === true, onPress: () => {
+                        haptic('medium');
+                        item.onSelect();
+                    }, style: ({ pressed }) => ({
+                        backgroundColor: pressed ? theme.primarySoft : 'transparent',
+                        borderRadius: PsSelectionBarConfig.paddingHorizontal,
+                        justifyContent: 'center',
+                        minHeight: PsSelectionBarConfig.height,
+                        opacity: item.isDisabled === true ? 0.5 : 1,
+                        paddingHorizontal: PsSelectionBarConfig.paddingHorizontal,
+                    }), children: _jsx(PsText, { tone: item.isDanger === true ? 'danger' : 'primary', weight: 'semibold', children: item.label }) }, item.id)))] }) }));
+};

package/dist/components/ps-selection-mode/ps-selection-mode.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsSelectionModeProps } from './ps-selection-mode-props';
+export declare const PsSelectionMode: ({ actions, deselectAllLabel, doneLabel, isAllSelected, isSelecting, onDone, onSelectAll, selectAllLabel, selectedTitle, title, }: PsSelectionModeProps) => import("react").JSX.Element;

package/dist/components/ps-selection-mode/ps-selection-mode.android.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Stack } from 'expo-router';
+import { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsTabBar } from '../../hooks/use-ps-tab-bar';
+import { PsIconButton } from '../ps-icon-button/ps-icon-button';
+import { PsSelectionBar } from './ps-selection-bar';
+export const PsSelectionMode = ({ actions, deselectAllLabel, doneLabel, isAllSelected, isSelecting, onDone, onSelectAll, selectAllLabel, selectedTitle, title, }) => {
+    const theme = usePsMobileTheme();
+    const { setIsHidden } = usePsTabBar();
+    useEffect(() => {
+        setIsHidden(isSelecting);
+        return () => setIsHidden(false);
+    }, [isSelecting, setIsHidden]);
+    if (!isSelecting)
+        return _jsx(Stack.Screen, { options: { headerBackVisible: true, headerLeft: undefined, title } });
+    return (_jsxs(_Fragment, { children: [_jsx(Stack.Screen, { options: {
+                    headerBackVisible: false,
+                    headerLeft: () => (_jsx(PsIconButton, { backgroundColor: 'transparent', color: theme.ink, iconKey: PsMobileIconKey.Close, label: doneLabel, onPress: onDone, variant: 'header' })),
+                    title: selectedTitle,
+                } }), _jsx(PsSelectionBar, { actions: actions, deselectAllLabel: deselectAllLabel, isAllSelected: isAllSelected, onSelectAll: onSelectAll, selectAllLabel: selectAllLabel })] }));
+};

package/dist/components/ps-sheet-content/ps-sheet-content.js

@@ -28,7 +28,7 @@ export const PsSheetContent = ({ children, footer, header, isScrollable }) => {
                 }, testID: 'ps-sheet-footer', children: footer }))] }));
     const contentStyle = {
         gap: PsLayoutConfig.gutter,
-        paddingBottom: PsSheetService.bottomPadding(Platform.OS === 'ios', insets.bottom),
+        paddingBottom: PsSheetService.bottomPadding(PsSheetService.handlesInset(Platform.OS), insets.bottom),
         paddingHorizontal: PsLayoutConfig.sheetGutter,
         paddingTop: PsLayoutConfig.sheetHeaderPaddingVertical,
     };

package/dist/components/ps-sheet-presenter/ps-sheet-presenter.android.js

@@ -2,16 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ModalBottomSheet, RNHostView } from '@expo/ui/jetpack-compose';
 import { imePadding } from '@expo/ui/jetpack-compose/modifiers';
 import { PsNativeTreeContext } from '../../contexts/ps-native-tree-context';
-import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
 import { PsHost } from '../ps-host/ps-host';
 export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose, }) => {
-    const theme = usePsMobileTheme();
-    return isOpen ? (_jsx(PsHost, { matchContents: true, children: _jsx(ModalBottomSheet, { containerColor: theme.background, onDismissRequest: () => {
+    const scheme = usePsMaterialScheme();
+    return isOpen ? (_jsx(PsHost, { matchContents: true, children: _jsx(ModalBottomSheet, { containerColor: scheme.surfaceContainerHigh, contentColor: scheme.onSurface, onDismissRequest: () => {
                 if (!isDismissBlocked) {
                     onClose();
                 }
             }, properties: {
                 shouldDismissOnBackPress: !isDismissBlocked,
                 shouldDismissOnClickOutside: !isDismissBlocked,
-            }, sheetGesturesEnabled: !isDismissBlocked, skipPartiallyExpanded: true, children: _jsx(RNHostView, { matchContents: { vertical: true }, modifiers: [imePadding()], children: _jsx(PsNativeTreeContext.Provider, { value: false, children: children }) }) }) })) : null;
+            }, scrimColor: scheme.scrim, sheetGesturesEnabled: !isDismissBlocked, skipPartiallyExpanded: true, children: _jsx(RNHostView, { matchContents: { vertical: true }, modifiers: [imePadding()], children: _jsx(PsNativeTreeContext.Provider, { value: false, children: children }) }) }) })) : null;
 };

package/dist/components/ps-sortable-grid/ps-sortable-item.js

@@ -36,6 +36,8 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
     const pan = usePanGesture({
         activateAfterLongPress: PsSortableGridConfig.longPressMs,
         enabled: !isDisabled,
+        failOffsetX: [-PsSortableGridConfig.holdTolerance, PsSortableGridConfig.holdTolerance],
+        failOffsetY: [-PsSortableGridConfig.holdTolerance, PsSortableGridConfig.holdTolerance],
         onActivate: (event) => onStart(id, event.absoluteY),
         onFinalize: onEnd,
         onUpdate: (event) => onUpdate(event.translationX, event.translationY, event.absoluteY),

package/dist/components/ps-spinner/ps-spinner.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsSpinnerProps } from './ps-spinner-props';
+export declare const PsSpinner: ({ color, size }: PsSpinnerProps) => import("react").JSX.Element;

package/dist/components/ps-spinner/ps-spinner.android.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingIndicator } from '@expo/ui/jetpack-compose';
+import { size as sizeModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { PsAndroidStateConfig } from '../../constants/ps-android-state-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsHost } from '../ps-host/ps-host';
+export const PsSpinner = ({ color, size = 'small' }) => {
+    const theme = usePsMobileTheme();
+    const dimension = size === 'large'
+        ? PsAndroidStateConfig.loadingIndicatorLarge
+        : PsAndroidStateConfig.loadingIndicatorSmall;
+    return (_jsx(PsHost, { style: { height: dimension, width: dimension }, children: _jsx(LoadingIndicator, { color: color === undefined ? theme.primary : color, modifiers: [sizeModifier(dimension, dimension)] }) }));
+};

package/dist/components/ps-switch/ps-switch.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsSwitchProps } from './ps-switch-props';
+export declare const PsSwitch: ({ description, isChecked, isDisabled, label, onChange, }: PsSwitchProps) => import("react").JSX.Element;

package/dist/components/ps-switch/ps-switch.android.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from '@expo/ui/jetpack-compose';
+import { View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
+import { PsMaterialControlService } from '../../services/ps-material-control-service';
+import { PsStateService } from '../../services/ps-state-service';
+import { PsHostScope } from '../ps-host-scope/ps-host-scope';
+import { PsText } from '../ps-text/ps-text';
+export const PsSwitch = ({ description, isChecked, isDisabled = false, label, onChange, }) => {
+    const haptic = usePsHaptics();
+    const colors = PsMaterialControlService.switchColors(usePsMaterialScheme());
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: PsMobileControlConfig.rowSpacing,
+        }, children: [_jsxs(View, { style: {
+                    flex: 1,
+                    opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
+                }, children: [_jsx(PsText, { weight: 'semibold', children: label }), description === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: description }))] }), _jsx(PsHostScope, { children: _jsx(Switch, { colors: colors, enabled: !isDisabled, onCheckedChange: (isOn) => {
+                        haptic('selection');
+                        onChange?.(isOn);
+                    }, value: isChecked }) })] }));
+};

package/dist/components/ps-switcher/index.d.ts

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

package/dist/components/ps-switcher/index.js

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

package/dist/components/ps-switcher/ps-switcher-panel.d.ts

@@ -0,0 +1,10 @@
+import type { PsSwitcherItem } from '../../interfaces/ps-switcher-item';
+export interface PsSwitcherPanelProps {
+    clearLabel: string;
+    items: PsSwitcherItem[];
+    noMatchLabel: string;
+    onSelect: (id: string) => void;
+    searchPlaceholder: string;
+    selectedId: string;
+}
+export declare const PsSwitcherPanel: ({ clearLabel, items, noMatchLabel, onSelect, searchPlaceholder, selectedId, }: PsSwitcherPanelProps) => import("react").JSX.Element;