@pallasoft/ps-mobile-components 0.0.0-stage → 1.1.0

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

@@ -0,0 +1,27 @@
+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 { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+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
+            ? undefined
+            : () => {
+                haptic('selection');
+                onPress();
+            }, style: {
+            alignItems: 'center',
+            backgroundColor: isSelected ? theme.primarySoft : theme.surface,
+            borderColor: isSelected ? theme.primary : theme.line,
+            borderRadius: 999,
+            borderWidth: 1,
+            flexDirection: 'row',
+            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 }))] }));
+};

package/dist/components/ps-color-swatches/index.d.ts

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

package/dist/components/ps-color-swatches/index.js

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

package/dist/components/ps-color-swatches/ps-color-swatches-props.d.ts

@@ -0,0 +1,3 @@
+export interface PsColorSwatchesProps {
+    colors: string[];
+}

package/dist/components/ps-color-swatches/ps-color-swatches-props.js

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

package/dist/components/ps-color-swatches/ps-color-swatches.d.ts

@@ -0,0 +1,2 @@
+import type { PsColorSwatchesProps } from './ps-color-swatches-props';
+export declare const PsColorSwatches: ({ colors }: PsColorSwatchesProps) => import("react").JSX.Element;

package/dist/components/ps-color-swatches/ps-color-swatches.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsColorSwatchesConfig } from '../../constants/ps-color-swatches-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsColorSwatches = ({ colors }) => {
+    const theme = usePsMobileTheme();
+    return (_jsx(View, { accessibilityElementsHidden: true, style: { flexDirection: 'row' }, testID: 'ps-color-swatches', children: colors.map((color, index) => (_jsx(View, { style: {
+                backgroundColor: color,
+                borderColor: theme.surface,
+                borderRadius: PsColorSwatchesConfig.size / 2,
+                borderWidth: PsColorSwatchesConfig.borderWidth,
+                height: PsColorSwatchesConfig.size,
+                marginLeft: index === 0 ? 0 : PsColorSwatchesConfig.overlap,
+                width: PsColorSwatchesConfig.size,
+            } }, `${color}-${index}`))) }));
+};

package/dist/components/ps-date-field/index.d.ts

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

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

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

package/dist/components/ps-date-field/ps-date-control-props.d.ts

@@ -0,0 +1,6 @@
+export interface PsDateControlProps {
+    errorText: string | undefined;
+    isDisabled: boolean;
+    isFocused: boolean;
+    text: string;
+}

package/dist/components/ps-date-field/ps-date-control-props.js

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

package/dist/components/ps-date-field/ps-date-control.d.ts

@@ -0,0 +1,2 @@
+import type { PsDateControlProps } from './ps-date-control-props';
+export declare const PsDateControl: ({ errorText, isDisabled, isFocused, text }: PsDateControlProps) => import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsControlStyleService } from '../../services/ps-control-style-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+export const PsDateControl = ({ errorText, isDisabled, isFocused, text }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(View, { style: [
+            PsControlStyleService.container(theme, {
+                hasError: errorText !== undefined,
+                isDisabled,
+                isFocused,
+            }),
+            { gap: PsMobileControlConfig.rowSpacing },
+        ], children: [_jsx(PsText, { numberOfLines: 1, style: { flex: 1, fontSize: PsMobileControlConfig.controlFontSize }, children: text }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Calendar, size: PsMobileControlConfig.iconSizeInline })] }));
+};

package/dist/components/ps-date-field/ps-date-field-props.d.ts

@@ -0,0 +1,14 @@
+export interface PsDateFieldProps {
+    closeLabel?: string;
+    confirmLabel?: string;
+    displayValue?: string;
+    errorText?: string;
+    helperText?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+    max?: string;
+    min?: string;
+    onChange?: (value: string) => void;
+    value: string;
+}

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

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

