@pallasoft/ps-mobile-components 1.2.0 → 1.4.0

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.primary : 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/index.d.ts

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

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

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

package/dist/components/ps-option-picker/ps-option-picker-props.d.ts

@@ -0,0 +1,16 @@
+export interface PsOptionPickerOption {
+    label: string;
+    subtitle?: string;
+    value: string;
+}
+export interface PsOptionPickerProps {
+    emptyLabel: string;
+    limit?: number;
+    moreLabel: string;
+    onSearchChange?: (search: string) => void;
+    onSelect: (value: string) => void;
+    options: PsOptionPickerOption[];
+    searchClearLabel: string;
+    searchPlaceholder: string;
+    selectedValue: string;
+}

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

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

package/dist/components/ps-option-picker/ps-option-picker.d.ts

@@ -0,0 +1,2 @@
+import type { PsOptionPickerProps } from './ps-option-picker-props';
+export declare const PsOptionPicker: ({ emptyLabel, limit, moreLabel, onSearchChange, onSelect, options, searchClearLabel, searchPlaceholder, selectedValue, }: PsOptionPickerProps) => import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+import { PsText } from '../ps-text/ps-text';
+export const PsOptionPicker = ({ emptyLabel, limit = PsOptionPickerConfig.defaultLimit, moreLabel, onSearchChange, onSelect, options, searchClearLabel, searchPlaceholder, selectedValue, }) => {
+    const theme = usePsMobileTheme();
+    const haptic = usePsHaptics();
+    const [search, setSearch] = useState('');
+    const result = useMemo(() => PsOptionPickerService.visible(options, onSearchChange === undefined ? search : '', limit), [limit, onSearchChange, options, search]);
+    return (_jsxs(View, { style: { gap: PsOptionPickerConfig.gap }, children: [_jsx(PsSearchField, { clearLabel: searchClearLabel, onChange: (next) => {
+                    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, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'button', accessibilityState: { selected: option.value === selectedValue }, onPress: () => {
+                        haptic('selection');
+                        onSelect(option.value);
+                    }, style: {
+                        alignItems: 'center',
+                        borderTopColor: theme.line,
+                        borderTopWidth: index === 0 ? 0 : 1,
+                        flexDirection: 'row',
+                        gap: PsOptionPickerConfig.gap,
+                        padding: PsOptionPickerConfig.rowPadding,
+                    }, children: [_jsxs(View, { style: { flex: 1, gap: PsOptionPickerConfig.rowGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: option.label }), option.subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'caption', children: option.subtitle }))] }), option.value === selectedValue ? (_jsx(PsIcon, { color: theme.primary, iconKey: PsIconKey.Check })) : null] }, option.value))) })), result.hasMore ? (_jsx(PsText, { tone: 'muted', variant: 'caption', children: moreLabel })) : null] }));
+};

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-privacy-cover/index.d.ts

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

package/dist/components/ps-privacy-cover/index.js

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

package/dist/components/ps-privacy-cover/ps-privacy-cover-props.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export interface PsPrivacyCoverProps {
+    children?: ReactNode;
+}

package/dist/components/ps-privacy-cover/ps-privacy-cover-props.js

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

package/dist/components/ps-privacy-cover/ps-privacy-cover.d.ts

@@ -0,0 +1,2 @@
+import type { PsPrivacyCoverProps } from './ps-privacy-cover-props';
+export declare const PsPrivacyCover: ({ children }: PsPrivacyCoverProps) => import("react").JSX.Element;

package/dist/components/ps-privacy-cover/ps-privacy-cover.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { StyleSheet, View } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsPageBackdrop } from '../ps-page-backdrop/ps-page-backdrop';
+export const PsPrivacyCover = ({ children }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(View, { accessibilityViewIsModal: true, style: [
+            StyleSheet.absoluteFill,
+            {
+                alignItems: 'center',
+                backgroundColor: theme.background,
+                justifyContent: 'center',
+                zIndex: PallasoftZIndex.TopLayer,
+            },
+        ], testID: 'ps-privacy-cover', children: [_jsx(PsPageBackdrop, {}), children] }));
+};

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-search-select-field/index.d.ts

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

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

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

