@pallasoft/ps-mobile-components 1.1.0 → 1.3.0

package/dist/services/ps-mobile-theme-service.js

@@ -1,104 +1,74 @@
-import { PallasoftBrandColorService, PallasoftChartColor, PallasoftColor, PallasoftDarkChartColor, PallasoftDarkColor, } from '@pallasoft/ps-design-system';
+import { PallasoftThemeService } from '@pallasoft/ps-design-system';
 import { PsFontConfig } from '../constants/ps-font-config';
-import { PsMobileControlConfig } from '../constants/ps-mobile-control-config';
-import { PsMobileColorService } from './ps-mobile-color-service';
 export class PsMobileThemeService {
     static create({ chart, hasHaptics, isDark, isReduceMotion, primary, primaryContrast, secondary, }) {
-        const scheme = isDark
-            ? PsMobileThemeService.dark(primary, primaryContrast)
-            : PsMobileThemeService.light(primary, primaryContrast);
-        const base = {
-            ...scheme,
-            chart: chart === undefined || chart.length === 0 ? scheme.chart : chart,
-            hasHaptics: hasHaptics === undefined ? true : hasHaptics,
-            isReduceMotion: isReduceMotion === undefined ? false : isReduceMotion,
-        };
-        const fallback = isDark ? PallasoftDarkColor.Accent : PallasoftColor.Accent;
-        const palette = PallasoftBrandColorService.palette(secondary === undefined ? fallback : secondary);
-        if (palette === null)
-            return base;
-        return {
-            ...base,
-            secondary: palette.primary,
-            secondaryContrast: palette.contrast,
-            secondarySoft: isDark ? palette.softDark : palette.softLight,
-        };
-    }
-    static light(primary, primaryContrast) {
-        return {
-            accent: PallasoftColor.Accent,
-            accentSoft: PallasoftColor.Mist,
-            background: PallasoftColor.Background,
-            chart: [
-                PallasoftChartColor.Chart1,
-                PallasoftChartColor.Chart2,
-                PallasoftChartColor.Chart3,
-                PallasoftChartColor.Chart4,
-                PallasoftChartColor.Chart5,
-            ],
-            danger: PallasoftColor.Danger,
-            dangerSoft: PallasoftColor.DangerSoft,
-            fonts: PsFontConfig,
-            ink: PallasoftColor.Ink,
-            hasHaptics: true,
-            isDark: false,
-            isReduceMotion: false,
-            line: PallasoftColor.Line,
-            muted: PallasoftColor.Muted,
-            overlay: PsMobileColorService.withAlpha(PallasoftColor.Ink, PsMobileControlConfig.overlayAlpha),
+        const tokens = PallasoftThemeService.build({
             primary,
             primaryContrast,
-            primarySoft: PsMobileColorService.withAlpha(primary, PsMobileControlConfig.softAlphaLight),
-            secondary: PallasoftColor.Accent,
-            secondaryContrast: PallasoftColor.White,
-            secondarySoft: PallasoftColor.Mist,
-            skeletonBase: PsMobileColorService.withAlpha(PallasoftColor.Ink, PsMobileControlConfig.skeletonBaseAlpha.light),
-            skeletonSweep: PsMobileColorService.withAlpha(PallasoftColor.Ink, PsMobileControlConfig.skeletonSweepAlpha.light),
-            success: PallasoftColor.Success,
-            successSoft: PallasoftColor.SuccessSoft,
-            surface: PallasoftColor.White,
-            warning: PallasoftColor.Warning,
-            warningSoft: PallasoftColor.WarningSoft,
-            white: PallasoftColor.White,
-        };
-    }
-    static dark(primary, primaryContrast) {
-        const alpha = PsMobileControlConfig.softAlphaDark;
+            scheme: isDark ? 'dark' : 'light',
+            secondary,
+        });
         return {
-            accent: PallasoftDarkColor.Accent,
-            accentSoft: PallasoftDarkColor.AccentSoft,
-            background: PallasoftDarkColor.Background,
-            chart: [
-                PallasoftDarkChartColor.Chart1,
-                PallasoftDarkChartColor.Chart2,
-                PallasoftDarkChartColor.Chart3,
-                PallasoftDarkChartColor.Chart4,
-                PallasoftDarkChartColor.Chart5,
-            ],
-            danger: PallasoftDarkColor.Danger,
-            dangerSoft: PallasoftDarkColor.DangerSoft,
+            accent: tokens.accent,
+            accentSoft: tokens.accentSoft,
+            background: tokens.background,
+            chart: chart === undefined || chart.length === 0 ? tokens.chart : chart,
+            danger: tokens.danger,
+            dangerSoft: tokens.dangerSoft,
+            dangerText: tokens.dangerText,
             fonts: PsFontConfig,
-            ink: PallasoftDarkColor.Ink,
-            hasHaptics: true,
-            isDark: true,
-            isReduceMotion: false,
-            line: PallasoftDarkColor.Line,
-            muted: PallasoftDarkColor.Muted,
-            overlay: PsMobileColorService.withAlpha(PallasoftDarkColor.Background, PsMobileControlConfig.overlayAlphaDark),
-            primary,
-            primaryContrast,
-            primarySoft: PsMobileColorService.withAlpha(primary, alpha),
-            secondary: PallasoftDarkColor.Accent,
-            secondaryContrast: PallasoftDarkColor.White,
-            secondarySoft: PallasoftDarkColor.AccentSoft,
-            skeletonBase: PsMobileColorService.withAlpha(PallasoftDarkColor.Ink, PsMobileControlConfig.skeletonBaseAlpha.dark),
-            skeletonSweep: PsMobileColorService.withAlpha(PallasoftDarkColor.Ink, PsMobileControlConfig.skeletonSweepAlpha.dark),
-            success: PallasoftDarkColor.Success,
-            successSoft: PallasoftDarkColor.SuccessSoft,
-            surface: PallasoftDarkColor.Surface,
-            warning: PallasoftDarkColor.Warning,
-            warningSoft: PallasoftDarkColor.WarningSoft,
-            white: PallasoftDarkColor.White,
+            hasHaptics: hasHaptics === undefined ? true : hasHaptics,
+            info: tokens.info,
+            infoSoft: tokens.infoSoft,
+            infoText: tokens.infoText,
+            ink: tokens.ink,
+            isDark,
+            isReduceMotion: isReduceMotion === undefined ? false : isReduceMotion,
+            line: tokens.line,
+            muted: tokens.muted,
+            overlay: tokens.overlay,
+            primary: tokens.primary,
+            primary100: tokens.primary100,
+            primary200: tokens.primary200,
+            primary300: tokens.primary300,
+            primary400: tokens.primary400,
+            primary50: tokens.primary50,
+            primary500: tokens.primary500,
+            primary600: tokens.primary600,
+            primary700: tokens.primary700,
+            primary800: tokens.primary800,
+            primary900: tokens.primary900,
+            primaryContrast: tokens.primaryContrast,
+            primaryPressed: tokens.primaryPressed,
+            primarySoft: tokens.primarySoft,
+            primarySoftStrong: tokens.primarySoftStrong,
+            primaryText: tokens.primaryText,
+            secondary: tokens.secondary,
+            secondary100: tokens.secondary100,
+            secondary200: tokens.secondary200,
+            secondary300: tokens.secondary300,
+            secondary400: tokens.secondary400,
+            secondary50: tokens.secondary50,
+            secondary500: tokens.secondary500,
+            secondary600: tokens.secondary600,
+            secondary700: tokens.secondary700,
+            secondary800: tokens.secondary800,
+            secondary900: tokens.secondary900,
+            secondaryContrast: tokens.secondaryContrast,
+            secondaryPressed: tokens.secondaryPressed,
+            secondarySoft: tokens.secondarySoft,
+            secondarySoftStrong: tokens.secondarySoftStrong,
+            secondaryText: tokens.secondaryText,
+            skeletonBase: tokens.skeletonBase,
+            skeletonSweep: tokens.skeletonSweep,
+            success: tokens.success,
+            successSoft: tokens.successSoft,
+            successText: tokens.successText,
+            surface: tokens.surface,
+            warning: tokens.warning,
+            warningSoft: tokens.warningSoft,
+            warningText: tokens.warningText,
+            white: tokens.white,
         };
     }
 }

