@pallasoft/ps-mobile-components 1.3.0 → 1.4.0

package/dist/components/ps-document-preview-face/index.js

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

package/dist/components/ps-document-preview-face/ps-document-preview-face-props.d.ts

@@ -0,0 +1,6 @@
+import type { PsDocumentItem } from '../../interfaces/ps-document-item';
+import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+export interface PsDocumentPreviewFaceProps {
+    item: PsDocumentItem;
+    labels: PsDocumentLabels;
+}

package/dist/components/ps-document-preview-face/ps-document-preview-face-props.js

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

package/dist/components/ps-document-preview-face/ps-document-preview-face.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentPreviewFaceProps } from './ps-document-preview-face-props';
+export declare const PsDocumentPreviewFace: ({ item, labels }: PsDocumentPreviewFaceProps) => import("react").JSX.Element;

package/dist/components/ps-document-preview-face/ps-document-preview-face.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, View } from 'react-native';
+import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { PsDocumentKind } from '../../constants/ps-document-kind';
+import { usePsDocumentText } from '../../hooks/use-ps-document-text';
+import { PsDocumentPdfCover } from '../ps-document-pdf-cover/ps-document-pdf-cover';
+import { PsDocumentUnsupported } from '../ps-document-unsupported/ps-document-unsupported';
+import { PsText } from '../ps-text/ps-text';
+export const PsDocumentPreviewFace = ({ item, labels }) => {
+    const loaded = usePsDocumentText(item);
+    if (item.kind === PsDocumentKind.Image && item.source !== null)
+        return (_jsx(Image, { accessibilityLabel: item.name, resizeMode: 'contain', source: { headers: item.source.headers, uri: item.source.uri }, style: { flex: 1 } }));
+    if (item.kind === PsDocumentKind.Pdf && item.source !== null)
+        return _jsx(PsDocumentPdfCover, { item: item, labels: labels });
+    if (item.kind === PsDocumentKind.Text && loaded.text !== null)
+        return (_jsx(View, { style: { flex: 1, padding: PsDocumentConfig.previewPadding }, children: _jsx(PsText, { numberOfLines: PsDocumentConfig.previewTextLines, children: loaded.text }) }));
+    return _jsx(PsDocumentUnsupported, { item: item, labels: labels });
+};

package/dist/components/ps-document-text-page/index.d.ts

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

package/dist/components/ps-document-text-page/index.js

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

package/dist/components/ps-document-text-page/ps-document-text-page-props.d.ts

@@ -0,0 +1,6 @@
+import type { PsDocumentItem } from '../../interfaces/ps-document-item';
+import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+export interface PsDocumentTextPageProps {
+    item: PsDocumentItem;
+    labels: PsDocumentLabels;
+}

package/dist/components/ps-document-text-page/ps-document-text-page-props.js

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

package/dist/components/ps-document-text-page/ps-document-text-page.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentTextPageProps } from './ps-document-text-page-props';
+export declare const PsDocumentTextPage: ({ item, labels }: PsDocumentTextPageProps) => import("react").JSX.Element;

package/dist/components/ps-document-text-page/ps-document-text-page.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { ScrollView, View } from 'react-native';
+import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { PsDocumentLoadStatus } from '../../constants/ps-document-load-status';
+import { usePsDocumentText } from '../../hooks/use-ps-document-text';
+import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+import { PsDocumentUnsupported } from '../ps-document-unsupported/ps-document-unsupported';
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+import { PsText } from '../ps-text/ps-text';
+export const PsDocumentTextPage = ({ item, labels }) => {
+    const loaded = usePsDocumentText(item);
+    if (loaded.status === PsDocumentLoadStatus.Loading)
+        return (_jsx(View, { style: { alignItems: 'center', flex: 1, justifyContent: 'center' }, children: _jsx(PsSpinner, {}) }));
+    if (loaded.text === null)
+        return item.source === null ? (_jsx(PsDocumentUnsupported, { isOnDark: true, item: item, labels: labels })) : (_jsx(PsDocumentMessage, { description: item.name, iconKey: PsIconKey.Warning, isOnDark: true, title: labels.loadFailed }));
+    return (_jsx(View, { style: { flex: 1 }, testID: 'ps-document-text-page', children: _jsx(ScrollView, { contentContainerStyle: { padding: PsDocumentConfig.pageGutter }, showsVerticalScrollIndicator: true, children: _jsx(PsText, { isSelectable: true, tone: 'white', children: loaded.text }) }) }));
+};

