@pallasoft/ps-mobile-components 1.3.0 → 1.4.0

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

@@ -18,6 +18,7 @@ export const PsActionMenuEntry = ({ item }) => {
         return (_jsx(Button, { modifiers: [
                 disabled(item.isDisabled === true),
                 ...(item.isDanger === true ? [tint(theme.danger)] : []),
+                ...(item.isWarning === true ? [tint(theme.warning)] : []),
             ], onPress: () => {
                 haptic('selection');
                 item.onSelect();

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

@@ -1,38 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useState } from 'react';
-import { DropdownMenu, DropdownMenuItem, HorizontalDivider, RNHostView, Text, } from '@expo/ui/jetpack-compose';
-import { PsNativeMenuConfig } from '../../constants/ps-native-menu-config';
+import { Fragment } from 'react';
+import { View } from 'react-native';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
-import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsMenuAnchor } from '../../hooks/use-ps-menu-anchor';
 import { PsActionMenuService } from '../../services/ps-action-menu-service';
-import { PsHostScope } from '../ps-host-scope/ps-host-scope';
+import { PsMenuPopup } from '../ps-menu-popup/ps-menu-popup';
+import { PsMenuPopupDivider } from '../ps-menu-popup/ps-menu-popup-divider';
+import { PsMenuPopupHeader } from '../ps-menu-popup/ps-menu-popup-header';
+import { PsMenuPopupRow } from '../ps-menu-popup/ps-menu-popup-row';
 import { PsActionMenuTrigger } from './ps-action-menu-trigger';
 export const PsActionMenu = ({ children, header, isDisabled = false, items, label, sections, }) => {
     const haptic = usePsHaptics();
-    const theme = usePsMobileTheme();
-    const [isOpen, setIsOpen] = useState(false);
+    const menu = usePsMenuAnchor();
     const groups = PsActionMenuService.sections(items, sections);
-    return (_jsx(PsHostScope, { matchContents: true, children: _jsxs(DropdownMenu, { color: theme.surface, expanded: isOpen, onDismissRequest: () => setIsOpen(false), children: [_jsxs(DropdownMenu.Items, { children: [header === undefined ? null : (_jsx(DropdownMenuItem, { enabled: false, children: _jsx(DropdownMenuItem.Text, { children: _jsx(Text, { style: { fontWeight: PsNativeMenuConfig.selectedWeight }, children: header.subtitle === undefined
-                                        ? header.title
-                                        : `${header.title}\n${header.subtitle}` }) }) }, 'header')), groups.map((group, index) => (_jsxs(Fragment, { children: [index > 0 || header !== undefined ? _jsx(HorizontalDivider, {}) : null, PsActionMenuService.flatten([group]).map((item) => (_jsx(DropdownMenuItem, { elementColors: {
-                                        textColor: item.isDanger
-                                            ? theme.danger
-                                            : item.isChecked
-                                                ? theme.primaryText
-                                                : theme.ink,
-                                    }, enabled: item.isDisabled !== true, onClick: () => {
-                                        setIsOpen(false);
-                                        haptic('selection');
-                                        item.onSelect();
-                                    }, children: _jsx(DropdownMenuItem.Text, { children: _jsx(Text, { style: {
-                                                fontWeight: item.isChecked
-                                                    ? PsNativeMenuConfig.selectedWeight
-                                                    : PsNativeMenuConfig.unselectedWeight,
-                                            }, children: item.label }) }) }, item.id)))] }, group.id)))] }), _jsx(DropdownMenu.Trigger, { children: _jsx(RNHostView, { matchContents: true, children: _jsx(PsActionMenuTrigger, { isDisabled: isDisabled, label: label, state: {
-                                isOpen,
-                                open: () => {
-                                    if (!isDisabled)
-                                        setIsOpen(true);
-                                },
-                            }, children: children }) }) })] }) }));
+    return (_jsxs(View, { collapsable: false, ref: menu.ref, children: [_jsx(PsActionMenuTrigger, { isDisabled: isDisabled, label: label, state: {
+                    isOpen: menu.anchor !== undefined,
+                    open: () => {
+                        if (!isDisabled)
+                            menu.open();
+                    },
+                }, children: children }), menu.anchor === undefined ? null : (_jsxs(PsMenuPopup, { anchor: menu.anchor, onClose: menu.close, children: [header === undefined ? null : (_jsx(PsMenuPopupHeader, { subtitle: header.subtitle, title: header.title })), groups.map((group, index) => (_jsxs(Fragment, { children: [index > 0 || header !== undefined ? _jsx(PsMenuPopupDivider, {}) : null, PsActionMenuService.flatten([group]).map((item) => (_jsx(PsMenuPopupRow, { iconKey: item.iconKey, isChecked: item.isChecked, isDanger: item.isDanger, isDisabled: item.isDisabled, isWarning: item.isWarning, label: item.label, onPress: () => {
+                                    menu.close();
+                                    haptic('selection');
+                                    item.onSelect();
+                                }, subtitle: item.subtitle }, item.id)))] }, group.id)))] }))] }));
 };

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

@@ -6,9 +6,11 @@ import Animated, { FadeInDown } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 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 { PsActionSheetService } from '../../services/ps-action-sheet-service';
-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 PsActionSheet = ({ cancelLabel, isOpen, items, onClose, title, }) => {
@@ -28,7 +30,7 @@ export const PsActionSheet = ({ cancelLabel, isOpen, items, onClose, title, }) =
                         borderWidth: 1,
                         paddingBottom: insets.bottom + PsLayoutConfig.sheetFooterGap,
                         paddingTop: PsLayoutConfig.sheetFooterGap,
-                    }, testID: 'ps-action-sheet', children: [title === undefined ? null : (_jsx(View, { style: { paddingHorizontal: PsLayoutConfig.gutter, paddingVertical: 8 }, children: _jsx(PsText, { tone: 'muted', variant: 'label', children: title }) })), items.map((item) => (_jsxs(Pressable, { accessibilityRole: 'menuitem', accessibilityState: { disabled: item.isDisabled === true }, disabled: item.isDisabled, onPress: () => {
+                    }, testID: 'ps-action-sheet', children: [title === undefined ? null : (_jsx(View, { style: { paddingHorizontal: PsLayoutConfig.gutter, paddingVertical: 8 }, children: _jsx(PsText, { tone: 'muted', variant: 'label', children: title }) })), items.map((item) => (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'menuitem', accessibilityState: { disabled: item.isDisabled === true }, disabled: item.isDisabled, onPress: () => {
                                 pending.current = item.onSelect;
                                 onClose();
                                 if (!PsActionSheetService.runsOnDismiss())
@@ -36,12 +38,12 @@ export const PsActionSheet = ({ cancelLabel, isOpen, items, onClose, title, }) =
                             }, style: ({ pressed }) => ({
                                 alignItems: 'center',
                                 backgroundColor: pressed
-                                    ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                                    ? PsStateService.pressedFill(theme, 'transparent')
                                     : 'transparent',
                                 flexDirection: 'row',
                                 gap: PsMobileControlConfig.rowSpacing,
                                 minHeight: PsLayoutConfig.actionSheetRowHeight,
-                                opacity: item.isDisabled === true ? PsMobileControlConfig.disabledOpacity : 1,
+                                opacity: item.isDisabled === true ? PsStateService.disabledOpacity() : 1,
                                 paddingHorizontal: PsLayoutConfig.gutter,
                             }), children: [item.iconKey === undefined ? null : (_jsx(PsIcon, { color: item.isDanger === true ? theme.danger : theme.ink, iconKey: item.iconKey })), _jsx(PsText, { style: { flex: 1 }, tone: item.isDanger === true ? 'danger' : 'ink', weight: 'medium', children: item.label }), item.isChecked === true ? (_jsx(PsIcon, { color: theme.primary, iconKey: PsIconKey.Check })) : null] }, item.id))), cancelLabel === undefined ? null : (_jsx(Pressable, { accessibilityRole: 'button', onPress: onClose, style: {
                                 alignItems: 'center',

package/dist/components/ps-barcode-scanner-sheet/index.d.ts

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

package/dist/components/ps-barcode-scanner-sheet/index.js

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

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

@@ -0,0 +1,11 @@
+import type { PsBarcodeScan } from '../../interfaces/ps-barcode-scan';
+import type { PsBarcodeScannerLabels } from '../../interfaces/ps-barcode-scanner-labels';
+export interface PsBarcodeScannerSheetProps {
+    barcodeTypes?: string[];
+    isContinuous?: boolean;
+    isOpen: boolean;
+    labels: PsBarcodeScannerLabels;
+    message?: string;
+    onClose: () => void;
+    onScan: (scan: PsBarcodeScan) => void;
+}

package/dist/components/ps-barcode-scanner-sheet/ps-barcode-scanner-sheet-props.js

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

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

@@ -0,0 +1,2 @@
+import type { PsBarcodeScannerSheetProps } from './ps-barcode-scanner-sheet-props';
+export declare const PsBarcodeScannerSheet: ({ barcodeTypes, isContinuous, isOpen, labels, message, onClose, onScan, }: PsBarcodeScannerSheetProps) => import("react").JSX.Element;

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Common } from '@pallasoft/ps-utilities';
+import { Linking, Modal, StatusBar, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsBarcodePermission } from '../../constants/ps-barcode-permission';
+import { PsBarcodeScannerConfig } from '../../constants/ps-barcode-scanner-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsBarcodeScannerService } from '../../services/ps-barcode-scanner-service';
+import { PsButton } from '../ps-button/ps-button';
+import { PsIconButton } from '../ps-icon-button/ps-icon-button';
+import { PsText } from '../ps-text/ps-text';
+export const PsBarcodeScannerSheet = ({ barcodeTypes, isContinuous = false, isOpen, labels, message, onClose, onScan, }) => {
+    const theme = usePsMobileTheme();
+    const insets = useSafeAreaInsets();
+    const { width } = useWindowDimensions();
+    const play = usePsHaptics();
+    const Camera = useMemo(() => PsBarcodeScannerService.camera(), []);
+    const [permission, setPermission] = useState(PsBarcodePermission.checking);
+    const [isTorchOn, setIsTorchOn] = useState(false);
+    const lastRead = useRef(null);
+    const frame = PsBarcodeScannerService.frameSize(width);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        lastRead.current = null;
+        setIsTorchOn(false);
+        setPermission(PsBarcodePermission.checking);
+        void PsBarcodeScannerService.requestPermission().then((isGranted) => setPermission(isGranted ? PsBarcodePermission.granted : PsBarcodePermission.denied));
+    }, [isOpen]);
+    const read = (scan) => {
+        const data = PsBarcodeScannerService.normalise(scan.data);
+        const now = Common.DateService.nowMilliseconds();
+        if (!PsBarcodeScannerService.accept(lastRead.current, data, now))
+            return;
+        lastRead.current = { at: now, data };
+        play('success');
+        onScan({ data, type: scan.type });
+        if (!isContinuous)
+            onClose();
+    };
+    return (_jsxs(Modal, { animationType: 'fade', onRequestClose: onClose, presentationStyle: 'fullScreen', visible: isOpen, children: [_jsx(StatusBar, { barStyle: 'light-content' }), _jsxs(View, { style: { backgroundColor: PsBarcodeScannerConfig.backdropColor, flex: 1 }, testID: 'ps-barcode-scanner', children: [Camera !== null && permission === PsBarcodePermission.granted ? (_jsx(Camera, { barcodeScannerSettings: {
+                            barcodeTypes: PsBarcodeScannerService.types(barcodeTypes),
+                        }, enableTorch: isTorchOn, facing: PsBarcodeScannerConfig.facing, onBarcodeScanned: read, style: StyleSheet.absoluteFill })) : null, permission === PsBarcodePermission.granted ? (_jsx(View, { pointerEvents: 'none', style: [
+                            StyleSheet.absoluteFill,
+                            {
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            },
+                        ], children: _jsx(View, { style: {
+                                borderColor: theme.primary,
+                                borderRadius: PsBarcodeScannerConfig.frameRadius,
+                                borderWidth: PsBarcodeScannerConfig.frameBorderWidth,
+                                height: frame.height,
+                                width: frame.width,
+                            }, testID: 'ps-barcode-scanner-frame' }) })) : null, permission === PsBarcodePermission.denied ? (_jsxs(View, { style: [
+                            StyleSheet.absoluteFill,
+                            {
+                                alignItems: 'center',
+                                gap: PsBarcodeScannerConfig.barGap,
+                                justifyContent: 'center',
+                                padding: PsBarcodeScannerConfig.footerPadding,
+                            },
+                        ], children: [_jsx(PsText, { align: 'center', tone: 'white', children: labels.denied }), _jsx(PsButton, { onPress: () => void Linking.openSettings(), variant: 'secondary', children: labels.openSettings })] })) : null, _jsxs(View, { style: {
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                            padding: PsBarcodeScannerConfig.barPadding,
+                            paddingTop: insets.top + PsBarcodeScannerConfig.barPadding,
+                        }, children: [_jsx(PsIconButton, { backgroundColor: theme.overlay, color: theme.white, iconKey: PsIconKey.Close, label: labels.close, onPress: onClose, testID: 'ps-barcode-scanner-close' }), permission === PsBarcodePermission.granted ? (_jsx(PsIconButton, { backgroundColor: isTorchOn ? theme.primary : theme.overlay, color: isTorchOn ? theme.primaryContrast : theme.white, iconKey: PsIconKey.Flash, label: isTorchOn ? labels.torchOff : labels.torchOn, onPress: () => setIsTorchOn((current) => !current), testID: 'ps-barcode-scanner-torch' })) : null] }), _jsx(View, { style: { flex: 1 } }), _jsxs(View, { style: {
+                            alignItems: 'center',
+                            gap: PsBarcodeScannerConfig.footerGap,
+                            padding: PsBarcodeScannerConfig.footerPadding,
+                            paddingBottom: insets.bottom + PsBarcodeScannerConfig.footerPadding,
+                        }, children: [message === undefined ? null : (_jsx(View, { style: {
+                                    backgroundColor: theme.overlay,
+                                    borderRadius: PsBarcodeScannerConfig.pillRadius,
+                                    paddingHorizontal: PsBarcodeScannerConfig.pillPaddingHorizontal,
+                                    paddingVertical: PsBarcodeScannerConfig.pillPaddingVertical,
+                                }, children: _jsx(PsText, { align: 'center', testID: 'ps-barcode-scanner-message', tone: 'white', weight: 'semibold', children: message }) })), permission === PsBarcodePermission.granted ? (_jsx(PsText, { align: 'center', tone: 'white', variant: 'small', children: labels.hint })) : null] })] })] }));
+};

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

@@ -4,6 +4,8 @@ import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config'
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsButtonStyleService } from '../../services/ps-button-style-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
+import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsSpinner } from '../ps-spinner/ps-spinner';
 import { PsText } from '../ps-text/ps-text';
@@ -13,7 +15,7 @@ export const PsButton = ({ children, isDisabled = false, isFullWidth = false, is
     const style = PsButtonStyleService.resolve(variant, theme);
     const isInactive = isDisabled || isLoading;
     const iconSize = PsMobileControlConfig.iconSizeInline;
-    return (_jsx(Pressable, { accessibilityLabel: isLoading && loadingLabel !== undefined ? loadingLabel : children, accessibilityRole: 'button', accessibilityState: { busy: isLoading, disabled: isInactive }, disabled: isInactive, onPress: onPress === undefined
+    return (_jsx(Pressable, { android_ripple: PsRippleService.resolve(theme, PsButtonStyleService.rippleKind(variant)), accessibilityLabel: isLoading && loadingLabel !== undefined ? loadingLabel : children, accessibilityRole: 'button', accessibilityState: { busy: isLoading, disabled: isInactive }, disabled: isInactive, onPress: onPress === undefined
             ? undefined
             : () => {
                 haptic('light');
@@ -27,7 +29,7 @@ export const PsButton = ({ children, isDisabled = false, isFullWidth = false, is
             borderWidth: 1,
             height: PsMobileControlConfig.controlHeights[size],
             justifyContent: 'center',
-            opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+            opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
             paddingHorizontal: PsMobileControlConfig.controlPaddingX[size],
         }), children: isLoading ? (_jsx(PsSpinner, { color: style.foreground })) : (_jsxs(View, { style: {
                 alignItems: 'center',

package/dist/components/ps-cartesian-chart/ps-cartesian-chart.js

@@ -12,6 +12,7 @@ import { PsChartKindService } from '../../services/ps-chart-kind-service';
 import { PsChartReadoutService } from '../../services/ps-chart-readout-service';
 import { PsChartScaleService } from '../../services/ps-chart-scale-service';
 import { PsChartSeriesService } from '../../services/ps-chart-series-service';
+import { PsChartShapeService } from '../../services/ps-chart-shape-service';
 import { PsChartBar } from '../ps-chart-bar/ps-chart-bar';
 import { PsChartEmptyState } from '../ps-chart-empty-state/ps-chart-empty-state';
 import { PsChartLegend } from '../ps-chart-legend/ps-chart-legend';
@@ -36,34 +37,39 @@ export const PsCartesianChart = ({ data, emptyLabel, formatTick, formatValue, he
         index: position,
         theme,
     }));
+    const barIndexes = PsChartShapeService.barIndexes(kind, series);
+    const lineIndexes = PsChartShapeService.lineIndexes(kind, series);
+    const barSeries = barIndexes.map((position) => series[position]);
+    const barColors = barIndexes.map((position) => colors[position]);
+    const lineSeries = lineIndexes.map((position) => series[position]);
     const domain = PsChartScaleService.domain(isStacked
-        ? PsChartSeriesService.stackedValues(data, series)
+        ? [
+            ...PsChartSeriesService.stackedValues(data, barSeries),
+            ...PsChartSeriesService.values(data, lineSeries),
+        ]
         : PsChartSeriesService.values(data, series));
     const selected = index === null ? data.length - 1 : index;
     const datum = data[selected];
     const items = PsChartReadoutService.items(datum, series, colors, formatValue);
     const xAt = (position) => PsChartScaleService.categoryX(position, data.length, plot, isBars);
-    const rects = isBars
-        ? isStacked
-            ? PsChartBarService.stacked(data, series, colors, domain, plot)
-            : PsChartBarService.grouped(data, series, colors, domain, plot)
-        : [];
+    const rects = barSeries.length === 0
+        ? []
+        : isStacked
+            ? PsChartBarService.stacked(data, barSeries, barColors, domain, plot)
+            : PsChartBarService.grouped(data, barSeries, barColors, domain, plot);
     return (_jsxs(View, { style: { gap: 8 }, children: [_jsx(PsChartReadout, { items: items, title: datum.label }), _jsx(View, { accessible: true, accessibilityLabel: PsChartReadoutService.summary(datum.label, items), accessibilityRole: 'image', onLayout: onLayout, style: { height }, children: width === 0 ? null : (_jsxs(_Fragment, { children: [_jsxs(Svg, { height: height, pointerEvents: 'none', width: width, children: [PsChartScaleService.ticks(domain).map((tick) => {
                                     const y = PsChartScaleService.y(tick, domain, plot);
                                     return (_jsxs(G, { children: [_jsx(Line, { stroke: theme.line, strokeWidth: PsChartConfig.gridLineWidth, x1: plot.left, x2: plot.right, y1: y, y2: y }), _jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'end', x: plot.left - 6, y: y + 3, children: formatTick(tick) })] }, tick));
-                                }), PsChartScaleService.labelIndexes(data.length).map((position) => (_jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: PsChartScaleService.labelAnchor(position, data.length, isBars), x: xAt(position), y: height - 6, children: data[position].label }, position))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id))), isBars
-                                    ? null
-                                    : series.map((entry, position) => {
-                                        const points = data.map((row, rowIndex) => ({
-                                            x: xAt(rowIndex),
-                                            y: PsChartScaleService.y(PsChartSeriesService.value(row, entry.dataKey), domain, plot),
-                                        }));
-                                        return (_jsx(PsChartLine, { areaBaseline: kind === PsCartesianChartKind.Area
-                                                ? PsChartScaleService.y(0, domain, plot)
-                                                : undefined, color: colors[position], points: points, progress: progress }, entry.dataKey));
-                                    }), index === null ? null : (_jsx(Line, { stroke: theme.muted, strokeWidth: PsChartConfig.scrubLineWidth, x1: xAt(selected), x2: xAt(selected), y1: plot.top, y2: plot.bottom })), isBars
-                                    ? null
-                                    : series.map((entry, position) => (_jsx(Circle, { cx: xAt(selected), cy: PsChartScaleService.y(PsChartSeriesService.value(datum, entry.dataKey), domain, plot), fill: theme.surface, r: PsChartConfig.markerRadius, stroke: colors[position], strokeWidth: 2 }, entry.dataKey)))] }), _jsx(View, { ...panHandlers, style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' })] })) }), showLegend && series.length > 1 ? (_jsx(PsChartLegend, { items: series.map((entry, position) => ({
+                                }), PsChartScaleService.labelIndexes(data.length).map((position) => (_jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: PsChartScaleService.labelAnchor(position, data.length, isBars), x: xAt(position), y: height - 6, children: data[position].label }, position))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id))), lineSeries.map((entry, lineIndex) => {
+                                    const position = lineIndexes[lineIndex];
+                                    const points = data.map((row, rowIndex) => ({
+                                        x: xAt(rowIndex),
+                                        y: PsChartScaleService.y(PsChartSeriesService.value(row, entry.dataKey), domain, plot),
+                                    }));
+                                    return (_jsx(PsChartLine, { areaBaseline: kind === PsCartesianChartKind.Area
+                                            ? PsChartScaleService.y(0, domain, plot)
+                                            : undefined, color: colors[position], points: points, progress: progress }, entry.dataKey));
+                                }), index === null ? null : (_jsx(Line, { stroke: theme.muted, strokeWidth: PsChartConfig.scrubLineWidth, x1: xAt(selected), x2: xAt(selected), y1: plot.top, y2: plot.bottom })), lineSeries.map((entry, lineIndex) => (_jsx(Circle, { cx: xAt(selected), cy: PsChartScaleService.y(PsChartSeriesService.value(datum, entry.dataKey), domain, plot), fill: theme.surface, r: PsChartConfig.markerRadius, stroke: colors[lineIndexes[lineIndex]], strokeWidth: 2 }, entry.dataKey)))] }), _jsx(View, { ...panHandlers, style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' })] })) }), showLegend && series.length > 1 ? (_jsx(PsChartLegend, { items: series.map((entry, position) => ({
                     color: colors[position],
                     label: entry.label,
                 })) })) : null] }));

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

@@ -3,16 +3,19 @@ import { PsIconKey } from '@pallasoft/ps-icons';
 import { Pressable, View } from 'react-native';
 import { PsCheckboxConfig } from '../../constants/ps-checkbox-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 { 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 PsCheckbox = ({ description, isChecked, isDisabled = false, label, onChange, }) => {
     const theme = usePsMobileTheme();
-    return (_jsxs(Pressable, { accessibilityRole: 'checkbox', accessibilityState: { checked: isChecked, disabled: isDisabled }, disabled: isDisabled, onPress: () => onChange?.(!isChecked), style: {
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'checkbox', accessibilityState: { checked: isChecked, disabled: isDisabled }, disabled: isDisabled, onPress: () => onChange?.(!isChecked), style: {
             alignItems: 'center',
             flexDirection: 'row',
             gap: PsMobileControlConfig.rowSpacing,
-            opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+            opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
         }, children: [_jsx(View, { style: {
                     alignItems: 'center',
                     backgroundColor: isChecked ? theme.primary : theme.surface,

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

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pressable } from 'react-native';
 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 { PsRippleService } from '../../services/ps-ripple-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
 export const PsChip = ({ children, isSelected = false, onPress, trailingIcon }) => {
     const haptic = usePsHaptics();
     const theme = usePsMobileTheme();
-    return (_jsxs(Pressable, { accessibilityRole: 'button', accessibilityState: { selected: isSelected }, onPress: onPress === undefined
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'button', accessibilityState: { selected: isSelected }, onPress: onPress === undefined
             ? undefined
             : () => {
                 haptic('selection');

package/dist/components/ps-date-field/ps-date-field.android.js

@@ -14,7 +14,7 @@ export const PsDateField = ({ closeLabel, confirmLabel, displayValue, errorText,
     const [isOpen, setIsOpen] = useState(false);
     if (isLoading)
         return _jsx(PsFieldSkeleton, {});
-    return (_jsxs(PsFieldFrame, { errorText: errorText, helperText: helperText, label: label, children: [_jsx(Pressable, { accessibilityLabel: label, accessibilityRole: 'button', accessibilityState: { disabled: isDisabled, expanded: isOpen }, disabled: isDisabled, onPress: () => setIsOpen(true), children: _jsx(PsDateControl, { errorText: errorText, isDisabled: isDisabled, isFocused: isOpen, text: displayValue === undefined ? value : displayValue }) }), isOpen ? (_jsx(PsHostScope, { children: _jsx(DatePickerDialog, { color: theme.primary, confirmButtonLabel: confirmLabel, dismissButtonLabel: closeLabel, initialDate: value, onDateSelected: (date) => {
+    return (_jsxs(PsFieldFrame, { errorText: errorText, helperText: helperText, label: label, children: [_jsx(Pressable, { accessibilityLabel: label, accessibilityRole: 'button', accessibilityState: { disabled: isDisabled, expanded: isOpen }, disabled: isDisabled, onPress: () => setIsOpen(true), children: _jsx(PsDateControl, { errorText: errorText, isDisabled: isDisabled, isFocused: isOpen, text: displayValue === undefined ? value : displayValue }) }), isOpen ? (_jsx(PsHostScope, { children: _jsx(DatePickerDialog, { color: theme.primaryText, confirmButtonLabel: confirmLabel, elementColors: PsDatePickerService.dialogColors(theme), dismissButtonLabel: closeLabel, initialDate: value, onDateSelected: (date) => {
                         setIsOpen(false);
                         onChange?.(PsDatePickerService.clamp(PsDateFieldService.fromUtcDate(date), min, max));
                     }, onDismissRequest: () => setIsOpen(false), selectableDates: PsDatePickerService.limits(min, max), showTitle: false }) })) : null] }));

package/dist/components/ps-date-field/ps-date-field.ios.js

@@ -24,7 +24,7 @@ export const PsDateField = ({ displayValue, errorText, helperText, isDisabled =
                                             frame({ maxHeight: Infinity, maxWidth: Infinity }),
                                         ] }) }), _jsx(Popover.Content, { children: _jsx(DatePicker, { displayedComponents: ['date'], modifiers: [
                                             datePickerStyle('graphical'),
-                                            tint(theme.primary),
+                                            tint(theme.isDark ? theme.primary : theme.primaryText),
                                             frame({ width: PsDateFieldConfig.calendarWidth }),
                                             padding({
                                                 horizontal: PsDateFieldConfig.calendarPadding,

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

@@ -1,8 +1,11 @@
+import type { PsDocumentLoadStatus } from '../../constants/ps-document-load-status';
 import type { PsDocumentItem } from '../../interfaces/ps-document-item';
 import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
 export interface PsDocumentPageProps {
     item: PsDocumentItem;
     labels: PsDocumentLabels;
     onDismiss: () => void;
+    onRetry?: () => void;
     onZoomChange: (isZoomed: boolean) => void;
+    status?: PsDocumentLoadStatus;
 }

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

@@ -1,2 +1,2 @@
 import type { PsDocumentPageProps } from './ps-document-page-props';
-export declare const PsDocumentPage: ({ item, labels, onDismiss, onZoomChange }: PsDocumentPageProps) => import("react").JSX.Element;
+export declare const PsDocumentPage: ({ item, labels, onDismiss, onRetry, onZoomChange, status, }: PsDocumentPageProps) => import("react").JSX.Element;

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

@@ -1,22 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { ScrollView, View } from 'react-native';
-import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { View } from 'react-native';
 import { PsDocumentKind } from '../../constants/ps-document-kind';
+import { PsDocumentLoadStatus } from '../../constants/ps-document-load-status';
 import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+import { PsDocumentTextPage } from '../ps-document-text-page/ps-document-text-page';
+import { PsDocumentUnsupported } from '../ps-document-unsupported/ps-document-unsupported';
 import { PsDocumentZoomImage } from '../ps-document-zoom-image/ps-document-zoom-image';
-import { PsText } from '../ps-text/ps-text';
-export const PsDocumentPage = ({ item, labels, onDismiss, onZoomChange }) => {
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+export const PsDocumentPage = ({ item, labels, onDismiss, onRetry, onZoomChange, status = PsDocumentLoadStatus.Ready, }) => {
     const [attempt, setAttempt] = useState(0);
     const [hasFailed, setHasFailed] = useState(false);
+    if (item.kind === PsDocumentKind.Pdf) {
+        if (status === PsDocumentLoadStatus.Loading)
+            return (_jsx(View, { style: { alignItems: 'center', flex: 1, justifyContent: 'center' }, testID: 'ps-document-pdf-loading', children: _jsx(PsSpinner, {}) }));
+        if (status === PsDocumentLoadStatus.Failed)
+            return (_jsx(PsDocumentMessage, { actionLabel: onRetry === undefined ? undefined : labels.retry, description: item.name, iconKey: PsIconKey.Warning, isOnDark: true, onAction: onRetry, title: labels.loadFailed }));
+        return _jsx(PsDocumentUnsupported, { isOnDark: true, item: item, labels: labels });
+    }
     if (item.kind === PsDocumentKind.Image && item.source !== null) {
         return hasFailed ? (_jsx(PsDocumentMessage, { actionLabel: labels.retry, iconKey: PsIconKey.Warning, isOnDark: true, onAction: () => {
                 setHasFailed(false);
                 setAttempt((current) => current + 1);
             }, title: labels.loadFailed })) : (_jsx(PsDocumentZoomImage, { name: item.name, onDismiss: onDismiss, onError: () => setHasFailed(true), onZoomChange: onZoomChange, source: item.source }, attempt));
     }
-    if (item.kind === PsDocumentKind.Text && item.text !== null)
-        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: item.text }) }) }));
-    return (_jsx(PsDocumentMessage, { description: item.name, iconKey: PsIconKey.Doc, isOnDark: true, title: labels.unsupported }));
+    if (item.kind === PsDocumentKind.Text)
+        return _jsx(PsDocumentTextPage, { item: item, labels: labels });
+    return _jsx(PsDocumentUnsupported, { isOnDark: true, item: item, labels: labels });
 };

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

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

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

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

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

@@ -0,0 +1,6 @@
+import type { PsDocumentViewerEntry } from '../../interfaces/ps-document-viewer-entry';
+export interface PsDocumentPageStripProps {
+    entries: PsDocumentViewerEntry[];
+    index: number;
+    onSelect: (index: number) => void;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsDocumentPageStripProps } from './ps-document-page-strip-props';
+export declare const PsDocumentPageStrip: ({ entries, index, onSelect }: PsDocumentPageStripProps) => import("react").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { FlatList, Image, Pressable, View } from 'react-native';
+import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { PsDocumentKind } from '../../constants/ps-document-kind';
+import { PsDocumentPdfConfig } from '../../constants/ps-document-pdf-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsDocumentPagerService } from '../../services/ps-document-pager-service';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+export const PsDocumentPageStrip = ({ entries, index, onSelect }) => {
+    const theme = usePsMobileTheme();
+    const list = useRef(null);
+    useEffect(() => {
+        if (index >= 0 && index < entries.length)
+            list.current?.scrollToIndex({
+                animated: true,
+                index,
+                viewPosition: PsDocumentPdfConfig.stripScrollViewPosition,
+            });
+    }, [entries.length, index]);
+    return (_jsx(View, { style: { paddingVertical: PsDocumentPdfConfig.stripPadding }, testID: 'ps-document-page-strip', children: _jsx(FlatList, { contentContainerStyle: {
+                gap: PsDocumentPdfConfig.stripGap,
+                paddingHorizontal: PsDocumentPdfConfig.stripPadding,
+            }, data: entries, getItemLayout: (_data, position) => ({
+                index: position,
+                length: PsDocumentPdfConfig.stripTileWidth + PsDocumentPdfConfig.stripGap,
+                offset: (PsDocumentPdfConfig.stripTileWidth + PsDocumentPdfConfig.stripGap) * position,
+            }), horizontal: true, keyExtractor: (entry) => entry.id, ref: list, renderItem: ({ index: position, item: entry }) => (_jsx(Pressable, { accessibilityLabel: PsDocumentPagerService.counter(position, entries.length), accessibilityRole: 'button', accessibilityState: { selected: position === index }, onPress: () => onSelect(position), style: {
+                    alignItems: 'center',
+                    borderColor: position === index
+                        ? theme.primary
+                        : PsMobileColorService.withAlpha(theme.white, PsDocumentPdfConfig.stripUnselectedAlpha),
+                    borderRadius: PsMobileControlConfig.controlRadius,
+                    borderWidth: PsDocumentPdfConfig.stripSelectedBorder,
+                    height: PsDocumentPdfConfig.stripHeight,
+                    justifyContent: 'center',
+                    overflow: 'hidden',
+                    width: PsDocumentPdfConfig.stripTileWidth,
+                }, testID: `ps-document-strip-${position}`, children: entry.item.kind === PsDocumentKind.Image && entry.item.source !== null ? (_jsx(Image, { resizeMode: 'cover', source: { uri: entry.item.source.uri }, style: { height: '100%', width: '100%' } })) : (_jsx(PsIcon, { color: theme.white, iconKey: PsIconKey.Doc, size: PsDocumentConfig.stripIconSize })) })), showsHorizontalScrollIndicator: false }) }));
+};

package/dist/components/ps-document-pdf-cover/index.d.ts

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

package/dist/components/ps-document-pdf-cover/index.js

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

package/dist/components/ps-document-pdf-cover/ps-document-pdf-cover-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 PsDocumentPdfCoverProps {
+    item: PsDocumentItem;
+    labels: PsDocumentLabels;
+}

package/dist/components/ps-document-pdf-cover/ps-document-pdf-cover-props.js

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

package/dist/components/ps-document-pdf-cover/ps-document-pdf-cover.d.ts

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

package/dist/components/ps-document-pdf-cover/ps-document-pdf-cover.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Image, View } from 'react-native';
+import { PsDocumentLoadStatus } from '../../constants/ps-document-load-status';
+import { usePsDocumentPdfCover } from '../../hooks/use-ps-document-pdf-cover';
+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';
+export const PsDocumentPdfCover = ({ item, labels }) => {
+    const { cover, retry, status } = usePsDocumentPdfCover(item);
+    if (status === PsDocumentLoadStatus.Ready && cover !== null)
+        return (_jsx(Image, { accessibilityLabel: item.name, resizeMode: 'contain', source: { uri: cover.uri }, style: { flex: 1 } }));
+    if (status === PsDocumentLoadStatus.Loading)
+        return (_jsx(View, { style: { alignItems: 'center', flex: 1, justifyContent: 'center' }, children: _jsx(PsSpinner, {}) }));
+    if (status === PsDocumentLoadStatus.Failed)
+        return (_jsx(PsDocumentMessage, { actionLabel: labels.retry, description: item.name, iconKey: PsIconKey.Warning, onAction: retry, title: labels.loadFailed }));
+    return _jsx(PsDocumentUnsupported, { item: item, labels: labels });
+};

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { Image, Pressable, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { PsDocumentConfig } from '../../constants/ps-document-config';
-import { PsDocumentKind } from '../../constants/ps-document-kind';
 import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsDocumentPagerService } from '../../services/ps-document-pager-service';
@@ -11,10 +10,10 @@ import { PsMobileColorService } from '../../services/ps-mobile-color-service';
 import { PsBadge } from '../ps-badge/ps-badge';
 import { PsCard } from '../ps-card/ps-card';
 import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+import { PsDocumentPreviewFace } from '../ps-document-preview-face/ps-document-preview-face';
 import { PsDocumentViewer } from '../ps-document-viewer/ps-document-viewer';
 import { PsIconButton } from '../ps-icon-button/ps-icon-button';
 import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
-import { PsText } from '../ps-text/ps-text';
 export const PsDocumentPreview = ({ aspectRatio = PsDocumentConfig.previewAspectRatio, hasError = false, isLoading = false, items, labels, onRetry, }) => {
     const theme = usePsMobileTheme();
     const [size, setSize] = useState({ height: 0, width: 0 });
@@ -25,7 +24,7 @@ export const PsDocumentPreview = ({ aspectRatio = PsDocumentConfig.previewAspect
         setOpenCount((current) => current + 1);
         setIsOpen(true);
     };
-    return (_jsx(PsCard, { padding: 'none', children: _jsx(View, { onLayout: (event) => setSize(event.nativeEvent.layout), style: { aspectRatio, width: '100%' }, testID: 'ps-document-preview', children: isLoading ? (_jsx(PsSkeleton, { height: size.height, shape: PsSkeletonShape.Block })) : hasError ? (_jsx(PsDocumentMessage, { actionLabel: onRetry === undefined ? undefined : labels.retry, iconKey: PsIconKey.Warning, onAction: onRetry, title: labels.error })) : first === undefined ? (_jsx(PsDocumentMessage, { iconKey: PsIconKey.Image, title: labels.empty })) : (_jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityLabel: labels.expand, accessibilityRole: 'button', onPress: open, style: { backgroundColor: theme.background, flex: 1 }, children: first.kind === PsDocumentKind.Image && first.source !== null ? (_jsx(Image, { accessibilityLabel: first.name, resizeMode: 'contain', source: { headers: first.source.headers, uri: first.source.uri }, style: { flex: 1 } })) : first.kind === PsDocumentKind.Text && first.text !== null ? (_jsx(View, { style: { flex: 1, padding: PsDocumentConfig.previewPadding }, children: _jsx(PsText, { numberOfLines: PsDocumentConfig.previewTextLines, children: first.text }) })) : (_jsx(PsDocumentMessage, { description: first.name, iconKey: PsIconKey.Doc, title: labels.unsupported })) }), _jsx(View, { style: {
+    return (_jsx(PsCard, { padding: 'none', children: _jsx(View, { onLayout: (event) => setSize(event.nativeEvent.layout), style: { aspectRatio, width: '100%' }, testID: 'ps-document-preview', children: isLoading ? (_jsx(PsSkeleton, { height: size.height, shape: PsSkeletonShape.Block })) : hasError ? (_jsx(PsDocumentMessage, { actionLabel: onRetry === undefined ? undefined : labels.retry, iconKey: PsIconKey.Warning, onAction: onRetry, title: labels.error })) : first === undefined ? (_jsx(PsDocumentMessage, { iconKey: PsIconKey.Image, title: labels.empty })) : (_jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityLabel: labels.expand, accessibilityRole: 'button', onPress: open, style: { backgroundColor: theme.background, flex: 1 }, children: _jsx(PsDocumentPreviewFace, { item: first, labels: labels }) }), _jsx(View, { style: {
                             position: 'absolute',
                             right: PsDocumentConfig.expandInset,
                             top: PsDocumentConfig.expandInset,

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

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