package/dist/components/ps-date-field/ps-date-field.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsDateFieldProps } from './ps-date-field-props';
+export declare const PsDateField: ({ closeLabel, confirmLabel, displayValue, errorText, helperText, isDisabled, isLoading, label, max, min, onChange, value, }: PsDateFieldProps) => import("react").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePickerDialog } from '@expo/ui/jetpack-compose';
+import { Pressable } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsDateFieldService } from '../../services/ps-date-field-service';
+import { PsDatePickerService } from '../../services/ps-date-picker-service';
+import { PsFieldFrame } from '../ps-field-frame/ps-field-frame';
+import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsHostScope } from '../ps-host-scope/ps-host-scope';
+import { PsDateControl } from './ps-date-control';
+export const PsDateField = ({ closeLabel, confirmLabel, displayValue, errorText, helperText, isDisabled = false, isLoading = false, label, max, min, onChange, value, }) => {
+    const theme = usePsMobileTheme();
+    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) => {
+                        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.d.ts

@@ -0,0 +1,2 @@
+import type { PsDateFieldProps } from './ps-date-field-props';
+export declare const PsDateField: ({ displayValue, errorText, helperText, isDisabled, isLoading, label, max, min, onChange, value, }: PsDateFieldProps) => import("react").JSX.Element;

package/dist/components/ps-date-field/ps-date-field.ios.d.ts

@@ -0,0 +1,2 @@
+import type { PsDateFieldProps } from './ps-date-field-props';
+export declare const PsDateField: ({ displayValue, errorText, helperText, isDisabled, isLoading, label, max, min, onChange, value, }: PsDateFieldProps) => import("react").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePicker, Popover, Rectangle } from '@expo/ui/swift-ui';
+import { datePickerStyle, foregroundStyle, frame, padding, tint, } from '@expo/ui/swift-ui/modifiers';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { PsDateFieldConfig } from '../../constants/ps-date-field-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsDateFieldService } from '../../services/ps-date-field-service';
+import { PsDatePickerService } from '../../services/ps-date-picker-service';
+import { PsFieldFrame } from '../ps-field-frame/ps-field-frame';
+import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsHost } from '../ps-host/ps-host';
+import { PsDateControl } from './ps-date-control';
+export const PsDateField = ({ displayValue, errorText, helperText, isDisabled = false, isLoading = false, label, max, min, onChange, value, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    const [isOpen, setIsOpen] = useState(false);
+    const limits = PsDatePickerService.limits(min, max);
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, {});
+    return (_jsx(PsFieldFrame, { errorText: errorText, helperText: helperText, label: label, children: _jsxs(View, { 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 }) }), _jsx(View, { pointerEvents: 'none', style: StyleSheet.absoluteFill, children: _jsx(PsHost, { style: StyleSheet.absoluteFill, children: _jsxs(Popover, { isPresented: isOpen, onIsPresentedChange: setIsOpen, children: [_jsx(Popover.Trigger, { children: _jsx(Rectangle, { modifiers: [
+                                            foregroundStyle('clear'),
+                                            frame({ maxHeight: Infinity, maxWidth: Infinity }),
+                                        ] }) }), _jsx(Popover.Content, { children: _jsx(DatePicker, { displayedComponents: ['date'], modifiers: [
+                                            datePickerStyle('graphical'),
+                                            tint(theme.primary),
+                                            frame({ width: PsDateFieldConfig.calendarWidth }),
+                                            padding({
+                                                horizontal: PsDateFieldConfig.calendarPadding,
+                                                vertical: PsDateFieldConfig.calendarPadding,
+                                            }),
+                                        ], onDateChange: (date) => {
+                                            haptic('selection');
+                                            onChange?.(PsDatePickerService.clamp(PsDateFieldService.fromLocalDate(date), min, max));
+                                            setIsOpen(false);
+                                        }, range: limits, selection: PsDateFieldService.toLocalDate(value) }) })] }) }) })] }) }));
+};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pressable, TextInput } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsControlStyleService } from '../../services/ps-control-style-service';
+import { PsDateFieldService } from '../../services/ps-date-field-service';
+import { PsDatePickerService } from '../../services/ps-date-picker-service';
+import { PsFieldFrame } from '../ps-field-frame/ps-field-frame';
+import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsDateControl } from './ps-date-control';
+export const PsDateField = ({ displayValue, errorText, helperText, isDisabled = false, isLoading = false, label, max, min, onChange, value, }) => {
+    const theme = usePsMobileTheme();
+    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((current) => !current), children: _jsx(PsDateControl, { errorText: errorText, isDisabled: isDisabled, isFocused: isOpen, text: displayValue === undefined ? value : displayValue }) }), isOpen ? (_jsx(TextInput, { accessibilityLabel: value, defaultValue: value, onChangeText: (next) => {
+                    if (PsDateFieldService.isValid(next))
+                        onChange?.(PsDatePickerService.clamp(next, min, max));
+                }, style: PsControlStyleService.input(theme), testID: 'ps-native-date-picker' })) : null] }));
+};