package/dist/components/ps-search-select-field/ps-search-select-field-props.d.ts

@@ -0,0 +1,10 @@
+export interface PsSearchSelectFieldProps {
+    errorText?: string;
+    helperText?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+    onPress: () => void;
+    placeholder?: string;
+    selectedLabel: string;
+}

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

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

package/dist/components/ps-search-select-field/ps-search-select-field.d.ts

@@ -0,0 +1,2 @@
+import type { PsSearchSelectFieldProps } from './ps-search-select-field-props';
+export declare const PsSearchSelectField: ({ errorText, helperText, isDisabled, isLoading, label, onPress, placeholder, selectedLabel, }: PsSearchSelectFieldProps) => import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { PsFieldFrame } from '../ps-field-frame/ps-field-frame';
+import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsSelectControl } from '../ps-select/ps-select-control';
+import { PsSelectTrigger } from '../ps-select/ps-select-trigger';
+export const PsSearchSelectField = ({ errorText, helperText, isDisabled = false, isLoading = false, label, onPress, placeholder, selectedLabel, }) => {
+    const haptic = usePsHaptics();
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, {});
+    return (_jsx(PsFieldFrame, { errorText: errorText, helperText: helperText, label: label, children: _jsx(PsSelectTrigger, { isDisabled: isDisabled, label: label, onPress: () => {
+                haptic('selection');
+                onPress();
+            }, children: _jsx(PsSelectControl, { errorText: errorText, isDisabled: isDisabled, isFocused: false, placeholder: placeholder, selectedLabel: selectedLabel, size: 'default' }) }) }));
+};

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/index.d.ts

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

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

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

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-props.d.ts

@@ -0,0 +1,13 @@
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsSelectionModeProps {
+    actions: PsMenuItem[];
+    deselectAllLabel: string;
+    doneLabel: string;
+    isAllSelected: boolean;
+    isSelecting: boolean;
+    onDone: () => void;
+    onSelectAll: () => void;
+    selectAllLabel: string;
+    selectedTitle: string;
+    title: string;
+}

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

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

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-selection-mode/ps-selection-mode.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.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useEffect } from 'react';
+import { Stack } from 'expo-router';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsTabBar } from '../../hooks/use-ps-tab-bar';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+export const PsSelectionMode = ({ actions, deselectAllLabel, doneLabel, isAllSelected, isSelecting, onDone, onSelectAll, selectAllLabel, selectedTitle, title, }) => {
+    const theme = usePsMobileTheme();
+    const haptic = usePsHaptics();
+    const { setIsHidden } = usePsTabBar();
+    useEffect(() => {
+        setIsHidden(isSelecting);
+        return () => setIsHidden(false);
+    }, [isSelecting, setIsHidden]);
+    if (!isSelecting)
+        return _jsx(Stack.Screen, { options: { headerBackVisible: true, title } });
+    return (_jsxs(_Fragment, { children: [_jsx(Stack.Screen, { options: { headerBackVisible: false, title: selectedTitle } }), _jsx(Stack.Toolbar, { placement: 'left', children: _jsx(Stack.Toolbar.Button, { onPress: () => {
+                        haptic('selection');
+                        onSelectAll();
+                    }, tintColor: theme.primaryText, children: isAllSelected ? deselectAllLabel : selectAllLabel }) }), _jsx(Stack.Toolbar, { placement: 'right', children: _jsx(Stack.Toolbar.Button, { onPress: () => {
+                        haptic('light');
+                        onDone();
+                    }, tintColor: theme.primaryText, variant: 'done', children: doneLabel }) }), _jsxs(Stack.Toolbar, { placement: 'bottom', children: [_jsx(Stack.Toolbar.Spacer, {}), actions.map((item) => (_jsxs(Fragment, { children: [_jsx(Stack.Toolbar.Button, { disabled: item.isDisabled === true, icon: PsActionMenuService.symbol(item), onPress: () => {
+                                    haptic('medium');
+                                    item.onSelect();
+                                }, tintColor: item.isDanger === true ? theme.danger : theme.primaryText, children: item.label }), _jsx(Stack.Toolbar.Spacer, {})] }, item.id)))] })] }));
+};