package/dist/components/ps-document-unsupported/index.d.ts

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

package/dist/components/ps-document-unsupported/index.js

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

package/dist/components/ps-document-unsupported/ps-document-unsupported-props.d.ts

@@ -0,0 +1,7 @@
+import type { PsDocumentItem } from '../../interfaces/ps-document-item';
+import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+export interface PsDocumentUnsupportedProps {
+    isOnDark?: boolean;
+    item: PsDocumentItem;
+    labels: PsDocumentLabels;
+}

package/dist/components/ps-document-unsupported/ps-document-unsupported-props.js

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

package/dist/components/ps-document-unsupported/ps-document-unsupported.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentUnsupportedProps } from './ps-document-unsupported-props';
+export declare const PsDocumentUnsupported: ({ isOnDark, item, labels, }: PsDocumentUnsupportedProps) => import("react").JSX.Element;

package/dist/components/ps-document-unsupported/ps-document-unsupported.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { usePsDocumentOpen } from '../../hooks/use-ps-document-open';
+import { PsDocumentOpenService } from '../../services/ps-document-open-service';
+import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+export const PsDocumentUnsupported = ({ isOnDark = false, item, labels, }) => {
+    const opener = usePsDocumentOpen(item);
+    const canOpen = labels.open !== undefined && PsDocumentOpenService.canOpen(item);
+    return (_jsx(PsDocumentMessage, { actionLabel: canOpen && !opener.isOpening ? labels.open : undefined, description: item.name, iconKey: opener.hasFailed ? PsIconKey.Warning : PsIconKey.Doc, isOnDark: isOnDark, onAction: canOpen ? () => void opener.open() : undefined, title: opener.hasFailed ? labels.loadFailed : labels.unsupported }));
+};

package/dist/components/ps-document-viewer/ps-document-viewer.js

@@ -1,23 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { PsIconKey } from '@pallasoft/ps-icons';
 import { FlatList, Modal, StatusBar, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PsDocumentConfig } from '../../constants/ps-document-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsDocumentPdfPages } from '../../hooks/use-ps-document-pdf-pages';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsDocumentPagerService } from '../../services/ps-document-pager-service';