package/dist/services/ps-option-picker-service.d.ts

@@ -0,0 +1,8 @@
+import type { PsOptionPickerOption } from '../components/ps-option-picker/ps-option-picker-props';
+export interface PsOptionPickerResult {
+    hasMore: boolean;
+    options: PsOptionPickerOption[];
+}
+export declare class PsOptionPickerService {
+    static visible(options: PsOptionPickerOption[], search: string, limit: number): PsOptionPickerResult;
+}

package/dist/services/ps-option-picker-service.js

@@ -0,0 +1,10 @@
+export class PsOptionPickerService {
+    static visible(options, search, limit) {
+        const needle = search.trim().toLowerCase();
+        const matches = needle === ''
+            ? options
+            : options.filter((option) => option.label.toLowerCase().includes(needle) ||
+                (option.subtitle !== undefined && option.subtitle.toLowerCase().includes(needle)));
+        return { hasMore: matches.length > limit, options: matches.slice(0, limit) };
+    }
+}

package/dist/services/ps-selection-service.d.ts

@@ -0,0 +1,5 @@
+export declare class PsSelectionService {
+    static toggle(selectedIds: string[], id: string): string[];
+    static isAll(selectableIds: string[], selectedIds: string[]): boolean;
+    static toggleAll(selectableIds: string[], selectedIds: string[]): string[];
+}

