@pallasoft/ps-mobile-components 1.1.0 → 1.3.0

package/dist/components/ps-action-menu/ps-action-menu-avatar-entry.d.ts

@@ -0,0 +1,5 @@
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsActionMenuAvatarEntryProps {
+    item: PsMenuItem;
+}
+export declare const PsActionMenuAvatarEntry: ({ item }: PsActionMenuAvatarEntryProps) => import("react").JSX.Element;

package/dist/components/ps-action-menu/ps-action-menu-avatar-entry.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Image, Label, Toggle } from '@expo/ui/swift-ui';
+import { disabled } from '@expo/ui/swift-ui/modifiers';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+export const PsActionMenuAvatarEntry = ({ item }) => {
+    const haptic = usePsHaptics();
+    const choose = () => {
+        haptic('selection');
+        item.onSelect();
+    };
+    const label = (_jsx(Label, { icon: item.imageUri === undefined ? undefined : _jsx(Image, { uiImage: item.imageUri }), systemImage: PsActionMenuService.symbol(item), title: item.label }));
+    if (item.isChecked)
+        return (_jsx(Toggle, { isOn: true, modifiers: [disabled(item.isDisabled === true)], onIsOnChange: choose, children: label }));
+    return (_jsx(Button, { modifiers: [disabled(item.isDisabled === true)], onPress: choose, children: label }));
+};

package/dist/components/ps-action-menu/ps-action-menu-entries.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Menu, Section } from '@expo/ui/swift-ui';
 import { disabled, tint } from '@expo/ui/swift-ui/modifiers';
