@pallasoft/ps-mobile-components 1.13.1 → 1.15.0

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

@@ -19,9 +19,9 @@ export const PsActionMenu = ({ children, header, isDisabled = false, items, labe
                         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: () => {
+                }, 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, imageUri: item.imageUri, isChecked: item.isChecked, isDanger: item.isDanger, isDisabled: item.isDisabled, isWarning: item.isWarning, label: item.label, monogram: item.monogram, onPress: () => {
                                     menu.close();
                                     haptic('selection');
                                     item.onSelect();
-                                }, subtitle: item.subtitle }, item.id)))] }, group.id)))] }))] }));
+                                }, subtitle: item.subtitle, tileColor: item.tileColor }, item.id)))] }, group.id)))] }))] }));
 };

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

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

package/dist/components/ps-link-preview-card/index.d.ts

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

package/dist/components/ps-link-preview-card/index.js

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

package/dist/components/ps-link-preview-card/ps-link-preview-card-props.d.ts

@@ -0,0 +1,21 @@
+import type { PsLinkPreviewSize } from '../../constants/ps-link-preview-size';
+import type { PsDocumentSource } from '../../interfaces/ps-document-source';
+export interface PsLinkPreviewCardProps {
+    description?: string | null;
+    faviconSource?: PsDocumentSource | null;
+    href: string;
+    imageSource?: PsDocumentSource | null;
+    isFramed?: boolean;
+    isLoading?: boolean;
+    loadingLabel?: string;
+    onPress: () => void;
+    opensInBrowserLabel?: string;
+    siteName?: string | null;
+    size?: PsLinkPreviewSize;
+    title?: string | null;
+}
+export interface PsLinkPreviewCardSkeletonProps {
+    isCompact: boolean;
+    isFramed: boolean;
+    label?: string;
+}

package/dist/components/ps-link-preview-card/ps-link-preview-card-props.js

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

package/dist/components/ps-link-preview-card/ps-link-preview-card-skeleton.d.ts

@@ -0,0 +1,2 @@
+import type { PsLinkPreviewCardSkeletonProps } from './ps-link-preview-card-props';
+export declare const PsLinkPreviewCardSkeleton: ({ isCompact, isFramed, label, }: PsLinkPreviewCardSkeletonProps) => import("react").JSX.Element;

package/dist/components/ps-link-preview-card/ps-link-preview-card-skeleton.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View } from 'react-native';
+import { PsLinkPreviewConfig } from '../../constants/ps-link-preview-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsLinkPreviewService } from '../../services/ps-link-preview-service';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsLinkPreviewCardSkeleton = ({ isCompact, isFramed, label, }) => {
+    const theme = usePsMobileTheme();
+    const [width, setWidth] = useState(0);
+    const bodyPadding = isCompact
+        ? PsLinkPreviewConfig.compactBodyPadding
+        : PsLinkPreviewConfig.fullBodyPadding;
+    return (_jsxs(View, { accessibilityLabel: label, accessible: label !== undefined, onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: {
+            backgroundColor: theme.surface,
+            borderColor: theme.line,
+            borderRadius: PsMobileControlConfig.cardRadius,
+            borderWidth: isFramed ? 1 : 0,
+            flexDirection: isCompact ? 'row' : 'column',
+            overflow: 'hidden',
+        }, testID: 'ps-link-preview-card-skeleton', children: [isCompact ? (_jsx(PsSkeleton, { height: PsLinkPreviewConfig.compactImageMinHeight, radius: 0, shape: PsSkeletonShape.Block, width: PsLinkPreviewConfig.compactImageWidth })) : (_jsx(PsSkeleton, { height: PsLinkPreviewService.imageHeight(width), radius: 0, shape: PsSkeletonShape.Block })), _jsxs(View, { style: {
+                    flex: isCompact ? 1 : undefined,
+                    gap: PsLinkPreviewConfig.skeletonLineGap,
+                    padding: bodyPadding,
+                }, children: [_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsLinkPreviewConfig.skeletonMetaWidth }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsLinkPreviewConfig.skeletonTitleWidth }), isCompact ? null : _jsx(PsSkeleton, { shape: PsSkeletonShape.Line })] })] }));
+};

package/dist/components/ps-link-preview-card/ps-link-preview-card.d.ts