package/dist/services/ps-selection-service.js

@@ -0,0 +1,13 @@
+export class PsSelectionService {
+    static toggle(selectedIds, id) {
+        return selectedIds.includes(id)
+            ? selectedIds.filter((selectedId) => selectedId !== id)
+            : [...selectedIds, id];
+    }
+    static isAll(selectableIds, selectedIds) {
+        return selectableIds.length > 0 && selectableIds.every((id) => selectedIds.includes(id));
+    }
+    static toggleAll(selectableIds, selectedIds) {
+        return PsSelectionService.isAll(selectableIds, selectedIds) ? [] : [...selectableIds];
+    }
+}

package/dist/services/ps-sheet-service.d.ts

@@ -1,4 +1,6 @@
+import type { ViewStyle } from 'react-native';
 import type { PsSheetAction } from '../interfaces/ps-sheet-action';
+import type { PsSheetLeadingKind } from '../interfaces/ps-sheet-leading-kind';
 export declare class PsSheetService {
     static maxHeight(windowHeight: number): number;
     static bottomPadding(isFloating: boolean, bottomInset: number): number;
@@ -6,5 +8,8 @@ export declare class PsSheetService {
     static closeAction(label: string | undefined, onPress: () => void): PsSheetAction | undefined;
     static isActionInactive(action: PsSheetAction): boolean;
     static actionOpacity(action: PsSheetAction, isPressed: boolean): number;
+    static trailing(action: PsSheetAction | null | undefined, closeLabel: string | undefined, onClose: () => void): PsSheetAction | undefined;
+    static leadingIconStyle(kind: PsSheetLeadingKind): ViewStyle;
+    static grownHeight(previous: number, measured: number, isOpen: boolean): number;
     static shouldClose(isPresented: boolean, isOpen: boolean, isDismissBlocked: boolean): boolean;
 }

package/dist/services/ps-sheet-service.js

@@ -22,6 +22,17 @@ export class PsSheetService {
         }
         return isPressed ? PsSheetConfig.pressedOpacity : 1;
     }
+    static trailing(action, closeLabel, onClose) {
+        if (action === null)
+            return undefined;
+        return action === undefined ? PsSheetService.closeAction(closeLabel, onClose) : action;
+    }
+    static leadingIconStyle(kind) {
+        return kind === 'back' ? { transform: [{ scaleX: -1 }] } : {};
+    }
+    static grownHeight(previous, measured, isOpen) {
+        return isOpen ? Math.max(previous, measured) : measured;
+    }
     static shouldClose(isPresented, isOpen, isDismissBlocked) {
         return !isPresented && isOpen && !isDismissBlocked;
     }

package/dist/services/ps-text-service.js