+import { PsDocumentViewerEntryService } from '../../services/ps-document-viewer-entry-service';
+import { PsDocumentPageStrip } from '../ps-document-page-strip/ps-document-page-strip';
 import { PsDocumentPage } from '../ps-document-page/ps-document-page';
 import { PsIconButton } from '../ps-icon-button/ps-icon-button';
 import { PsText } from '../ps-text/ps-text';
 export const PsDocumentViewer = ({ initialIndex = 0, isOpen, items, labels, onClose, }) => {
     const theme = usePsMobileTheme();
     const insets = useSafeAreaInsets();
+    const list = useRef(null);
     const [width, setWidth] = useState(0);
     const [isZoomed, setIsZoomed] = useState(false);
-    const [index, setIndex] = useState(PsDocumentPagerService.clampIndex(initialIndex, items.length));
-    const current = items[index];
+    const [currentEntry, setCurrentEntry] = useState(null);
+    const pdf = usePsDocumentPdfPages(items, isOpen);
+    const entries = PsDocumentViewerEntryService.entries(items, pdf.states);
+    const index = currentEntry === null
+        ? PsDocumentViewerEntryService.startIndex(items, entries, initialIndex)
+        : PsDocumentViewerEntryService.resolveIndex(currentEntry, entries, 0);
+    const current = entries[index];
+    useEffect(() => {
+        if (width > 0 && entries.length > 0)
+            list.current?.scrollToIndex({ animated: false, index });
+    }, [entries.length, index, width]);
     return (_jsxs(Modal, { animationType: 'fade', onRequestClose: onClose, presentationStyle: 'fullScreen', visible: isOpen, children: [_jsx(StatusBar, { barStyle: 'light-content' }), _jsxs(GestureHandlerRootView, { style: {
                     backgroundColor: PsDocumentConfig.backdropColor,
                     flex: 1,
@@ -28,12 +41,19 @@ export const PsDocumentViewer = ({ initialIndex = 0, isOpen, items, labels, onCl
                             flexDirection: 'row',
                             paddingHorizontal: PsDocumentConfig.barPaddingHorizontal,
                             paddingVertical: PsDocumentConfig.barPaddingVertical,
-                        }, children: [_jsx(PsIconButton, { color: theme.white, iconKey: PsIconKey.Close, label: labels.close, onPress: onClose }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [PsDocumentPagerService.hasMany(items.length) ? (_jsx(PsText, { tone: 'white', weight: 'semibold', children: PsDocumentPagerService.counter(index, items.length) })) : null, current === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'white', variant: 'caption', children: current.name }))] }), _jsx(View, { style: { width: PsMobileControlConfig.controlHeights.default } })] }), _jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { flex: 1 }, testID: 'ps-document-viewer-pager', children: width === 0 ? null : (_jsx(FlatList, { data: items, getItemLayout: (_data, position) => ({
+                        }, children: [_jsx(PsIconButton, { color: theme.white, iconKey: PsIconKey.Close, label: labels.close, onPress: onClose }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [PsDocumentPagerService.hasMany(entries.length) ? (_jsx(PsText, { tone: 'white', weight: 'semibold', children: PsDocumentPagerService.counter(index, entries.length) })) : null, current === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'white', variant: 'caption', children: current.item.name }))] }), _jsx(View, { style: { width: PsMobileControlConfig.controlHeights.default } })] }), _jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { flex: 1 }, testID: 'ps-document-viewer-pager', children: width === 0 ? null : (_jsx(FlatList, { data: entries, getItemLayout: (_data, position) => ({
                                 index: position,
                                 length: width,
                                 offset: PsDocumentPagerService.offset(position, width),
-                            }), horizontal: true, initialScrollIndex: index, keyExtractor: (item) => item.id, onMomentumScrollEnd: (event) => {
-                                setIndex(PsDocumentPagerService.pageIndex(event.nativeEvent.contentOffset.x, width, items.length));
+                            }), horizontal: true, initialScrollIndex: index, keyExtractor: (entry) => entry.id, onMomentumScrollEnd: (event) => {
+                                const next = entries[PsDocumentPagerService.pageIndex(event.nativeEvent.contentOffset.x, width, entries.length)];
+                                if (next !== undefined)
+                                    setCurrentEntry(next);
                                 setIsZoomed(false);
-                            }, pagingEnabled: true, renderItem: ({ item }) => (_jsx(View, { style: { width }, children: _jsx(PsDocumentPage, { item: item, labels: labels, onDismiss: onClose, onZoomChange: setIsZoomed }) })), scrollEnabled: !isZoomed, showsHorizontalScrollIndicator: false, testID: 'ps-document-viewer-list' })) })] })] }));
+                            }, pagingEnabled: true, ref: list, renderItem: ({ item: entry }) => (_jsx(View, { style: { width }, children: _jsx(PsDocumentPage, { item: entry.item, labels: labels, onDismiss: onClose, onRetry: pdf.retry, onZoomChange: setIsZoomed, status: entry.status }) })), scrollEnabled: !isZoomed, showsHorizontalScrollIndicator: false, testID: 'ps-document-viewer-list' })) }), PsDocumentViewerEntryService.hasStrip(items, entries) ? (_jsx(PsDocumentPageStrip, { entries: entries, index: index, onSelect: (position) => {
+                            const entry = entries[position];
+                            if (entry !== undefined)
+                                setCurrentEntry(entry);
+                            setIsZoomed(false);
+                        } })) : null] })] }));
 };

package/dist/components/ps-header-action/index.d.ts

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

package/dist/components/ps-header-action/index.js

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

package/dist/components/ps-header-action/ps-header-action-props.d.ts

@@ -0,0 +1,6 @@
+import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+export interface PsHeaderActionProps {
+    iconKey: PsMobileIconKey;
+    label: string;
+    onPress: () => void;
+}

package/dist/components/ps-header-action/ps-header-action-props.js

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

package/dist/components/ps-header-action/ps-header-action.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsHeaderActionProps } from './ps-header-action-props';
+export declare const PsHeaderAction: ({ iconKey, label, onPress }: PsHeaderActionProps) => null;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePsHeaderRight } from '../../hooks/use-ps-header-right';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsIconButton } from '../ps-icon-button/ps-icon-button';
+export const PsHeaderAction = ({ iconKey, label, onPress }) => {
+    const theme = usePsMobileTheme();
+    usePsHeaderRight(_jsx(PsIconButton, { backgroundColor: 'transparent', color: theme.ink, iconKey: iconKey, label: label, onPress: onPress, variant: 'header' }));
+    return null;
+};

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