package/dist/components/ps-sheet/ps-sheet-props.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import type { PsSheetAction } from '../../interfaces/ps-sheet-action';
+import type { PsSheetLeadingKind } from '../../interfaces/ps-sheet-leading-kind';
 export interface PsSheetProps {
     children: ReactNode;
     closeLabel?: string;
@@ -8,8 +9,10 @@ export interface PsSheetProps {
     isDismissBlocked?: boolean;
     isOpen: boolean;
     isScrollable?: boolean;
+    leadingKind?: PsSheetLeadingKind;
     leadingLabel?: string;
     onClose: () => void;
+    onLeadingPress?: () => void;
     title: string;
-    trailingAction?: PsSheetAction;
+    trailingAction?: PsSheetAction | null;
 }

package/dist/components/ps-sheet/ps-sheet.d.ts

@@ -1,2 +1,2 @@
 import type { PsSheetProps } from './ps-sheet-props';
-export declare const PsSheet: ({ children, closeLabel, eyebrow, footer, isDismissBlocked, isOpen, isScrollable, leadingLabel, onClose, title, trailingAction, }: PsSheetProps) => import("react").JSX.Element;
+export declare const PsSheet: ({ children, closeLabel, eyebrow, footer, isDismissBlocked, isOpen, isScrollable, leadingKind, leadingLabel, onClose, onLeadingPress, title, trailingAction, }: PsSheetProps) => import("react").JSX.Element;

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

@@ -2,13 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PsSheetService } from '../../services/ps-sheet-service';
 import { PsSheetContent } from '../ps-sheet-content/ps-sheet-content';
 import { PsSheetPresenter } from '../ps-sheet-presenter/ps-sheet-presenter';