@@ -0,0 +1,2 @@
+import type { PsLinkPreviewCardProps } from './ps-link-preview-card-props';
+export declare const PsLinkPreviewCard: ({ description, faviconSource, href, imageSource, isFramed, isLoading, loadingLabel, onPress, opensInBrowserLabel, siteName, size, title, }: PsLinkPreviewCardProps) => import("react").JSX.Element | null;

package/dist/components/ps-link-preview-card/ps-link-preview-card.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, 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 { PsLinkPreviewConfig } from '../../constants/ps-link-preview-config';
+import { PsLinkPreviewSize } from '../../constants/ps-link-preview-size';
+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 { PsLinkPreviewService } from '../../services/ps-link-preview-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';
+import { PsLinkPreviewCardSkeleton } from './ps-link-preview-card-skeleton';
+export const PsLinkPreviewCard = ({ description, faviconSource, href, imageSource, isFramed = true, isLoading = false, loadingLabel, onPress, opensInBrowserLabel, siteName, size = PsLinkPreviewSize.Full, title, }) => {
+    const theme = usePsMobileTheme();
+    const haptic = usePsHaptics();
+    const [failedImageUri, setFailedImageUri] = useState(null);
+    const [failedFaviconUri, setFailedFaviconUri] = useState(null);
+    if (!PsLinkPreviewService.isWebAddress(href))
+        return null;
+    const isCompact = PsLinkPreviewService.isCompact(size);
+    if (isLoading)
+        return (_jsx(PsLinkPreviewCardSkeleton, { isCompact: isCompact, isFramed: isFramed, label: loadingLabel }));
+    const meta = PsLinkPreviewService.meta(href, title, siteName, description, size);
+    const hasImage = PsLinkPreviewService.hasSource(imageSource, failedImageUri);
+    const hasFavicon = PsLinkPreviewService.hasSource(faviconSource, failedFaviconUri);
+    return (_jsxs(Pressable, { accessibilityHint: opensInBrowserLabel, accessibilityRole: 'link', android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), onPress: () => {
+            haptic('light');
+            onPress();
+        }, style: ({ pressed }) => ({
+            backgroundColor: pressed ? PsStateService.pressedFill(theme, theme.surface) : theme.surface,
+            borderColor: theme.line,
+            borderRadius: PsMobileControlConfig.cardRadius,
+            borderWidth: isFramed ? 1 : 0,
+            flexDirection: isCompact ? 'row' : 'column',
+            overflow: 'hidden',
+        }), testID: 'ps-link-preview-card', children: [hasImage && imageSource !== null && imageSource !== undefined ? (_jsx(Image, { onError: () => setFailedImageUri(imageSource.uri), resizeMode: 'cover', source: { headers: imageSource.headers, uri: imageSource.uri }, style: isCompact
+                    ? {
+                        alignSelf: 'stretch',
+                        backgroundColor: theme.skeletonBase,
+                        minHeight: PsLinkPreviewConfig.compactImageMinHeight,
+                        width: PsLinkPreviewConfig.compactImageWidth,
+                    }
+                    : {
+                        aspectRatio: PsLinkPreviewConfig.imageAspectRatio,
+                        backgroundColor: theme.skeletonBase,
+                        width: '100%',
+                    }, testID: 'ps-link-preview-card-image' })) : null, _jsxs(View, { style: {
+                    flex: isCompact ? 1 : undefined,
+                    gap: PsLinkPreviewConfig.textGap,
+                    padding: isCompact
+                        ? PsLinkPreviewConfig.compactBodyPadding
+                        : PsLinkPreviewConfig.fullBodyPadding,
+                }, children: [_jsxs(View, { style: {
+                            alignItems: 'center',
+                            flexDirection: 'row',
+                            gap: PsLinkPreviewConfig.metaGap,
+                        }, children: [hasFavicon && faviconSource !== null && faviconSource !== undefined ? (_jsx(Image, { onError: () => setFailedFaviconUri(faviconSource.uri), resizeMode: 'contain', source: { headers: faviconSource.headers, uri: faviconSource.uri }, style: {
+                                    borderRadius: PsLinkPreviewConfig.faviconRadius,
+                                    height: PsLinkPreviewConfig.faviconSize,
+                                    width: PsLinkPreviewConfig.faviconSize,
+                                }, testID: 'ps-link-preview-card-favicon' })) : (_jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Globe, size: PsLinkPreviewConfig.faviconSize })), _jsx(View, { style: { flex: 1 }, children: _jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'caption', weight: 'medium', children: meta.siteLabel }) }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ExternalLink, size: PsLinkPreviewConfig.faviconSize })] }), meta.hasTitle ? (_jsx(PsText, { numberOfLines: PsLinkPreviewConfig.titleLines, weight: 'bold', children: title })) : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'caption', children: href })), meta.hasDescription ? (_jsx(PsText, { numberOfLines: PsLinkPreviewConfig.descriptionLines, tone: 'muted', variant: 'small', children: description })) : null] })] }));
+};

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