@@ -0,0 +1,2 @@
+import type { PsHeaderActionProps } from './ps-header-action-props';
+export declare const PsHeaderAction: ({ iconKey, label, onPress }: PsHeaderActionProps) => import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from 'expo-router';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+export const PsHeaderAction = ({ iconKey, label, onPress }) => {
+    const haptic = usePsHaptics();
+    return (_jsx(Stack.Toolbar, { placement: 'right', children: _jsx(Stack.Toolbar.Button, { accessibilityLabel: label, icon: PsActionMenuService.symbol({ iconKey, id: label, label, onSelect: onPress }), onPress: () => {
+                haptic('light');
+                onPress();
+            } }) }));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsHeaderMenuProps {
+    iconKey?: PsMobileIconKey;
+    items: PsMenuItem[];
+    label: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsHeaderMenuProps } from './ps-header-menu-props';
+export declare const PsHeaderMenu: ({ iconKey, items, label, }: PsHeaderMenuProps) => null;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+import { usePsHeaderRight } from '../../hooks/use-ps-header-right';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsActionMenu } from '../ps-action-menu/ps-action-menu';
+import { PsIconButton } from '../ps-icon-button/ps-icon-button';
+export const PsHeaderMenu = ({ iconKey = PsMobileIconKey.More, items, label, }) => {
+    const theme = usePsMobileTheme();
+    usePsHeaderRight(items.length === 0 ? null : (_jsx(PsActionMenu, { items: items, label: label, children: ({ open }) => (_jsx(PsIconButton, { backgroundColor: 'transparent', color: theme.ink, iconKey: iconKey, label: label, onPress: open, variant: 'header' })) })));
+    return null;
+};

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