-import { PsSfSymbolConfig } from '../../constants/ps-sf-symbol-config';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsActionMenuService } from '../../services/ps-action-menu-service';
+import { PsActionMenuAvatarEntry } from './ps-action-menu-avatar-entry';
 import { PsActionMenuLabelled } from './ps-action-menu-labelled';
 export const PsActionMenuEntry = ({ item }) => {
     const haptic = usePsHaptics();
@@ -12,6 +12,8 @@ export const PsActionMenuEntry = ({ item }) => {
     const symbol = PsActionMenuService.symbol(item);
     if (item.children !== undefined && item.children.length > 0)
         return (_jsx(Menu, { label: item.label, systemImage: symbol, children: item.children.map((child) => (_jsx(PsActionMenuEntry, { item: child }, child.id))) }));
+    if (PsActionMenuService.hasAvatar(item))
+        return _jsx(PsActionMenuAvatarEntry, { item: item });
     if (item.subtitle !== undefined)
         return (_jsx(Button, { modifiers: [
                 disabled(item.isDisabled === true),
@@ -28,4 +30,4 @@ export const PsActionMenuEntry = ({ item }) => {
             item.onSelect();
         }, role: item.isDanger ? 'destructive' : undefined, systemImage: symbol }));
 };
-export const PsActionMenuEntries = ({ header, sections }) => (_jsxs(_Fragment, { children: [header === undefined ? null : (_jsx(Section, { children: _jsx(Button, { modifiers: [disabled(header.onSelect === undefined)], onPress: header.onSelect, children: _jsx(PsActionMenuLabelled, { subtitle: header.subtitle === undefined ? '' : header.subtitle, symbol: PsSfSymbolConfig.headerSymbol, title: header.title }) }) })), sections.map((section) => (_jsx(Section, { title: section.title, children: section.items.map((item) => (_jsx(PsActionMenuEntry, { item: item }, item.id))) }, section.id)))] }));
+export const PsActionMenuEntries = ({ header, sections }) => (_jsxs(_Fragment, { children: [header === undefined ? null : (_jsx(Section, { children: _jsx(Button, { modifiers: [disabled(header.onSelect === undefined)], onPress: header.onSelect, children: _jsx(PsActionMenuLabelled, { imageUri: header.imageUri, subtitle: header.subtitle === undefined ? '' : header.subtitle, symbol: PsActionMenuService.headerSymbol(header), title: header.title }) }) })), sections.map((section) => (_jsx(Section, { title: section.title, children: section.items.map((item) => (_jsx(PsActionMenuEntry, { item: item }, item.id))) }, section.id)))] }));

package/dist/components/ps-action-menu/ps-action-menu-labelled.d.ts

@@ -1,7 +1,8 @@
 import type { SFSymbol } from 'sf-symbols-typescript';
 export interface PsActionMenuLabelledProps {
+    imageUri?: string;
     subtitle: string;
     symbol: SFSymbol | undefined;
     title: string;
 }
-export declare const PsActionMenuLabelled: ({ subtitle, symbol, title }: PsActionMenuLabelledProps) => import("react").JSX.Element;
+export declare const PsActionMenuLabelled: ({ imageUri, subtitle, symbol, title, }: PsActionMenuLabelledProps) => import("react").JSX.Element;

package/dist/components/ps-action-menu/ps-action-menu-labelled.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Label, Text, VStack } from '@expo/ui/swift-ui';
-export const PsActionMenuLabelled = ({ subtitle, symbol, title }) => (_jsx(Label, { systemImage: symbol, children: _jsxs(VStack, { alignment: 'leading', children: [_jsx(Text, { children: title }), _jsx(Text, { children: subtitle })] }) }));
+import { Image, Label, Text, VStack } from '@expo/ui/swift-ui';
+export const PsActionMenuLabelled = ({ imageUri, subtitle, symbol, title, }) => (_jsx(Label, { icon: imageUri === undefined ? undefined : _jsx(Image, { uiImage: imageUri }), systemImage: symbol, children: _jsxs(VStack, { alignment: 'leading', children: [_jsx(Text, { children: title }), _jsx(Text, { children: subtitle })] }) }));

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

@@ -18,7 +18,7 @@ export const PsActionMenu = ({ children, header, isDisabled = false, items, labe
                                         textColor: item.isDanger
                                             ? theme.danger
                                             : item.isChecked
-                                                ? theme.primary
+                                                ? theme.primaryText
                                                 : theme.ink,
                                     }, enabled: item.isDisabled !== true, onClick: () => {
                                         setIsOpen(false);

package/dist/components/ps-action-menu/ps-action-menu.ios.js

@@ -1,6 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
+import { usePsMenuTiles } from '../../hooks/use-ps-menu-tiles';
 import { PsActionMenuService } from '../../services/ps-action-menu-service';
+import { PsMenuTileService } from '../../services/ps-menu-tile-service';
 import { PsNativeMenuOverlay } from '../ps-native-menu-overlay/ps-native-menu-overlay';
 import { PsActionMenuEntries } from './ps-action-menu-entries';
-export const PsActionMenu = ({ children, header, isDisabled = false, items, label, sections, }) => (_jsxs(View, { children: [typeof children === 'function' ? children({ isOpen: false, open: () => undefined }) : children, _jsx(PsNativeMenuOverlay, { isDisabled: isDisabled, label: label, children: _jsx(PsActionMenuEntries, { header: header, sections: PsActionMenuService.sections(items, sections) }) })] }));
+import { PsMenuTileCanvas } from './ps-menu-tile-canvas';
+export const PsActionMenu = ({ children, header, isDisabled = false, items, label, sections, }) => {
+    const { onTile, tiles } = usePsMenuTiles();
+    const all = PsActionMenuService.sections(items, sections);
+    return (_jsxs(View, { children: [_jsx(PsMenuTileCanvas, { onTile: onTile, requests: PsMenuTileService.requests(header, all) }), typeof children === 'function'
+                ? children({ isOpen: false, open: () => undefined })
+                : children, _jsx(PsNativeMenuOverlay, { isDisabled: isDisabled, label: label, children: _jsx(PsActionMenuEntries, { header: PsMenuTileService.header(header, tiles), sections: PsMenuTileService.sections(all, tiles) }) })] }));
+};

package/dist/components/ps-action-menu/ps-menu-tile-canvas.d.ts

@@ -0,0 +1,6 @@
+import type { PsMenuTileRequest } from '../../interfaces/ps-menu-tile-request';
+export interface PsMenuTileCanvasProps {
+    onTile: (key: string, uri: string) => void;
+    requests: PsMenuTileRequest[];
+}
+export declare const PsMenuTileCanvas: ({ onTile, requests }: PsMenuTileCanvasProps) => import("react").JSX.Element | null;

package/dist/components/ps-action-menu/ps-menu-tile-canvas.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsMenuTileStyleService } from '../../services/ps-menu-tile-style-service';
+import { PsMenuTileDrawing } from './ps-menu-tile-drawing';
+export const PsMenuTileCanvas = ({ onTile, requests }) => requests.length === 0 ? null : (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants', pointerEvents: 'none', style: PsMenuTileStyleService.canvas(), children: requests.map((request) => (_jsx(PsMenuTileDrawing, { onTile: onTile, request: request }, request.key))) }));

package/dist/components/ps-action-menu/ps-menu-tile-drawing.d.ts

@@ -0,0 +1,6 @@
+import type { PsMenuTileRequest } from '../../interfaces/ps-menu-tile-request';
+export interface PsMenuTileDrawingProps {
+    onTile: (key: string, uri: string) => void;
+    request: PsMenuTileRequest;
+}
+export declare const PsMenuTileDrawing: ({ onTile, request }: PsMenuTileDrawingProps) => import("react").JSX.Element;

package/dist/components/ps-action-menu/ps-menu-tile-drawing.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import Svg, { ClipPath, Defs, G, Rect, Image as SvgImage, Text as SvgText } from 'react-native-svg';
+import { PsMenuTileConfig } from '../../constants/ps-menu-tile-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsMenuTileDrawing = ({ onTile, request }) => {
+    const theme = usePsMobileTheme();
+    const ref = useRef(null);
+    const clipId = `tile${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+    const size = PsMenuTileConfig.size;
+    const isCircle = request.shape === 'circle';
+    const inset = isCircle ? 0 : PsMenuTileConfig.logoPadding;
+    const fontSize = request.text.length > 1 ? PsMenuTileConfig.initialsFontSize : PsMenuTileConfig.fontSize;
+    const isMounted = useRef(true);
+    const [isLaidOut, setIsLaidOut] = useState(false);
+    const [isImageLoaded, setIsImageLoaded] = useState(false);
+    const isReady = isLaidOut && (request.imageUri === undefined || isImageLoaded);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        const svg = ref.current;
+        if (!isReady || svg === null)
+            return;
+        svg.toDataURL((base64) => {
+            if (isMounted.current)
+                onTile(request.key, `${PsMenuTileConfig.dataUriPrefix}${base64}`);
+        });
+    }, [isReady, onTile, request.key, theme.primary, theme.primaryContrast]);
+    return (_jsxs(Svg, { height: size, onLayout: () => setIsLaidOut(true), ref: ref, width: size, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: clipId, children: _jsx(Rect, { height: size, rx: isCircle ? size / 2 : PsMenuTileConfig.roundedRadius, width: size }) }) }), _jsxs(G, { clipPath: `url(#${clipId})`, children: [_jsx(Rect, { fill: request.imageUri === undefined ? theme.primary : theme.white, height: size, width: size }), request.imageUri === undefined ? (_jsx(SvgText, { fill: theme.primaryContrast, fontFamily: theme.fonts.semibold, fontSize: fontSize, textAnchor: 'middle', x: size / 2, y: size / 2 + fontSize * PsMenuTileConfig.textBaseline, children: request.text })) : (_jsx(SvgImage, { height: size - inset * 2, href: { uri: request.imageUri }, onLoad: () => setIsImageLoaded(true), preserveAspectRatio: isCircle ? 'xMidYMid slice' : 'xMidYMid meet', width: size - inset * 2, x: inset, y: inset }))] })] }));
+};

package/dist/components/ps-app-lock-screen/index.d.ts

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

package/dist/components/ps-app-lock-screen/index.js

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

package/dist/components/ps-app-lock-screen/ps-app-lock-screen-props.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface PsAppLockScreenProps {
+    children: ReactNode;
+    isUnlocking?: boolean;
+    onSignOut: () => void;
+    onUnlock: () => void;
+    signOutLabel: string;
+    unlockLabel: string;
+}

package/dist/components/ps-app-lock-screen/ps-app-lock-screen-props.js

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

package/dist/components/ps-app-lock-screen/ps-app-lock-screen.d.ts

@@ -0,0 +1,2 @@
+import type { PsAppLockScreenProps } from './ps-app-lock-screen-props';
+export declare const PsAppLockScreen: ({ children, isUnlocking, onSignOut, onUnlock, signOutLabel, unlockLabel, }: PsAppLockScreenProps) => import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { PsAppLockConfig } from '../../constants/ps-app-lock-config';
+import { PsButton } from '../ps-button/ps-button';
+import { PsPrivacyCover } from '../ps-privacy-cover/ps-privacy-cover';
+import { PsTextLink } from '../ps-text-link/ps-text-link';
+export const PsAppLockScreen = ({ children, isUnlocking = false, onSignOut, onUnlock, signOutLabel, unlockLabel, }) => (_jsx(PsPrivacyCover, { children: _jsx(SafeAreaView, { style: {
+            alignItems: 'center',
+            flex: 1,
+            justifyContent: 'center',
+            paddingHorizontal: PsAppLockConfig.layout.horizontalPadding,
+            width: '100%',
+        }, children: _jsxs(View, { style: {
+                alignItems: 'center',
+                gap: PsAppLockConfig.layout.gap,
+                maxWidth: PsAppLockConfig.layout.maxWidth,
+                width: '100%',
+            }, children: [children, _jsx(PsButton, { isFullWidth: true, isLoading: isUnlocking, onPress: onUnlock, size: 'large', children: unlockLabel }), _jsx(PsTextLink, { onPress: onSignOut, tone: 'muted', children: signOutLabel })] }) }) }));

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

@@ -23,5 +23,5 @@ export const PsChip = ({ children, isSelected = false, onPress, trailingIcon })
             gap: PsMobileControlConfig.buttonIconSpacing / 2,
             height: PsMobileControlConfig.controlHeights.compact,
             paddingHorizontal: PsMobileControlConfig.controlPaddingX.compact,
-        }, children: [_jsx(PsText, { numberOfLines: 1, variant: 'label', weight: 'semibold', children: children }), trailingIcon === undefined ? null : (_jsx(PsIcon, { color: theme.muted, iconKey: trailingIcon, size: PsMobileControlConfig.iconSizeInline }))] }));
+        }, children: [_jsx(PsText, { numberOfLines: 1, tone: isSelected ? 'primary' : 'ink', variant: 'label', weight: 'semibold', children: children }), trailingIcon === undefined ? null : (_jsx(PsIcon, { color: theme.muted, iconKey: trailingIcon, size: PsMobileControlConfig.iconSizeInline }))] }));
 };