-export const PsSheet = ({ children, closeLabel, eyebrow, footer, isDismissBlocked = false, isOpen, isScrollable = true, leadingLabel, onClose, title, trailingAction, }) => (_jsx(PsSheetPresenter, { isDismissBlocked: isDismissBlocked, isOpen: isOpen, onClose: onClose, children: _jsx(PsSheetContent, { footer: footer, header: {
+export const PsSheet = ({ children, closeLabel, eyebrow, footer, isDismissBlocked = false, isOpen, isScrollable = true, leadingKind = 'close', leadingLabel, onClose, onLeadingPress, title, trailingAction, }) => (_jsx(PsSheetPresenter, { isDismissBlocked: isDismissBlocked, isOpen: isOpen, onClose: onClose, children: _jsx(PsSheetContent, { footer: footer, header: {
             eyebrow,
             isLeadingDisabled: isDismissBlocked,
+            leadingKind,
             leadingLabel,
-            onLeadingPress: onClose,
+            onLeadingPress: onLeadingPress === undefined ? onClose : onLeadingPress,
             title,
-            trailing: trailingAction === undefined
-                ? PsSheetService.closeAction(closeLabel, onClose)
-                : trailingAction,
+            trailing: PsSheetService.trailing(trailingAction, closeLabel, onClose),
         }, isScrollable: isScrollable, children: children }) }));

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-header/ps-sheet-header-props.d.ts

@@ -1,7 +1,9 @@
 import type { PsSheetAction } from '../../interfaces/ps-sheet-action';
+import type { PsSheetLeadingKind } from '../../interfaces/ps-sheet-leading-kind';
 export interface PsSheetHeaderProps {
     eyebrow?: string;
     isLeadingDisabled?: boolean;
+    leadingKind?: PsSheetLeadingKind;
     leadingLabel?: string;
     onLeadingPress?: () => void;
     title: string;

package/dist/components/ps-sheet-header/ps-sheet-header.d.ts

@@ -1,2 +1,2 @@
 import type { PsSheetHeaderProps } from './ps-sheet-header-props';
-export declare const PsSheetHeader: ({ eyebrow, isLeadingDisabled, leadingLabel, onLeadingPress, title, trailing, }: PsSheetHeaderProps) => import("react").JSX.Element;
+export declare const PsSheetHeader: ({ eyebrow, isLeadingDisabled, leadingKind, leadingLabel, onLeadingPress, title, trailing, }: PsSheetHeaderProps) => import("react").JSX.Element;

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

@@ -8,7 +8,7 @@ import { PsSheetService } from '../../services/ps-sheet-service';
 import { PsIconButton } from '../ps-icon-button/ps-icon-button';
 import { PsSpinner } from '../ps-spinner/ps-spinner';
 import { PsText } from '../ps-text/ps-text';
-export const PsSheetHeader = ({ eyebrow, isLeadingDisabled = false, leadingLabel, onLeadingPress, title, trailing, }) => {
+export const PsSheetHeader = ({ eyebrow, isLeadingDisabled = false, leadingKind = 'close', leadingLabel, onLeadingPress, title, trailing, }) => {
     const theme = usePsMobileTheme();
     const trailingColor = trailing?.tone === 'danger' ? theme.danger : theme.primary;
     const trailingContrast = trailing?.tone === 'danger' ? theme.white : theme.primaryContrast;
@@ -21,7 +21,7 @@ export const PsSheetHeader = ({ eyebrow, isLeadingDisabled = false, leadingLabel
             paddingBottom: PsSheetConfig.headerPaddingBottom,
             paddingHorizontal: PsSheetConfig.headerPaddingHorizontal,
             paddingTop: PsSheetConfig.headerPaddingTop,
-        }, testID: 'ps-sheet-header', children: [_jsx(View, { style: { alignItems: 'flex-start', minWidth: PsSheetConfig.actionMinWidth }, children: leadingLabel === undefined ? null : (_jsx(PsIconButton, { iconKey: PsIconKey.Close, isDisabled: isLeadingDisabled, label: leadingLabel, onPress: onLeadingPress, testID: 'ps-sheet-leading', variant: 'header' })) }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [_jsx(PsText, { accessibilityRole: 'header', align: 'center', numberOfLines: 2, weight: 'bold', children: title }), eyebrow === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 1, tone: 'muted', variant: 'small', children: eyebrow }))] }), _jsx(View, { style: { alignItems: 'flex-end', minWidth: PsSheetConfig.actionMinWidth }, children: trailing === undefined ? null : trailing.isSubmitting === true ? (_jsx(View, { accessibilityLabel: trailing.label, accessibilityState: { busy: true }, style: {
+        }, testID: 'ps-sheet-header', children: [_jsx(View, { style: { alignItems: 'flex-start', minWidth: PsSheetConfig.actionMinWidth }, children: leadingLabel === undefined ? null : (_jsx(View, { style: PsSheetService.leadingIconStyle(leadingKind), children: _jsx(PsIconButton, { iconKey: leadingKind === 'back' ? PsIconKey.ChevronRight : PsIconKey.Close, isDisabled: isLeadingDisabled, label: leadingLabel, onPress: onLeadingPress, testID: 'ps-sheet-leading', variant: 'header' }) })) }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [_jsx(PsText, { accessibilityRole: 'header', align: 'center', numberOfLines: 2, weight: 'bold', children: title }), eyebrow === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 1, tone: 'muted', variant: 'small', children: eyebrow }))] }), _jsx(View, { style: { alignItems: 'flex-end', minWidth: PsSheetConfig.actionMinWidth }, children: trailing === undefined ? null : trailing.isSubmitting === true ? (_jsx(View, { accessibilityLabel: trailing.label, accessibilityState: { busy: true }, style: {
                         alignItems: 'center',
                         backgroundColor: trailingColor,
                         borderRadius: PsPageHeaderConfig.buttonSize / 2,