@@ -12,9 +12,7 @@ export const PsListPersonRow = ({ badge, initials, subtitle, title }) => {
             backgroundColor: theme.surface,
             flexDirection: 'row',
             gap: PsLayoutConfig.headerSlotGap,
-            minHeight: subtitle === undefined
-                ? PsLayoutConfig.rowMinHeight
-                : PsLayoutConfig.rowMinHeightWithSubtitle,
+            minHeight: PsLayoutConfig.rowMinHeight,
             paddingHorizontal: PsLayoutConfig.gutter,
             paddingVertical: PsLayoutConfig.rowPaddingVertical,
         }, testID: 'ps-list-person-row', children: [_jsx(PsAvatar, { initials: initials, size: 'small' }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }), badge === undefined ? null : (_jsx(PsBadge, { size: 'small', tone: badge.tone, children: badge.label }))] }));

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

@@ -21,9 +21,7 @@ export const PsListRowBody = ({ badge, hasChevron = false, hasMenu, isSelectable
             backgroundColor: PsListRowStyleService.background(isSelectable && isSelected, pressed, theme),
             flexDirection: 'row',
             gap: PsLayoutConfig.headerSlotGap,
-            minHeight: hasSecondLine
-                ? PsLayoutConfig.rowMinHeightWithSubtitle
-                : PsLayoutConfig.rowMinHeight,
+            minHeight: PsLayoutConfig.rowMinHeight,
             paddingHorizontal: PsLayoutConfig.gutter,
             paddingVertical: PsLayoutConfig.rowPaddingVertical,
         }), testID: 'ps-list-row', children: [isSelectable ? _jsx(PsListRowSelectMark, { isSelected: isSelected }) : null, leadingIcon === undefined ? null : (_jsx(View, { style: {

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

@@ -16,9 +16,7 @@ export const PsListRowSkeleton = ({ badge, isSection = false, leadingIcon, skele
             alignItems: 'center',
             flexDirection: 'row',
             gap: PsLayoutConfig.headerSlotGap,
-            minHeight: hasSubtitle
-                ? PsLayoutConfig.rowMinHeightWithSubtitle
-                : PsLayoutConfig.rowMinHeight,
+            minHeight: PsLayoutConfig.rowMinHeight,
             paddingHorizontal: PsLayoutConfig.gutter,
             paddingVertical: PsLayoutConfig.rowPaddingVertical,
         }, testID: 'ps-skeleton-row', children: [hasIcon ? (_jsx(PsSkeleton, { height: PsLayoutConfig.rowIconBox, radius: PsLayoutConfig.rowIconBoxRadius, width: PsLayoutConfig.rowIconBox })) : null, _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap * 3 }, children: [_jsxs(View, { style: {

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

@@ -1,12 +1,15 @@
 import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
 export interface PsMenuPopupRowProps {
     iconKey?: PsMobileIconKey;
+    imageUri?: string;
     isChecked?: boolean;
     isDanger?: boolean;
     isDisabled?: boolean;
     isWarning?: boolean;
     label: string;
+    monogram?: string;
     onPress: () => void;
     subtitle?: string;
+    tileColor?: string;
 }
-export declare const PsMenuPopupRow: ({ iconKey, isChecked, isDanger, isDisabled, isWarning, label, onPress, subtitle, }: PsMenuPopupRowProps) => import("react").JSX.Element;
+export declare const PsMenuPopupRow: ({ iconKey, imageUri, isChecked, isDanger, isDisabled, isWarning, label, monogram, onPress, subtitle, tileColor, }: PsMenuPopupRowProps) => import("react").JSX.Element;

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

@@ -11,7 +11,8 @@ 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 PsMenuPopupRow = ({ iconKey, isChecked = false, isDanger = false, isDisabled = false, isWarning = false, label, onPress, subtitle, }) => {
+import { PsMenuPopupTile } from './ps-menu-popup-tile';
+export const PsMenuPopupRow = ({ iconKey, imageUri, isChecked = false, isDanger = false, isDisabled = false, isWarning = false, label, monogram, onPress, subtitle, tileColor, }) => {
     const theme = usePsMobileTheme();
     const scheme = usePsMaterialScheme();
     const isMaterial = PsMenuPopupStyleService.isMaterial();
@@ -30,5 +31,5 @@ export const PsMenuPopupRow = ({ iconKey, isChecked = false, isDanger = false, i
                 overflow: 'hidden',
                 paddingHorizontal: row.paddingHorizontal,
             };
-        }, children: [iconKey === undefined ? null : _jsx(PsIcon, { color: tint, iconKey: iconKey }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { numberOfLines: 1, tone: isDanger ? 'danger' : 'ink', weight: PsMenuPopupStyleService.labelWeight(isMaterial, isChecked), children: label }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: isWarning ? 'warning' : 'muted', variant: 'small', children: subtitle }))] }), isChecked ? _jsx(PsIcon, { color: theme.primaryText, iconKey: PsIconKey.Check }) : null] }));
+        }, children: [imageUri !== undefined || monogram !== undefined ? (_jsx(PsMenuPopupTile, { imageUri: imageUri, monogram: monogram, tileColor: tileColor })) : iconKey === undefined ? null : (_jsx(PsIcon, { color: tint, iconKey: iconKey })), _jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { numberOfLines: 1, tone: isDanger ? 'danger' : 'ink', weight: PsMenuPopupStyleService.labelWeight(isMaterial, isChecked), children: label }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: isWarning ? 'warning' : 'muted', variant: 'small', children: subtitle }))] }), isChecked ? _jsx(PsIcon, { color: theme.primaryText, iconKey: PsIconKey.Check }) : null] }));
 };

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