package/dist/components/ps-count-badge/index.d.ts

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

package/dist/components/ps-count-badge/index.js

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

package/dist/components/ps-count-badge/ps-count-badge-props.d.ts

@@ -0,0 +1,5 @@
+export interface PsCountBadgeProps {
+    count: number;
+    isAlert?: boolean;
+    label?: string;
+}

package/dist/components/ps-count-badge/ps-count-badge-props.js

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

package/dist/components/ps-count-badge/ps-count-badge.d.ts

@@ -0,0 +1,2 @@
+import type { PsCountBadgeProps } from './ps-count-badge-props';
+export declare const PsCountBadge: ({ count, isAlert, label }: PsCountBadgeProps) => import("react").JSX.Element | null;

package/dist/components/ps-count-badge/ps-count-badge.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsCountBadgeConfig } from '../../constants/ps-count-badge-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsCountBadgeService } from '../../services/ps-count-badge-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsCountBadge = ({ count, isAlert = false, label }) => {
+    const theme = usePsMobileTheme();
+    if (count <= 0)
+        return null;
+    return (_jsx(View, { accessibilityLabel: label, style: {
+            alignItems: 'center',
+            alignSelf: 'center',
+            backgroundColor: isAlert ? theme.danger : theme.primary,
+            borderRadius: PsCountBadgeConfig.height / 2,
+            height: PsCountBadgeConfig.height,
+            justifyContent: 'center',
+            minWidth: PsCountBadgeConfig.height,
+            paddingHorizontal: PsCountBadgeConfig.paddingHorizontal,
+        }, testID: 'ps-count-badge', children: _jsx(PsText, { style: {
+                color: isAlert ? theme.white : theme.primaryContrast,
+                fontSize: PsCountBadgeConfig.fontSize,
+                lineHeight: PsCountBadgeConfig.height,
+            }, weight: 'bold', children: PsCountBadgeService.text(count) }) }));
+};

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { PsSheetPage } from '../../interfaces/ps-sheet-page';
 export interface PsFormSheetProps {
     cancelLabel: string;
     closeLabel?: string;
@@ -12,6 +13,7 @@ export interface PsFormSheetProps {
     isSubmitDisabled?: boolean;
     onClose: () => void;
     onSubmit: () => void;
+    page?: PsSheetPage | null;
     submitLabel: string;
     submitVariant?: 'danger' | 'primary';
     title: string;

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

@@ -1,2 +1,2 @@
 import type { PsFormSheetProps } from './ps-form-sheet-props';
-export declare const PsFormSheet: ({ cancelLabel, children, eyebrow, footerStart, isLoading, isOpen, isSubmitting, loadingFields, isSubmitDisabled, onClose, onSubmit, submitLabel, submitVariant, title, }: PsFormSheetProps) => import("react").JSX.Element;
+export declare const PsFormSheet: ({ cancelLabel, children, eyebrow, footerStart, isLoading, isOpen, isSubmitting, loadingFields, isSubmitDisabled, onClose, onSubmit, page, submitLabel, submitVariant, title, }: PsFormSheetProps) => import("react").JSX.Element;

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

@@ -1,11 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { PsFormSheetConfig } from '../../constants/ps-form-sheet-config';
+import { PsSheetPageConfig } from '../../constants/ps-sheet-page-config';
 import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsSheetPageView } from '../ps-sheet-page/ps-sheet-page-view';
 import { PsSheet } from '../ps-sheet/ps-sheet';
-export const PsFormSheet = ({ cancelLabel, children, eyebrow, footerStart, isLoading = false, isOpen, isSubmitting = false, loadingFields = PsFormSheetConfig.loadingFields, isSubmitDisabled = false, onClose, onSubmit, submitLabel, submitVariant = 'primary', title, }) => (_jsx(PsSheet, { eyebrow: eyebrow, footer: footerStart, isDismissBlocked: isSubmitting, isOpen: isOpen, leadingLabel: cancelLabel, onClose: onClose, title: title, trailingAction: {
-        isDisabled: isSubmitDisabled || isLoading,
-        isSubmitting,
-        label: submitLabel,
-        onPress: onSubmit,
-        tone: submitVariant,
-    }, children: isLoading ? _jsx(PsFieldSkeleton, { count: loadingFields }) : children }));
+export const PsFormSheet = ({ cancelLabel, children, eyebrow, footerStart, isLoading = false, isOpen, isSubmitting = false, loadingFields = PsFormSheetConfig.loadingFields, isSubmitDisabled = false, onClose, onSubmit, page = null, submitLabel, submitVariant = 'primary', title, }) => {
+    const lastPageId = useRef(null);
+    const isReturning = page === null && lastPageId.current !== null;
+    useEffect(() => {
+        lastPageId.current = page === null ? null : page.id;
+    }, [page]);
+    return page === null ? (_jsx(PsSheet, { eyebrow: eyebrow, footer: footerStart, isDismissBlocked: isSubmitting, isOpen: isOpen, leadingLabel: cancelLabel, onClose: onClose, title: title, trailingAction: {
+            isDisabled: isSubmitDisabled || isLoading,
+            isSubmitting,
+            label: submitLabel,
+            onPress: onSubmit,
+            tone: submitVariant,
+        }, children: _jsx(PsSheetPageView, { isAnimated: isReturning, isPage: false, pageId: PsSheetPageConfig.formId, children: isLoading ? _jsx(PsFieldSkeleton, { count: loadingFields }) : children }) })) : (_jsx(PsSheet, { isOpen: isOpen, leadingKind: 'back', leadingLabel: page.backLabel, onClose: onClose, onLeadingPress: page.onBack, title: page.title, trailingAction: null, children: _jsx(PsSheetPageView, { isAnimated: true, isPage: true, pageId: page.id, children: page.children }) }));
+};

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

@@ -8,3 +8,5 @@ export * from './ps-list-select-row';
 export * from './ps-list-select-row-props';
 export * from './ps-list-person-row';
 export * from './ps-list-person-row-props';
+export * from './ps-list-link-row';
+export * from './ps-list-link-row-props';

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

@@ -8,3 +8,5 @@ export * from './ps-list-select-row';
 export * from './ps-list-select-row-props';
 export * from './ps-list-person-row';
 export * from './ps-list-person-row-props';
+export * from './ps-list-link-row';
+export * from './ps-list-link-row-props';

package/dist/components/ps-list/ps-list-context-menu.js

@@ -9,6 +9,6 @@ export const PsListContextMenu = ({ children, items, title }) => {
     const haptic = usePsHaptics();
     return (_jsx(MenuView, { actions: PsContextMenuService.actions(items, theme, Platform.OS === 'ios'), onOpenMenu: () => haptic('medium'), onPressAction: ({ nativeEvent }) => {
             haptic('selection');
-            items.find((item) => item.id === nativeEvent.event)?.onSelect();
+            PsContextMenuService.find(items, nativeEvent.event)?.onSelect();
         }, shouldOpenOnLongPress: true, testID: 'ps-list-context-menu', themeVariant: theme.isDark ? 'dark' : 'light', title: title, children: children }));
 };

package/dist/components/ps-list/ps-list-link-menu-entry.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export declare class PsListLinkMenuEntry {
+    static render(item: PsMenuItem, onSelect: (item: PsMenuItem) => void): ReactElement;
+}

package/dist/components/ps-list/ps-list-link-menu-entry.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link } from 'expo-router';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+export class PsListLinkMenuEntry {
+    static render(item, onSelect) {
+        const icon = PsActionMenuService.symbol(item);
+        if (item.children !== undefined && item.children.length > 0)
+            return (_jsx(Link.Menu, { icon: icon, title: item.label, children: item.children.map((child) => PsListLinkMenuEntry.render(child, onSelect)) }, item.id));
+        return (_jsx(Link.MenuAction, { destructive: item.isDanger === true, disabled: item.isDisabled === true, icon: icon, onPress: () => onSelect(item), title: item.label }, item.id));
+    }
+}