@@ -3,15 +3,15 @@ export class PsTextService {
     static color(tone, theme) {
         switch (tone) {
             case 'danger':
-                return theme.danger;
+                return theme.dangerText;
             case 'muted':
                 return theme.muted;
             case 'primary':
-                return theme.primary;
+                return theme.primaryText;
             case 'success':
-                return theme.success;
+                return theme.successText;
             case 'warning':
-                return theme.warning;
+                return theme.warningText;
             case 'white':
                 return theme.white;
             default:

package/jest-setup.js

@@ -16,6 +16,8 @@ jest.mock('react-native-reanimated', () => {
 		interpolate: (value, input, output) => output[0],
 		withRepeat: (value) => value,
 		FadeInUp: builder,
+		SlideInLeft: builder,
+		SlideInRight: builder,
 		FadeOutUp: builder,
 		useAnimatedProps: (props) => props(),
 		useAnimatedStyle: (style) => style(),
@@ -57,3 +59,72 @@ jest.mock('@react-native-menu/menu', () => {
 			React.createElement(View, { actions, onPressAction, testID }, children),
 	};
 });
+
+jest.mock('expo-router', () => {
+	const React = require('react');
+	const { View } = require('react-native');
+	const Link = ({ children, href }) =>
+		React.createElement(View, { href, testID: 'ps-list-link' }, children);
+	const Pass = ({ children }) => React.createElement(React.Fragment, null, children);
+	const MenuAction = ({ onPress, title }) =>
+		React.createElement(View, {
+			accessibilityLabel: title,
+			onPress,
+			testID: 'ps-list-link-action',
+		});
+
+	Link.Trigger = Pass;
+	Link.Preview = ({ children, style }) =>
+		children === undefined
+			? null
+			: React.createElement(View, { style, testID: 'ps-list-link-preview' }, children);
+	const Menu = ({ children }) =>
+		React.createElement(
+			React.Fragment,
+			null,
+			React.Children.toArray(children).filter(
+				(child) =>
+					React.isValidElement(child) && (child.type === MenuAction || child.type === Menu)
+			)
+		);
+
+	Link.Menu = Menu;
+	Link.MenuAction = MenuAction;
+
+	const Stack = () => null;
+
+	Stack.Screen = ({ options }) =>
+		React.createElement(View, {
+			accessibilityLabel: options.title,
+			headerBackVisible: options.headerBackVisible,
+			testID: 'stack-screen',
+		});
+	Stack.Toolbar = ({ children, placement }) =>
+		React.createElement(View, { testID: `stack-toolbar-${placement}` }, children);
+	Stack.Toolbar.Button = ({ children, disabled, onPress }) =>
+		React.createElement(View, { accessibilityLabel: children, disabled, onPress });
+	Stack.Toolbar.Spacer = () => null;
+
+	return { __esModule: true, Link, Stack };
+});
+
+jest.mock(
+	'expo-local-authentication',
+	() => ({
+		__esModule: true,
+		authenticateAsync: jest.fn(() => Promise.resolve({ success: true })),
+		getEnrolledLevelAsync: jest.fn(() => Promise.resolve(3)),
+		supportedAuthenticationTypesAsync: jest.fn(() => Promise.resolve([2])),
+	}),
+	{ virtual: true }
+);
+
+jest.mock('expo', () => {
+	const actual = jest.requireActual('expo');
+
+	return {
+		...actual,
+		requireOptionalNativeModule: (name) =>
+			name === 'ExpoLocalAuthentication' ? {} : actual.requireOptionalNativeModule(name),
+	};
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.1.0",
+	"version": "1.3.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",
@@ -34,7 +34,7 @@
 		"test": "jest"
 	},
 	"dependencies": {
-		"@pallasoft/ps-design-system": "^1.17.0",
+		"@pallasoft/ps-design-system": "^1.18.0",
 		"@pallasoft/ps-icons": "^1.11.0",
 		"@pallasoft/ps-utilities": "^2.27.0"
 	},
@@ -44,6 +44,8 @@
 		"expo": "~58.0.0",
 		"expo-haptics": "~58.0.7",
 		"expo-linear-gradient": "~58.0.3",
+		"expo-local-authentication": "~58.0.0",
+		"expo-router": "~58.0.0",
 		"react": "^19.3.0",
 		"react-native": "~0.88.0",
 		"react-native-document-scanner-plugin": "^2.0.4",
@@ -55,6 +57,12 @@
 	"peerDependenciesMeta": {
 		"react-native-document-scanner-plugin": {
 			"optional": true
+		},
+		"expo-local-authentication": {
+			"optional": true
+		},
+		"expo-router": {
+			"optional": true
 		}
 	},
 	"devDependencies": {
@@ -67,6 +75,7 @@
 		"@expo/ui": "~58.0.21",
 		"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
 		"@react-native-menu/menu": "^2.0.0",
+		"@react-native/jest-preset": "^0.88.0",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^13.0.0",
 		"@semantic-release/git": "^10.0.1",
@@ -88,6 +97,9 @@
 		"expo": "~58.0.16",
 		"expo-haptics": "~58.0.7",
 		"expo-linear-gradient": "~58.0.3",
+		"expo-local-authentication": "~58.0.2",
+		"expo-router": "~58.0.24",
+		"hono": "^4.13.13",
 		"husky": "^9.1.7",
 		"jest": "^30.5.2",
 		"jest-expo": "~58.0.11",