@@ -0,0 +1,6 @@
+export interface PsMenuPopupTileProps {
+    imageUri?: string;
+    monogram?: string;
+    tileColor?: string;
+}
+export declare const PsMenuPopupTile: ({ imageUri, monogram, tileColor }: PsMenuPopupTileProps) => import("react").JSX.Element;

package/dist/components/ps-menu-popup/ps-menu-popup-tile.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftColorContrastService } from '@pallasoft/ps-design-system';
+import { Image, View } from 'react-native';
+import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMenuTileService } from '../../services/ps-menu-tile-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsMenuPopupTile = ({ imageUri, monogram, tileColor }) => {
+    const theme = usePsMobileTheme();
+    const size = PsMenuPopupConfig.tileSize;
+    const fill = tileColor === undefined ? theme.primary : tileColor;
+    const textColor = tileColor === undefined
+        ? theme.primaryContrast
+        : PallasoftColorContrastService.textOn(tileColor);
+    return (_jsx(View, { style: {
+            alignItems: 'center',
+            backgroundColor: imageUri === undefined ? fill : theme.white,
+            borderRadius: PsMenuPopupConfig.tileRadius,
+            height: size,
+            justifyContent: 'center',
+            overflow: 'hidden',
+            width: size,
+        }, testID: 'ps-menu-popup-tile', children: imageUri === undefined ? (_jsx(PsText, { style: { color: textColor, fontSize: PsMenuPopupConfig.tileFontSize }, weight: 'semibold', children: PsMenuTileService.letter(monogram === undefined ? '' : monogram) })) : (_jsx(Image, { resizeMode: 'contain', source: { uri: imageUri }, style: {
+                height: size - PsMenuPopupConfig.tileLogoPadding * 2,
+                width: size - PsMenuPopupConfig.tileLogoPadding * 2,
+            } })) }));
+};

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