package/dist/components/ps-list/ps-list-link-menu.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsListLinkMenuProps {
+    children: ReactElement;
+    href: string;
+    items: PsMenuItem[];
+    preview?: ReactNode;
+    title: string;
+}
+export declare const PsListLinkMenu: ({ children, href, items, preview, title }: PsListLinkMenuProps) => import("react").JSX.Element;

package/dist/components/ps-list/ps-list-link-menu.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'expo-router';
+import { PsListConfig } from '../../constants/ps-list-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+import { PsListLinkMenuEntry } from './ps-list-link-menu-entry';
+export const PsListLinkMenu = ({ children, href, items, preview, title }) => {
+    const haptic = usePsHaptics();
+    const sections = PsActionMenuService.consistent([{ id: 'items', items }]);
+    const entries = sections.length === 0 ? [] : sections[0].items;
+    const choose = (item) => {
+        haptic('selection');
+        item.onSelect();
+    };
+    return (_jsxs(Link, { asChild: true, href: href, children: [_jsx(Link.Trigger, { children: children }), preview === undefined ? (_jsx(Link.Preview, {})) : (_jsx(Link.Preview, { style: { height: PsListConfig.previewHeight, width: PsListConfig.previewWidth }, children: preview })), entries.length === 0 ? null : (_jsx(Link.Menu, { title: title, children: entries.map((item) => PsListLinkMenuEntry.render(item, choose)) }))] }));
+};