package/dist/components/ps-date-range-field/index.d.ts

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

package/dist/components/ps-date-range-field/index.js

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

package/dist/components/ps-date-range-field/ps-date-range-field-props.d.ts

@@ -0,0 +1,16 @@
+export interface PsDateRange {
+    from: string;
+    to: string;
+}
+export type PsDateRangeEdge = 'from' | 'to';
+export interface PsDateRangeFieldProps {
+    dismissLabel: string;
+    confirmLabel: string;
+    fromLabel: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+    onChange: (range: PsDateRange) => void;
+    toLabel: string;
+    value: PsDateRange;
+}

package/dist/components/ps-date-range-field/ps-date-range-field-props.js

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

package/dist/components/ps-date-range-field/ps-date-range-field.d.ts

@@ -0,0 +1,2 @@
+import type { PsDateRangeFieldProps } from './ps-date-range-field-props';
+export declare const PsDateRangeField: ({ confirmLabel, dismissLabel, fromLabel, isDisabled, isLoading, label, onChange, toLabel, value, }: PsDateRangeFieldProps) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsDateRangeService } from '../../services/ps-date-range-service';
+import { PsDateField } from '../ps-date-field/ps-date-field';
+import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsText } from '../ps-text/ps-text';
+export const PsDateRangeField = ({ confirmLabel, dismissLabel, fromLabel, isDisabled = false, isLoading = false, label, onChange, toLabel, value, }) => {
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, {});
+    return (_jsxs(View, { style: { gap: PsMobileControlConfig.rowSpacing / 2 }, children: [_jsx(PsText, { variant: 'label', children: label }), _jsxs(View, { style: { flexDirection: 'row', gap: PsMobileControlConfig.rowSpacing }, children: [_jsx(View, { style: { flex: 1 }, children: _jsx(PsDateField, { closeLabel: dismissLabel, confirmLabel: confirmLabel, isDisabled: isDisabled, label: fromLabel, onChange: (next) => onChange(PsDateRangeService.change(value, 'from', next)), value: value.from }) }), _jsx(View, { style: { flex: 1 }, children: _jsx(PsDateField, { closeLabel: dismissLabel, confirmLabel: confirmLabel, isDisabled: isDisabled, label: toLabel, onChange: (next) => onChange(PsDateRangeService.change(value, 'to', next)), value: value.to }) })] })] }));
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+import type { PsIconKey } from '@pallasoft/ps-icons';
+export interface PsDocumentMessageProps {
+    actionLabel?: string;
+    description?: string;
+    iconKey: PsIconKey;
+    isOnDark?: boolean;
+    onAction?: () => void;
+    title: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsDocumentMessageProps } from './ps-document-message-props';
+export declare const PsDocumentMessage: ({ actionLabel, description, iconKey, isOnDark, onAction, title, }: PsDocumentMessageProps) => import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsTextLink } from '../ps-text-link/ps-text-link';
+import { PsText } from '../ps-text/ps-text';
+export const PsDocumentMessage = ({ actionLabel, description, iconKey, isOnDark = false, onAction, title, }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            flex: 1,
+            gap: PsDocumentConfig.messageGap,
+            justifyContent: 'center',
+            padding: PsDocumentConfig.previewPadding,
+        }, testID: 'ps-document-message', children: [_jsx(PsIcon, { color: isOnDark ? theme.white : theme.muted, iconKey: iconKey, size: PsDocumentConfig.previewIconSize }), _jsx(PsText, { align: 'center', tone: isOnDark ? 'white' : 'ink', weight: 'semibold', children: title }), description === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 2, tone: isOnDark ? 'white' : 'muted', children: description })), actionLabel === undefined || onAction === undefined ? null : (_jsx(PsTextLink, { onPress: onAction, tone: isOnDark ? 'white' : 'emphasis', children: actionLabel }))] }));
+};

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

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

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

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

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