@@ -16,7 +16,7 @@ export const PsNativeMenuRow = ({ item, onSelect }) => {
             backgroundColor: pressed ? PsStateService.pressedFill(theme, theme.surface) : theme.surface,
             flexDirection: 'row',
             gap: PsMobileControlConfig.rowSpacing,
-            minHeight: PsLayoutConfig.rowMinHeight,
+            minHeight: PsLayoutConfig.menuRowMinHeight,
             paddingHorizontal: PsLayoutConfig.gutter,
         }), children: [_jsx(PsText, { style: { flex: 1 }, weight: item.isSelected ? 'semibold' : 'regular', children: item.label }), item.isSelected ? _jsx(PsIcon, { color: theme.primary, iconKey: PsIconKey.Check }) : null] }));
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { PsPageHeaderConfig } from '../../constants/ps-page-header-config';
 import { PsSheetConfig } from '../../constants/ps-sheet-config';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
@@ -20,7 +20,7 @@ export const PsSheetHeader = ({ eyebrow, isLeadingDisabled = false, leadingKind
             minHeight: PsSheetConfig.headerMinHeight,
             paddingBottom: PsSheetConfig.headerPaddingBottom,
             paddingHorizontal: PsSheetConfig.headerPaddingHorizontal,
-            paddingTop: PsSheetConfig.headerPaddingTop,
+            paddingTop: PsSheetService.headerPaddingTop(Platform.OS),
         }, testID: 'ps-sheet-header', children: [_jsx(View, { style: { alignItems: 'flex-start', minWidth: PsSheetConfig.actionMinWidth }, children: leadingLabel === undefined ? null : (_jsx(View, { style: PsSheetService.leadingIconStyle(leadingKind), children: _jsx(PsIconButton, { iconKey: leadingKind === 'back' ? PsIconKey.ChevronRight : PsIconKey.Close, isDisabled: isLeadingDisabled, label: leadingLabel, onPress: onLeadingPress, testID: 'ps-sheet-leading', variant: 'header' }) })) }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [_jsx(PsText, { accessibilityRole: 'header', align: 'center', numberOfLines: 2, weight: 'bold', children: title }), eyebrow === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 1, tone: 'muted', variant: 'small', children: eyebrow }))] }), _jsx(View, { style: { alignItems: 'flex-end', minWidth: PsSheetConfig.actionMinWidth }, children: trailing === undefined ? null : trailing.isSubmitting === true ? (_jsx(View, { accessibilityLabel: trailing.label, accessibilityState: { busy: true }, style: {
                         alignItems: 'center',
                         backgroundColor: trailingColor,

package/dist/constants/ps-chart-config.d.ts

@@ -1,4 +1,5 @@
 export declare const PsChartConfig: {
+    readonly revealDefaultToken: "default";
     readonly areaOpacity: 0.18;
     readonly axisLabelGap: 8;
     readonly axisLabelMaxWidth: 48;

package/dist/constants/ps-chart-config.js

@@ -1,4 +1,5 @@
 export const PsChartConfig = {
+    revealDefaultToken: 'default',
     areaOpacity: 0.18,
     axisLabelGap: 8,
     axisLabelMaxWidth: 48,

package/dist/constants/ps-layout-config.d.ts

@@ -18,8 +18,8 @@ export declare const PsLayoutConfig: {
     readonly rowIconSize: 16;
     readonly scrollEventThrottle: 16;
     readonly selectMarkSize: 22;
-    readonly rowMinHeight: 48;
-    readonly rowMinHeightWithSubtitle: 62;
+    readonly menuRowMinHeight: 48;
+    readonly rowMinHeight: 62;
     readonly rowLineGap: 2;
     readonly rowPaddingVertical: 12;
     readonly sheetFooterGap: 8;

package/dist/constants/ps-layout-config.js

@@ -18,8 +18,8 @@ export const PsLayoutConfig = {
     rowIconSize: 16,
     scrollEventThrottle: 16,
     selectMarkSize: 22,
-    rowMinHeight: 48,
-    rowMinHeightWithSubtitle: 62,
+    menuRowMinHeight: 48,
+    rowMinHeight: 62,
     rowLineGap: 2,
     rowPaddingVertical: 12,
     sheetFooterGap: 8,

package/dist/constants/ps-link-preview-config.d.ts

@@ -0,0 +1,19 @@
+export declare const PsLinkPreviewConfig: {
+    readonly compactBodyPadding: 12;
+    readonly compactImageMinHeight: 80;
+    readonly compactImageWidth: 96;
+    readonly descriptionLines: 2;
+    readonly domainPrefixPattern: RegExp;
+    readonly faviconRadius: 2;
+    readonly faviconSize: 16;
+    readonly fullBodyPadding: 16;
+    readonly imageAspectRatio: 1.91;
+    readonly metaGap: 8;
+    readonly portSuffixPattern: RegExp;
+    readonly skeletonLineGap: 8;
+    readonly skeletonMetaWidth: 96;
+    readonly skeletonTitleWidth: 192;
+    readonly textGap: 4;
+    readonly titleLines: 2;
+    readonly webAddressPattern: RegExp;
+};

package/dist/constants/ps-link-preview-config.js

@@ -0,0 +1,19 @@
+export const PsLinkPreviewConfig = {
+    compactBodyPadding: 12,
+    compactImageMinHeight: 80,
+    compactImageWidth: 96,
+    descriptionLines: 2,
+    domainPrefixPattern: /^www\./i,
+    faviconRadius: 2,
+    faviconSize: 16,
+    fullBodyPadding: 16,
+    imageAspectRatio: 1.91,
+    metaGap: 8,
+    portSuffixPattern: /:\d*$/,
+    skeletonLineGap: 8,
+    skeletonMetaWidth: 96,
+    skeletonTitleWidth: 192,
+    textGap: 4,
+    titleLines: 2,
+    webAddressPattern: /^https?:\/\/([^/?#\s]+)/i,
+};

package/dist/constants/ps-link-preview-size.d.ts

@@ -0,0 +1,5 @@
+export declare const PsLinkPreviewSize: {
+    readonly Compact: "compact";
+    readonly Full: "full";
+};
+export type PsLinkPreviewSize = (typeof PsLinkPreviewSize)[keyof typeof PsLinkPreviewSize];

package/dist/constants/ps-link-preview-size.js

@@ -0,0 +1,4 @@
+export const PsLinkPreviewSize = {
+    Compact: 'compact',
+    Full: 'full',
+};

package/dist/constants/ps-menu-popup-config.d.ts

@@ -8,4 +8,8 @@ export declare const PsMenuPopupConfig: {
     readonly remeasureMs: 250;
     readonly rowHeight: 48;
     readonly rowPaddingHorizontal: 16;
+    readonly tileFontSize: 14;
+    readonly tileLogoPadding: 3;
+    readonly tileRadius: 8;
+    readonly tileSize: 28;
 };

package/dist/constants/ps-menu-popup-config.js

@@ -8,4 +8,8 @@ export const PsMenuPopupConfig = {
     remeasureMs: 250,
     rowHeight: 48,
     rowPaddingHorizontal: 16,
+    tileFontSize: 14,
+    tileLogoPadding: 3,
+    tileRadius: 8,
+    tileSize: 28,
 };

package/dist/constants/ps-sheet-config.d.ts

@@ -1,6 +1,7 @@
 export declare const PsSheetConfig: {
     readonly actionMinWidth: 44;
     readonly actionSpinnerGap: 6;
+    readonly androidHeaderPaddingTop: 0;
     readonly cornerRadius: 20;
     readonly formSizingMinIos: 18;
     readonly headerMinHeight: 64;

package/dist/constants/ps-sheet-config.js

@@ -1,6 +1,7 @@
 export const PsSheetConfig = {
     actionMinWidth: 44,
     actionSpinnerGap: 6,
+    androidHeaderPaddingTop: 0,
     cornerRadius: 20,
     formSizingMinIos: 18,
     headerMinHeight: 64,

package/dist/hooks/use-ps-chart-reveal.js

@@ -1,17 +1,21 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { PsChartConfig } from '../constants/ps-chart-config';
+import { PsChartRevealService } from '../services/ps-chart-reveal-service';
 import { usePsMobileTheme } from './use-ps-mobile-theme';
 export const usePsChartReveal = (isReady, revealKey) => {
     const { isReduceMotion: isReduced } = usePsMobileTheme();
     const progress = useSharedValue(isReduced ? 1 : 0);
+    const played = useRef(null);
     useEffect(() => {
         if (isReduced) {
             progress.set(1);
             return;
         }
-        if (!isReady)
+        const token = PsChartRevealService.token(revealKey);
+        if (!PsChartRevealService.shouldPlay(isReady, played.current, token))
             return;
+        played.current = token;
         progress.set(0);
         progress.set(withTiming(1, { duration: PsChartConfig.drawMs }));
     }, [isReady, isReduced, progress, revealKey]);

package/dist/index.d.ts

@@ -133,6 +133,9 @@ export * from './components/ps-date-range-field';
 export * from './components/ps-statement-table';
 export * from './components/ps-action-sheet';
 export * from './components/ps-card';
+export * from './components/ps-link-preview-card';
+export * from './constants/ps-link-preview-size';
+export { PsLinkPreviewService } from './services/ps-link-preview-service';
 export * from './components/ps-checkbox';
 export * from './components/ps-chip';
 export * from './components/ps-icon-button';

package/dist/index.js

@@ -128,6 +128,9 @@ export * from './components/ps-date-range-field';
 export * from './components/ps-statement-table';
 export * from './components/ps-action-sheet';
 export * from './components/ps-card';
+export * from './components/ps-link-preview-card';
+export * from './constants/ps-link-preview-size';
+export { PsLinkPreviewService } from './services/ps-link-preview-service';
 export * from './components/ps-checkbox';
 export * from './components/ps-chip';
 export * from './components/ps-icon-button';

package/dist/interfaces/ps-link-preview-meta.d.ts

@@ -0,0 +1,5 @@
+export interface PsLinkPreviewMeta {
+    hasDescription: boolean;
+    hasTitle: boolean;
+    siteLabel: string;
+}

package/dist/interfaces/ps-link-preview-meta.js

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

package/dist/interfaces/ps-menu-item.d.ts

@@ -13,5 +13,6 @@ export interface PsMenuItem {
     monogram?: string;
     onSelect: () => void;
     subtitle?: string;
+    tileColor?: string;
     tone?: PsMenuItemTone;
 }

package/dist/interfaces/ps-menu-tile-request.d.ts

@@ -3,5 +3,6 @@ export interface PsMenuTileRequest {
     imageUri?: string;
     key: string;
     shape: PsMenuTileShape;
+    tileColor?: string;
     text: string;
 }

package/dist/services/ps-chart-reveal-service.d.ts

@@ -0,0 +1,4 @@
+export declare class PsChartRevealService {
+    static token(revealKey: string | undefined): string;
+    static shouldPlay(isReady: boolean, played: string | null, token: string): boolean;
+}

package/dist/services/ps-chart-reveal-service.js

@@ -0,0 +1,9 @@
+import { PsChartConfig } from '../constants/ps-chart-config';
+export class PsChartRevealService {
+    static token(revealKey) {
+        return revealKey === undefined ? PsChartConfig.revealDefaultToken : `key:${revealKey}`;
+    }
+    static shouldPlay(isReady, played, token) {
+        return isReady && played !== token;
+    }
+}

package/dist/services/ps-link-preview-service.d.ts

@@ -0,0 +1,12 @@
+import { PsLinkPreviewSize } from '../constants/ps-link-preview-size';
+import type { PsDocumentSource } from '../interfaces/ps-document-source';
+import type { PsLinkPreviewMeta } from '../interfaces/ps-link-preview-meta';
+export declare class PsLinkPreviewService {
+    static isWebAddress(href: string): boolean;
+    static domain(href: string): string;
+    static hasText(value: string | null | undefined): boolean;
+    static hasSource(source: PsDocumentSource | null | undefined, failedUri: string | null): boolean;
+    static isCompact(size: PsLinkPreviewSize): boolean;
+    static meta(href: string, title: string | null | undefined, siteName: string | null | undefined, description: string | null | undefined, size: PsLinkPreviewSize): PsLinkPreviewMeta;
+    static imageHeight(width: number): number;
+}

package/dist/services/ps-link-preview-service.js

@@ -0,0 +1,38 @@
+import { PsLinkPreviewConfig } from '../constants/ps-link-preview-config';
+import { PsLinkPreviewSize } from '../constants/ps-link-preview-size';
+export class PsLinkPreviewService {
+    static isWebAddress(href) {
+        return PsLinkPreviewConfig.webAddressPattern.test(href);
+    }
+    static domain(href) {
+        const match = PsLinkPreviewConfig.webAddressPattern.exec(href);
+        if (match === null)
+            return href;
+        const authority = match[1];
+        const host = authority
+            .slice(authority.lastIndexOf('@') + 1)
+            .replace(PsLinkPreviewConfig.portSuffixPattern, '');
+        return host.replace(PsLinkPreviewConfig.domainPrefixPattern, '');
+    }
+    static hasText(value) {
+        return value !== null && value !== undefined && value.trim() !== '';
+    }
+    static hasSource(source, failedUri) {
+        return source !== null && source !== undefined && source.uri !== '' && source.uri !== failedUri;
+    }
+    static isCompact(size) {
+        return size === PsLinkPreviewSize.Compact;
+    }
+    static meta(href, title, siteName, description, size) {
+        return {
+            hasDescription: PsLinkPreviewService.hasText(description) && !PsLinkPreviewService.isCompact(size),
+            hasTitle: PsLinkPreviewService.hasText(title),
+            siteLabel: siteName !== null && siteName !== undefined && PsLinkPreviewService.hasText(siteName)
+                ? siteName
+                : PsLinkPreviewService.domain(href),
+        };
+    }
+    static imageHeight(width) {
+        return Math.round(width / PsLinkPreviewConfig.imageAspectRatio);
+    }
+}

package/dist/services/ps-menu-tile-service.js

@@ -4,14 +4,14 @@ export class PsMenuTileService {
         if (!PsActionMenuService.hasAvatar(item))
             return null;
         const text = PsMenuTileService.letter(item.monogram === undefined ? item.label : item.monogram);
-        return PsMenuTileService.request('rounded', item.imageUri, text);
+        return PsMenuTileService.request('rounded', item.imageUri, text, item.tileColor);
     }
     static headerRequest(header) {
         if (header === undefined)
             return null;
         if (header.imageUri === undefined && header.initials === undefined)
             return null;
-        return PsMenuTileService.request('circle', header.imageUri, header.initials === undefined ? '' : header.initials.trim().toUpperCase());
+        return PsMenuTileService.request('circle', header.imageUri, header.initials === undefined ? '' : header.initials.trim().toUpperCase(), undefined);
     }
     static requests(header, sections) {
         const all = [
@@ -59,12 +59,18 @@ export class PsMenuTileService {
             return [item];
         return [item, ...item.children.flatMap((child) => PsMenuTileService.tree(child))];
     }
-    static request(shape, imageUri, text) {
+    static request(shape, imageUri, text, tileColor) {
         return {
             imageUri,
-            key: [shape, imageUri === undefined ? '' : imageUri, text].join('|'),
+            key: [
+                shape,
+                imageUri === undefined ? '' : imageUri,
+                text,
+                tileColor === undefined ? '' : tileColor,
+            ].join('|'),
             shape,
             text,
+            tileColor,
         };
     }
 }

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

@@ -7,6 +7,7 @@ export declare class PsSheetService {
     static fittedMaxWidth(windowWidth: number, layoutClass: PsLayoutClass): number | undefined;
     static supportsFormSizing(iosVersion: string | number): boolean;
     static handlesInset(os: string): boolean;
+    static headerPaddingTop(os: string): number;
     static bottomPadding(isFloating: boolean, bottomInset: number): number;
     static fittedHeight(headerHeight: number, bodyHeight: number, windowHeight: number, layoutClass?: PsLayoutClass): number;
     static raisedHeight(height: number, keyboardHeight: number, windowHeight: number, topInset: number): number;

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

@@ -20,6 +20,9 @@ export class PsSheetService {
     static handlesInset(os) {
         return os === 'ios' || os === 'android';
     }
+    static headerPaddingTop(os) {
+        return os === 'android' ? PsSheetConfig.androidHeaderPaddingTop : PsSheetConfig.headerPaddingTop;
+    }
     static bottomPadding(isFloating, bottomInset) {
         return PsLayoutConfig.sheetGutter + (isFloating ? 0 : bottomInset);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.13.1",
+	"version": "1.15.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",