package/dist/components/ps-list/ps-list-link-row-props.d.ts

@@ -0,0 +1,11 @@
+import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+export interface PsListLinkRowProps {
+    count?: number;
+    countLabel?: string;
+    iconKey: PsMobileIconKey;
+    isAlert?: boolean;
+    isLoading?: boolean;
+    onPress: () => void;
+    subtitle?: string;
+    title: string;
+}

package/dist/components/ps-list/ps-list-link-row-props.js

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

package/dist/components/ps-list/ps-list-link-row-skeleton.d.ts

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

package/dist/components/ps-list/ps-list-link-row-skeleton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsListConfig } from '../../constants/ps-list-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsListLinkRowSkeleton = () => (_jsxs(View, { style: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: PsLayoutConfig.headerSlotGap,
+        minHeight: PsLayoutConfig.linkRowMinHeight,
+        paddingHorizontal: PsLayoutConfig.gutter,
+        paddingVertical: PsLayoutConfig.rowPaddingVertical,
+    }, testID: 'ps-list-link-row-skeleton', children: [_jsx(PsSkeleton, { height: PsLayoutConfig.linkRowIconBox, radius: PsLayoutConfig.linkRowIconBoxRadius, width: PsLayoutConfig.linkRowIconBox }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap * 3 }, children: [_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsListConfig.skeletonTitleWidth }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsListConfig.skeletonSubtitleWidth })] })] }));