@@ -0,0 +1,8 @@
+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;
+    onZoomChange: (isZoomed: boolean) => void;
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+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 { PsDocumentKind } from '../../constants/ps-document-kind';
+import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+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 }) => {
+    const [attempt, setAttempt] = useState(0);
+    const [hasFailed, setHasFailed] = useState(false);
+    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 }));
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { PsDocumentItem } from '../../interfaces/ps-document-item';
+import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+export interface PsDocumentPreviewProps {
+    aspectRatio?: number;
+    hasError?: boolean;
+    isLoading?: boolean;
+    items: PsDocumentItem[];
+    labels: PsDocumentLabels;
+    onRetry?: () => void;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsDocumentPreviewProps } from './ps-document-preview-props';
+export declare const PsDocumentPreview: ({ aspectRatio, hasError, isLoading, items, labels, onRetry, }: PsDocumentPreviewProps) => import("react").JSX.Element;

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

@@ -0,0 +1,37 @@
+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 { 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';
+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 { 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 });
+    const [openCount, setOpenCount] = useState(0);
+    const [isOpen, setIsOpen] = useState(false);
+    const first = items[0];
+    const open = () => {
+        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: {
+                            position: 'absolute',
+                            right: PsDocumentConfig.expandInset,
+                            top: PsDocumentConfig.expandInset,
+                        }, children: _jsx(PsIconButton, { backgroundColor: PsMobileColorService.withAlpha(PsDocumentConfig.backdropColor, PsDocumentConfig.chromeAlpha), color: theme.white, iconKey: PsIconKey.Expand, label: labels.expand, onPress: open, size: 'compact' }) }), PsDocumentPagerService.hasMany(items.length) ? (_jsx(View, { pointerEvents: 'none', style: {
+                            bottom: PsDocumentConfig.expandInset,
+                            left: PsDocumentConfig.expandInset,
+                            position: 'absolute',
+                        }, children: _jsx(PsBadge, { size: 'small', children: PsDocumentPagerService.counter(0, items.length) }) })) : null, _jsx(PsDocumentViewer, { isOpen: isOpen, items: items, labels: labels, onClose: () => setIsOpen(false) }, openCount)] })) }) }));
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+import type { PsDocumentItem } from '../../interfaces/ps-document-item';
+import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+export interface PsDocumentViewerProps {
+    initialIndex?: number;
+    isOpen: boolean;
+    items: PsDocumentItem[];
+    labels: PsDocumentLabels;
+    onClose: () => void;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsDocumentViewerProps } from './ps-document-viewer-props';
+export declare const PsDocumentViewer: ({ initialIndex, isOpen, items, labels, onClose, }: PsDocumentViewerProps) => import("react").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsDocumentPagerService } from '../../services/ps-document-pager-service';
+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 [width, setWidth] = useState(0);
+    const [isZoomed, setIsZoomed] = useState(false);
+    const [index, setIndex] = useState(PsDocumentPagerService.clampIndex(initialIndex, items.length));
+    const current = items[index];
+    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,
+                    paddingBottom: insets.bottom,
+                    paddingTop: insets.top,
+                }, testID: 'ps-document-viewer', children: [_jsxs(View, { style: {
+                            alignItems: 'center',
+                            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) => ({
+                                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));
+                                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' })) })] })] }));
+};

package/dist/components/ps-document-zoom-image/index.d.ts

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

package/dist/components/ps-document-zoom-image/index.js

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

package/dist/components/ps-document-zoom-image/ps-document-zoom-image-props.d.ts

@@ -0,0 +1,8 @@
+import type { PsDocumentSource } from '../../interfaces/ps-document-source';
+export interface PsDocumentZoomImageProps {
+    name: string;
+    onDismiss: () => void;
+    onError: () => void;
+    onZoomChange: (isZoomed: boolean) => void;
+    source: PsDocumentSource;
+}

package/dist/components/ps-document-zoom-image/ps-document-zoom-image-props.js

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

package/dist/components/ps-document-zoom-image/ps-document-zoom-image.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentZoomImageProps } from './ps-document-zoom-image-props';
+export declare const PsDocumentZoomImage: ({ name, onDismiss, onError, onZoomChange, source, }: PsDocumentZoomImageProps) => import("react").JSX.Element;