@@ -0,0 +1,2 @@
+import type { PsHeaderMenuProps } from './ps-header-menu-props';
+export declare const PsHeaderMenu: ({ iconKey, items, label, }: PsHeaderMenuProps) => import("react").JSX.Element | null;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from 'expo-router';
+import { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+export const PsHeaderMenu = ({ iconKey = PsMobileIconKey.More, items, label, }) => {
+    const haptic = usePsHaptics();
+    const entries = PsActionMenuService.consistent([{ id: 'items', items }])[0];
+    if (entries === undefined)
+        return null;
+    return (_jsx(Stack.Toolbar, { placement: 'right', children: _jsx(Stack.Toolbar.Menu, { accessibilityLabel: label, icon: PsActionMenuService.symbol({
+                iconKey,
+                id: 'more',
+                label,
+                onSelect: () => undefined,
+            }), children: entries.items.map((item) => (_jsx(Stack.Toolbar.MenuAction, { destructive: item.isDanger === true, disabled: item.isDisabled === true, icon: PsActionMenuService.symbol(item), onPress: () => {
+                    haptic('selection');
+                    item.onSelect();
+                }, children: item.label }, item.id))) }) }));
+};

package/dist/components/ps-icon-button/ps-icon-button.js

@@ -4,10 +4,12 @@ import { Pressable } 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 { PsPageHeaderContext } from '../../contexts/ps-page-header-context';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
 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';
 export const PsIconButton = ({ backgroundColor, color, iconKey, isDisabled = false, label, onPress, size = 'default', testID, variant, }) => {
     const haptic = usePsHaptics();
@@ -17,7 +19,7 @@ export const PsIconButton = ({ backgroundColor, color, iconKey, isDisabled = fal
     const dimension = isHeader
         ? PsPageHeaderConfig.buttonSize
         : PsMobileControlConfig.controlHeights[size];
-    return (_jsx(Pressable, { accessibilityLabel: label, accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, hitSlop: PsLayoutConfig.hitSlop, onPress: onPress === undefined
+    return (_jsx(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Borderless), accessibilityLabel: label, accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, hitSlop: PsLayoutConfig.hitSlop, onPress: onPress === undefined
             ? undefined
             : () => {
                 haptic('light');
@@ -27,16 +29,14 @@ export const PsIconButton = ({ backgroundColor, color, iconKey, isDisabled = fal
             backgroundColor: backgroundColor !== undefined
                 ? backgroundColor
                 : isHeader
-                    ? PsMobileColorService.withAlpha(theme.ink, pressed
-                        ? PsMobileControlConfig.neutralAlpha + PsMobileControlConfig.pressedAlpha
-                        : PsMobileControlConfig.neutralAlpha)
+                    ? PsStateService.headerFill(theme, pressed)
                     : pressed
-                        ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                        ? PsStateService.pressedFill(theme, 'transparent')
                         : 'transparent',
             borderRadius: isHeader ? dimension / 2 : PsMobileControlConfig.controlRadius,
             height: dimension,
             justifyContent: 'center',
-            opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+            opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
             width: dimension,
         }), children: _jsx(PsIcon, { color: color === undefined ? theme.ink : color, iconKey: iconKey, size: isHeader ? PsPageHeaderConfig.iconSize : undefined }) }));
 };

package/dist/components/ps-kpi-card/ps-kpi-card.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from 'react-native';
 import { PsChartConfig } from '../../constants/ps-chart-config';
 import { PsChartSkeletonVariant } from '../../constants/ps-chart-skeleton-variant';
 import { PsChartFrame } from '../ps-chart-frame/ps-chart-frame';
@@ -8,5 +7,5 @@ import { PsSparkline } from '../ps-sparkline/ps-sparkline';
 export const PsKpiCard = ({ delta, isLoading = false, period, title, value, values, }) => {
     if (isLoading)
         return (_jsx(PsChartFrame, { children: _jsx(PsChartSkeleton, { height: PsChartConfig.sparklineHeight * 2, variant: PsChartSkeletonVariant.Line }) }));
-    return (_jsx(PsChartFrame, { delta: delta, period: period, title: title, value: value, children: values === undefined ? _jsx(View, {}) : _jsx(PsSparkline, { values: values }) }));
+    return (_jsx(PsChartFrame, { delta: delta, period: period, title: title, value: value, children: values === undefined ? null : _jsx(PsSparkline, { values: values }) }));
 };

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

@@ -2,23 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 PsListActionRow = ({ children, iconKey, isDisabled = false, onPress, tone = 'primary', }) => {
     const theme = usePsMobileTheme();
     const isDestructive = tone === 'destructive';
     const color = isDestructive ? theme.danger : theme.ink;
-    return (_jsxs(Pressable, { accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, onPress: onPress, style: ({ pressed }) => ({
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, isDestructive ? PsRippleKind.Danger : PsRippleKind.Surface), accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, onPress: onPress, 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,
-            opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+            opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
             paddingHorizontal: PsLayoutConfig.gutter,
         }), testID: 'ps-list-action-row', children: [iconKey === undefined ? null : _jsx(PsIcon, { color: color, iconKey: iconKey }), _jsx(PsText, { style: { color }, weight: 'semibold', children: children })] }));
 };

package/dist/components/ps-list/ps-list-context-menu.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsListContextMenuProps } from './ps-list-context-menu';
+export declare const PsListContextMenu: ({ children, items, title }: PsListContextMenuProps) => import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsListRowMenu } from './ps-list-row-menu';
+export const PsListContextMenu = ({ children, items, title }) => (_jsx(PsListRowMenu, { items: items, title: title, children: children }));

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

@@ -0,0 +1,2 @@
+import type { PsListLinkMenuProps } from './ps-list-link-menu';
+export declare const PsListLinkMenu: ({ children, href, items, title }: PsListLinkMenuProps) => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRouter } from 'expo-router';
+import { PsListRowMenu } from './ps-list-row-menu';
+export const PsListLinkMenu = ({ children, href, items, title }) => {
+    const router = useRouter();
+    return (_jsx(PsListRowMenu, { items: items, onPress: () => router.push(href), title: title, children: children }));
+};

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

@@ -3,9 +3,11 @@ 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 { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
 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 { PsCountBadge } from '../ps-count-badge/ps-count-badge';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
@@ -16,14 +18,12 @@ export const PsListLinkRow = ({ count, countLabel, iconKey, isAlert = false, isL
     if (isLoading)
         return _jsx(PsListLinkRowSkeleton, {});
     const hasCount = count !== undefined && count > 0;
-    return (_jsxs(Pressable, { accessibilityHint: countLabel, accessibilityRole: 'button', onPress: () => {
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityHint: countLabel, accessibilityRole: 'button', onPress: () => {
             haptic('light');
             onPress();
         }, 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: PsLayoutConfig.headerSlotGap,
             minHeight: PsLayoutConfig.linkRowMinHeight,

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

@@ -51,6 +51,7 @@ export interface PsListRowProps {
     isSection?: boolean;
     isSelectable?: boolean;
     isSelected?: boolean;
+    isValueStacked?: boolean;
     leadingSwipe?: PsMenuItem;
     leadingIcon?: PsIconKey;
     onPress?: () => void;

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

@@ -1,6 +1,6 @@
 import type { PsListRowProps } from './ps-list-props';
-export interface PsListRowBodyProps extends Pick<PsListRowProps, 'badge' | 'hasChevron' | 'isSelectable' | 'isSelected' | 'leadingIcon' | 'onPress' | 'subtitle' | 'title' | 'value'> {
+export interface PsListRowBodyProps extends Pick<PsListRowProps, 'badge' | 'hasChevron' | 'isSelectable' | 'isSelected' | 'isValueStacked' | 'leadingIcon' | 'onPress' | 'subtitle' | 'title' | 'value'> {
     hasMenu: boolean;
     onLongPress: () => void;
 }
-export declare const PsListRowBody: ({ badge, hasChevron, hasMenu, isSelectable, isSelected, leadingIcon, onLongPress, onPress, subtitle, title, value, }: PsListRowBodyProps) => import("react").JSX.Element;
+export declare const PsListRowBody: ({ badge, hasChevron, hasMenu, isSelectable, isSelected, isValueStacked, leadingIcon, onLongPress, onPress, subtitle, title, value, }: PsListRowBodyProps) => import("react").JSX.Element;

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

@@ -3,17 +3,20 @@ 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 { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsListRowStyleService } from '../../services/ps-list-row-style-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsBadge } from '../ps-badge/ps-badge';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
 import { PsListRowSelectMark } from './ps-list-row-select-mark';
-export const PsListRowBody = ({ badge, hasChevron = false, hasMenu, isSelectable = false, isSelected = false, leadingIcon, onLongPress, onPress, subtitle, title, value, }) => {
+export const PsListRowBody = ({ badge, hasChevron = false, hasMenu, isSelectable = false, isSelected = false, isValueStacked = false, leadingIcon, onLongPress, onPress, subtitle, title, value, }) => {
     const theme = usePsMobileTheme();
     const isInteractive = onPress !== undefined || hasMenu;
     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 }) => ({
+    const isStacked = isValueStacked && value !== undefined;
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), 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: PsListRowStyleService.background(isSelectable && isSelected, pressed, theme),
             flexDirection: 'row',
@@ -34,11 +37,11 @@ export const PsListRowBody = ({ badge, hasChevron = false, hasMenu, isSelectable
                             alignItems: 'center',
                             flexDirection: 'row',
                             gap: PsLayoutConfig.headerSlotGap,
-                        }, children: [_jsx(PsText, { numberOfLines: 1, style: { flex: 1, flexShrink: 1 }, weight: 'semibold', children: title }), value === undefined ? null : (_jsx(PsText, { ellipsizeMode: 'middle', numberOfLines: 1, style: {
+                        }, children: [_jsx(PsText, { numberOfLines: 1, style: { flex: 1, flexShrink: 1 }, tone: isStacked ? 'muted' : 'ink', variant: isStacked ? 'small' : undefined, weight: 'semibold', children: title }), value === undefined || isStacked ? null : (_jsx(PsText, { ellipsizeMode: 'middle', numberOfLines: 1, style: {
                                     flexShrink: 1,
                                     maxWidth: PsLayoutConfig.rowValueMaxWidth,
                                     textAlign: 'right',
-                                }, variant: 'numeric', children: value }))] }), hasSecondLine ? (_jsxs(View, { style: {
+                                }, variant: 'numeric', children: value }))] }), isStacked ? _jsx(PsText, { children: value }) : null, hasSecondLine ? (_jsxs(View, { style: {
                             alignItems: 'center',
                             flexDirection: 'row',
                             gap: PsLayoutConfig.headerSlotGap,

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

@@ -0,0 +1,10 @@
+import { type ReactElement } from 'react';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+import type { PsListRowBodyProps } from './ps-list-row-body';
+export interface PsListRowMenuProps {
+    children: ReactElement<PsListRowBodyProps>;
+    items: PsMenuItem[];
+    onPress?: () => void;
+    title: string;
+}
+export declare const PsListRowMenu: ({ children, items, onPress, title }: PsListRowMenuProps) => import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement } from 'react';
+import { View } from 'react-native';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMenuAnchor } from '../../hooks/use-ps-menu-anchor';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+import { PsMenuPopup } from '../ps-menu-popup/ps-menu-popup';
+import { PsMenuPopupHeader } from '../ps-menu-popup/ps-menu-popup-header';
+import { PsMenuPopupRow } from '../ps-menu-popup/ps-menu-popup-row';
+export const PsListRowMenu = ({ children, items, onPress, title }) => {
+    const haptic = usePsHaptics();
+    const menu = usePsMenuAnchor();
+    const entries = PsActionMenuService.flatten(PsActionMenuService.sections(items, undefined));
+    const hasMenu = entries.length > 0;
+    return (_jsxs(View, { collapsable: false, ref: menu.ref, children: [cloneElement(children, {
+                hasMenu,
+                onLongPress: () => {
+                    haptic('medium');
+                    menu.open();
+                },
+                onPress: onPress === undefined ? children.props.onPress : onPress,
+            }), menu.anchor === undefined ? null : (_jsxs(PsMenuPopup, { anchor: menu.anchor, onClose: menu.close, children: [_jsx(PsMenuPopupHeader, { title: title }), entries.map((item) => (_jsx(PsMenuPopupRow, { iconKey: item.iconKey, isChecked: item.isChecked, isDanger: item.isDanger, isDisabled: item.isDisabled, label: item.label, onPress: () => {
+                            menu.close();
+                            haptic('selection');
+                            item.onSelect();
+                        } }, item.id)))] }))] }));
+};

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, href, isLoading, isSection, isSelectable, isSelected, leadingIcon, leadingSwipe, onPress, preview, skeleton, subtitle, trailingSwipe, title, value, }: PsListRowProps) => import("react").JSX.Element;
+export declare const PsListRow: ({ actions, badge, hasChevron, href, isLoading, isSection, isSelectable, isSelected, isValueStacked, leadingIcon, leadingSwipe, onPress, preview, skeleton, subtitle, trailingSwipe, title, value, }: PsListRowProps) => import("react").JSX.Element;

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

@@ -6,11 +6,11 @@ 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, href, isLoading = false, isSection, isSelectable, isSelected, leadingIcon, leadingSwipe, onPress, preview, skeleton, subtitle, trailingSwipe, title, value, }) => {
+export const PsListRow = ({ actions, badge, hasChevron, href, isLoading = false, isSection, isSelectable, isSelected, isValueStacked, 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 row = (_jsx(PsListRowBody, { badge: badge, hasChevron: hasChevron, hasMenu: false, isSelectable: isSelectable, isSelected: isSelected, isValueStacked: isValueStacked, leadingIcon: leadingIcon, onLongPress: () => undefined, onPress: onPress, subtitle: subtitle, title: title, value: value }));
     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-list/ps-list-select-row.js

@@ -6,6 +6,7 @@ import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config'
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsNativeMenuService } from '../../services/ps-native-menu-service';
 import { PsSelectService } from '../../services/ps-select-service';
+import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsNativeMenu } from '../ps-native-menu/ps-native-menu';
 import { PsText } from '../ps-text/ps-text';
@@ -20,7 +21,7 @@ export const PsListSelectRow = ({ isDisabled = false, isLoading = false, onChang
                 flexDirection: 'row',
                 gap: PsLayoutConfig.headerSlotGap,
                 minHeight: PsLayoutConfig.rowMinHeight,
-                opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+                opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
                 paddingHorizontal: PsLayoutConfig.gutter,
                 paddingVertical: PsLayoutConfig.rowPaddingVertical,
             }, testID: 'ps-list-select-row', children: [_jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'small', children: subtitle }))] }), valueAccessory, _jsx(PsText, { numberOfLines: 1, style: { maxWidth: PsLayoutConfig.rowValueMaxWidth }, tone: 'muted', children: PsSelectService.selectedLabel(options, value) }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Sort, size: PsMobileControlConfig.iconSizeInline })] })) }));

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

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