package/dist/components/ps-list/ps-list-link-row.d.ts

@@ -0,0 +1,2 @@
+import type { PsListLinkRowProps } from './ps-list-link-row-props';
+export declare const PsListLinkRow: ({ count, countLabel, iconKey, isAlert, isLoading, onPress, subtitle, title, }: PsListLinkRowProps) => import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Pressable, View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsCountBadge } from '../ps-count-badge/ps-count-badge';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+import { PsListLinkRowSkeleton } from './ps-list-link-row-skeleton';
+export const PsListLinkRow = ({ count, countLabel, iconKey, isAlert = false, isLoading = false, onPress, subtitle, title, }) => {
+    const theme = usePsMobileTheme();
+    const haptic = usePsHaptics();
+    if (isLoading)
+        return _jsx(PsListLinkRowSkeleton, {});
+    const hasCount = count !== undefined && count > 0;
+    return (_jsxs(Pressable, { accessibilityHint: countLabel, accessibilityRole: 'button', onPress: () => {
+            haptic('light');
+            onPress();
+        }, style: ({ pressed }) => ({
+            alignItems: 'center',
+            backgroundColor: pressed
+                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                : theme.surface,
+            flexDirection: 'row',
+            gap: PsLayoutConfig.headerSlotGap,
+            minHeight: PsLayoutConfig.linkRowMinHeight,
+            paddingHorizontal: PsLayoutConfig.gutter,
+            paddingVertical: PsLayoutConfig.rowPaddingVertical,
+        }), testID: 'ps-list-link-row', children: [_jsx(View, { style: {
+                    alignItems: 'center',
+                    backgroundColor: theme.primarySoft,
+                    borderRadius: PsLayoutConfig.linkRowIconBoxRadius,
+                    height: PsLayoutConfig.linkRowIconBox,
+                    justifyContent: 'center',
+                    width: PsLayoutConfig.linkRowIconBox,
+                }, children: _jsx(PsIcon, { color: theme.primaryText, iconKey: iconKey, size: PsLayoutConfig.linkRowIconSize }) }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }), hasCount ? _jsx(PsCountBadge, { count: count, isAlert: isAlert, label: countLabel }) : null, _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ChevronRight, size: PsMobileControlConfig.iconSizeInline })] }));
+};

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

@@ -46,6 +46,7 @@ export interface PsListRowProps {
     actions?: PsMenuItem[];
     badge?: PsListRowBadge;
     hasChevron?: boolean;
+    href?: string;
     isLoading?: boolean;
     isSection?: boolean;
     isSelectable?: boolean;
@@ -53,6 +54,7 @@ export interface PsListRowProps {
     leadingSwipe?: PsMenuItem;
     leadingIcon?: PsIconKey;
     onPress?: () => void;
+    preview?: ReactNode;
     skeleton?: PsListSkeletonLayout;
     subtitle?: string;
     trailingSwipe?: PsMenuItem;
@@ -63,7 +65,7 @@ export interface PsListActionRowProps {
     children: string;
     iconKey?: PsIconKey;
     isDisabled?: boolean;
-    onPress: () => void;
+    onPress?: () => void;
     tone?: 'primary' | 'destructive';
 }
 export interface PsListContentProps {

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

@@ -4,7 +4,7 @@ import { Pressable, View } from 'react-native';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
-import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsListRowStyleService } from '../../services/ps-list-row-style-service';
 import { PsBadge } from '../ps-badge/ps-badge';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
@@ -15,9 +15,7 @@ export const PsListRowBody = ({ badge, hasChevron = false, hasMenu, isSelectable
     const hasSecondLine = subtitle !== undefined || badge !== undefined;
     return (_jsxs(Pressable, { accessibilityRole: onPress === undefined ? undefined : 'button', accessibilityState: isSelectable ? { selected: isSelected } : undefined, delayLongPress: PsLayoutConfig.longPressDelayMs, disabled: !isInteractive, onLongPress: hasMenu ? onLongPress : undefined, onPress: onPress, style: ({ pressed }) => ({
             alignItems: 'center',
-            backgroundColor: pressed
-                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
-                : theme.surface,
+            backgroundColor: PsListRowStyleService.background(isSelectable && isSelected, pressed, theme),
             flexDirection: 'row',
             gap: PsLayoutConfig.headerSlotGap,
             minHeight: hasSecondLine

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

@@ -1,2 +1,2 @@
 import type { PsListRowProps } from './ps-list-props';
-export declare const PsListRow: ({ actions, badge, hasChevron, isLoading, isSection, isSelectable, isSelected, leadingIcon, leadingSwipe, onPress, skeleton, subtitle, trailingSwipe, title, value, }: PsListRowProps) => import("react").JSX.Element;
+export declare const PsListRow: ({ actions, badge, hasChevron, href, isLoading, isSection, isSelectable, isSelected, leadingIcon, leadingSwipe, onPress, preview, skeleton, subtitle, trailingSwipe, title, value, }: PsListRowProps) => import("react").JSX.Element;

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

@@ -2,14 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { PsListService } from '../../services/ps-list-service';
 import { PsListContextMenu } from './ps-list-context-menu';
+import { PsListLinkMenu } from './ps-list-link-menu';
 import { PsListRowBody } from './ps-list-row-body';
 import { PsListRowSkeleton } from './ps-list-row-skeleton';
 import { PsListSwipeRow } from './ps-list-swipe-row';
-export const PsListRow = ({ actions, badge, hasChevron, isLoading = false, isSection, isSelectable, isSelected, leadingIcon, leadingSwipe, onPress, skeleton, subtitle, trailingSwipe, title, value, }) => {
+export const PsListRow = ({ actions, badge, hasChevron, href, isLoading = false, isSection, isSelectable, isSelected, leadingIcon, leadingSwipe, onPress, preview, skeleton, subtitle, trailingSwipe, title, value, }) => {
     const menuItems = PsListService.menuItems(actions, PsListService.swipes(leadingSwipe, trailingSwipe));
     if (isLoading)
         return (_jsx(PsListRowSkeleton, { badge: badge, isSection: isSection, leadingIcon: leadingIcon, skeleton: skeleton, subtitle: subtitle, value: value }));
     const row = (_jsx(PsListRowBody, { badge: badge, hasChevron: hasChevron, hasMenu: false, isSelectable: isSelectable, isSelected: isSelected, leadingIcon: leadingIcon, onLongPress: () => undefined, onPress: onPress, subtitle: subtitle, title: title, value: value }));
-    const body = menuItems.length === 0 ? (row) : (_jsx(PsListContextMenu, { items: menuItems, title: title, children: row }));
+    const body = href !== undefined ? (_jsx(PsListLinkMenu, { href: href, items: menuItems, preview: preview, title: title, children: row })) : menuItems.length === 0 ? (row) : (_jsx(PsListContextMenu, { items: menuItems, title: title, children: row }));
     return (_jsx(View, { accessibilityActions: menuItems.map((item) => ({ label: item.label, name: item.id })), onAccessibilityAction: (event) => menuItems.find((item) => item.id === event.nativeEvent.actionName)?.onSelect(), children: leadingSwipe === undefined && trailingSwipe === undefined ? (body) : (_jsx(PsListSwipeRow, { leading: leadingSwipe, trailing: trailingSwipe, children: body })) }));
 };

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { PallasoftProductBrand } from '@pallasoft/ps-design-system';
 import type { PsChartPaletteColors } from '../../interfaces/ps-chart-palette-colors';
 import type { PsColorSchemeChoice } from '../../interfaces/ps-color-scheme-choice';
 export interface PsMobileThemeProviderProps {
@@ -7,7 +8,8 @@ export interface PsMobileThemeProviderProps {
     colorScheme?: PsColorSchemeChoice;
     hasHaptics?: boolean;
     isReduceMotion?: boolean;
-    primaryColor: string;
-    primaryContrastColor: string;
+    primaryColor?: string;
+    primaryContrastColor?: string;
+    product?: PallasoftProductBrand;
     secondaryColor?: 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, secondaryColor, }: PsMobileThemeProviderProps) => import("react").JSX.Element;
+export declare const PsMobileThemeProvider: ({ chartPalette, children, colorScheme, hasHaptics, isReduceMotion, primaryColor, primaryContrastColor, product, secondaryColor, }: PsMobileThemeProviderProps) => import("react").JSX.Element;