@pallasoft/ps-mobile-components 1.2.0 → 1.4.0

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

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

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

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

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

@@ -2,23 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pressable } from 'react-native';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
-import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
+import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
 export const PsListActionRow = ({ children, iconKey, isDisabled = false, onPress, tone = 'primary', }) => {
     const theme = usePsMobileTheme();
     const isDestructive = tone === 'destructive';
     const color = isDestructive ? theme.danger : theme.ink;
-    return (_jsxs(Pressable, { accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, onPress: onPress, style: ({ pressed }) => ({
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, isDestructive ? PsRippleKind.Danger : PsRippleKind.Surface), accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, onPress: onPress, style: ({ pressed }) => ({
             alignItems: 'center',
-            backgroundColor: pressed
-                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
-                : theme.surface,
+            backgroundColor: pressed ? PsStateService.pressedFill(theme, theme.surface) : theme.surface,
             flexDirection: 'row',
             gap: PsMobileControlConfig.rowSpacing,
             minHeight: PsLayoutConfig.rowMinHeight,
-            opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+            opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
             paddingHorizontal: PsLayoutConfig.gutter,
         }), testID: 'ps-list-action-row', children: [iconKey === undefined ? null : _jsx(PsIcon, { color: color, iconKey: iconKey }), _jsx(PsText, { style: { color }, weight: 'semibold', children: children })] }));
 };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,9 +3,11 @@ import { PsIconKey } from '@pallasoft/ps-icons';
 import { Pressable, View } from 'react-native';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
-import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
+import { PsStateService } from '../../services/ps-state-service';
 import { PsCountBadge } from '../ps-count-badge/ps-count-badge';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
@@ -16,14 +18,12 @@ export const PsListLinkRow = ({ count, countLabel, iconKey, isAlert = false, isL
     if (isLoading)
         return _jsx(PsListLinkRowSkeleton, {});
     const hasCount = count !== undefined && count > 0;
-    return (_jsxs(Pressable, { accessibilityHint: countLabel, accessibilityRole: 'button', onPress: () => {
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityHint: countLabel, accessibilityRole: 'button', onPress: () => {
             haptic('light');
             onPress();
         }, style: ({ pressed }) => ({
             alignItems: 'center',
-            backgroundColor: pressed
-                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
-                : theme.surface,
+            backgroundColor: pressed ? PsStateService.pressedFill(theme, theme.surface) : theme.surface,
             flexDirection: 'row',
             gap: PsLayoutConfig.headerSlotGap,
             minHeight: PsLayoutConfig.linkRowMinHeight,
@@ -36,5 +36,5 @@ export const PsListLinkRow = ({ count, countLabel, iconKey, isAlert = false, isL
                     height: PsLayoutConfig.linkRowIconBox,
                     justifyContent: 'center',
                     width: PsLayoutConfig.linkRowIconBox,
-                }, children: _jsx(PsIcon, { color: theme.primary, iconKey: iconKey, size: PsLayoutConfig.linkRowIconSize }) }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }), hasCount ? _jsx(PsCountBadge, { count: count, isAlert: isAlert, label: countLabel }) : null, _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ChevronRight, size: PsMobileControlConfig.iconSizeInline })] }));
+                }, children: _jsx(PsIcon, { color: theme.primaryText, iconKey: iconKey, size: PsLayoutConfig.linkRowIconSize }) }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }), hasCount ? _jsx(PsCountBadge, { count: count, isAlert: isAlert, label: countLabel }) : null, _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ChevronRight, size: PsMobileControlConfig.iconSizeInline })] }));
 };

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

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

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

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

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

@@ -3,21 +3,22 @@ import { PsIconKey } from '@pallasoft/ps-icons';
 import { Pressable, View } from 'react-native';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
-import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsListRowStyleService } from '../../services/ps-list-row-style-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsBadge } from '../ps-badge/ps-badge';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
 import { PsListRowSelectMark } from './ps-list-row-select-mark';
-export const PsListRowBody = ({ badge, hasChevron = false, hasMenu, isSelectable = false, isSelected = false, leadingIcon, onLongPress, onPress, subtitle, title, value, }) => {
+export const PsListRowBody = ({ badge, hasChevron = false, hasMenu, isSelectable = false, isSelected = false, isValueStacked = false, leadingIcon, onLongPress, onPress, subtitle, title, value, }) => {
     const theme = usePsMobileTheme();
     const isInteractive = onPress !== undefined || hasMenu;
     const hasSecondLine = subtitle !== undefined || badge !== undefined;
-    return (_jsxs(Pressable, { accessibilityRole: onPress === undefined ? undefined : 'button', accessibilityState: isSelectable ? { selected: isSelected } : undefined, delayLongPress: PsLayoutConfig.longPressDelayMs, disabled: !isInteractive, onLongPress: hasMenu ? onLongPress : undefined, onPress: onPress, style: ({ pressed }) => ({
+    const isStacked = isValueStacked && value !== undefined;
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: onPress === undefined ? undefined : 'button', accessibilityState: isSelectable ? { selected: isSelected } : undefined, delayLongPress: PsLayoutConfig.longPressDelayMs, disabled: !isInteractive, onLongPress: hasMenu ? onLongPress : undefined, onPress: onPress, style: ({ pressed }) => ({
             alignItems: 'center',
-            backgroundColor: pressed
-                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
-                : theme.surface,
+            backgroundColor: PsListRowStyleService.background(isSelectable && isSelected, pressed, theme),
             flexDirection: 'row',
             gap: PsLayoutConfig.headerSlotGap,
             minHeight: hasSecondLine
@@ -36,11 +37,11 @@ export const PsListRowBody = ({ badge, hasChevron = false, hasMenu, isSelectable
                             alignItems: 'center',
                             flexDirection: 'row',
                             gap: PsLayoutConfig.headerSlotGap,
-                        }, children: [_jsx(PsText, { numberOfLines: 1, style: { flex: 1, flexShrink: 1 }, weight: 'semibold', children: title }), value === undefined ? null : (_jsx(PsText, { ellipsizeMode: 'middle', numberOfLines: 1, style: {
+                        }, children: [_jsx(PsText, { numberOfLines: 1, style: { flex: 1, flexShrink: 1 }, tone: isStacked ? 'muted' : 'ink', variant: isStacked ? 'small' : undefined, weight: 'semibold', children: title }), value === undefined || isStacked ? null : (_jsx(PsText, { ellipsizeMode: 'middle', numberOfLines: 1, style: {
                                     flexShrink: 1,
                                     maxWidth: PsLayoutConfig.rowValueMaxWidth,
                                     textAlign: 'right',
-                                }, variant: 'numeric', children: value }))] }), hasSecondLine ? (_jsxs(View, { style: {
+                                }, variant: 'numeric', children: value }))] }), isStacked ? _jsx(PsText, { children: value }) : null, hasSecondLine ? (_jsxs(View, { style: {
                             alignItems: 'center',
                             flexDirection: 'row',
                             gap: PsLayoutConfig.headerSlotGap,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsMenuPopupDivider = () => {
+    const theme = usePsMobileTheme();
+    return _jsx(View, { style: { backgroundColor: theme.line, height: 1 } });
+};

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

@@ -0,0 +1,5 @@
+export interface PsMenuPopupHeaderProps {
+    subtitle?: string;
+    title: string;
+}
+export declare const PsMenuPopupHeader: ({ subtitle, title }: PsMenuPopupHeaderProps) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { PsText } from '../ps-text/ps-text';
+export const PsMenuPopupHeader = ({ subtitle, title }) => (_jsxs(View, { style: {
+        paddingHorizontal: PsMenuPopupConfig.rowPaddingHorizontal,
+        paddingVertical: PsMenuPopupConfig.paddingVertical,
+    }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }));

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Pressable, View } from 'react-native';
+import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+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, }) => {
+    const theme = usePsMobileTheme();
+    const tint = isDanger ? theme.danger : theme.ink;
+    return (_jsxs(Pressable, { accessibilityRole: 'menuitem', accessibilityState: { disabled: isDisabled, selected: isChecked }, disabled: isDisabled, onPress: onPress, style: ({ pressed }) => ({
+            alignItems: 'center',
+            backgroundColor: pressed ? theme.primarySoft : 'transparent',
+            flexDirection: 'row',
+            gap: PsMobileControlConfig.rowSpacing,
+            minHeight: PsMenuPopupConfig.rowHeight,
+            opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
+            paddingHorizontal: PsMenuPopupConfig.rowPaddingHorizontal,
+        }), 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: isChecked ? 'semibold' : 'regular', 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.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { PsMenuAnchor } from '../../interfaces/ps-menu-anchor';
+export interface PsMenuPopupProps {
+    anchor: PsMenuAnchor;
+    children: ReactNode;
+    isFullWidth?: boolean;
+    onClose: () => void;
+}
+export declare const PsMenuPopup: ({ anchor, children, isFullWidth, onClose, }: PsMenuPopupProps) => import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Modal, Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMenuPopupService } from '../../services/ps-menu-popup-service';
+export const PsMenuPopup = ({ anchor, children, isFullWidth = false, onClose, }) => {
+    const theme = usePsMobileTheme();
+    const window = useWindowDimensions();
+    const [size, setSize] = useState(undefined);
+    const layout = size === undefined
+        ? undefined
+        : PsMenuPopupService.layout(anchor, window, size.height, size.width, isFullWidth);
+    return (_jsxs(Modal, { animationType: 'fade', navigationBarTranslucent: true, onRequestClose: onClose, statusBarTranslucent: true, transparent: true, visible: true, children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: onClose, style: StyleSheet.absoluteFill, testID: 'ps-menu-popup-backdrop' }), _jsx(View, { onLayout: (event) => {
+                    if (size === undefined)
+                        setSize({
+                            height: event.nativeEvent.layout.height,
+                            width: event.nativeEvent.layout.width,
+                        });
+                }, pointerEvents: layout === undefined ? 'none' : 'auto', style: {
+                    backgroundColor: theme.surface,
+                    borderColor: theme.line,
+                    borderRadius: PsMenuPopupConfig.radius,
+                    borderWidth: 1,
+                    left: layout === undefined ? 0 : layout.left,
+                    maxHeight: layout === undefined ? undefined : layout.maxHeight,
+                    maxWidth: PsMenuPopupConfig.maxWidth,
+                    minWidth: isFullWidth ? undefined : PsMenuPopupConfig.minWidth,
+                    opacity: layout === undefined ? 0 : 1,
+                    overflow: 'hidden',
+                    position: 'absolute',
+                    top: layout === undefined ? 0 : layout.top,
+                    width: layout === undefined ? undefined : layout.width,
+                }, testID: 'ps-menu-popup', children: _jsx(ScrollView, { bounces: false, contentContainerStyle: { paddingVertical: PsMenuPopupConfig.paddingVertical }, children: children }) })] }));
+};

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { PallasoftProductBrand } from '@pallasoft/ps-design-system';
 import type { PsChartPaletteColors } from '../../interfaces/ps-chart-palette-colors';
 import type { PsColorSchemeChoice } from '../../interfaces/ps-color-scheme-choice';
 export interface PsMobileThemeProviderProps {
@@ -6,8 +7,10 @@ export interface PsMobileThemeProviderProps {
     children: ReactNode;
     colorScheme?: PsColorSchemeChoice;
     hasHaptics?: boolean;
+    isBrandChart?: boolean;
     isReduceMotion?: boolean;
-    primaryColor: string;
-    primaryContrastColor: string;
+    primaryColor?: string;
+    primaryContrastColor?: string;
+    product?: PallasoftProductBrand;
     secondaryColor?: string;
 }

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

@@ -1,2 +1,2 @@
 import type { PsMobileThemeProviderProps } from './ps-mobile-theme-provider-props';
-export declare const PsMobileThemeProvider: ({ chartPalette, children, colorScheme, hasHaptics, isReduceMotion, primaryColor, primaryContrastColor, secondaryColor, }: PsMobileThemeProviderProps) => import("react").JSX.Element;
+export declare const PsMobileThemeProvider: ({ chartPalette, children, colorScheme, hasHaptics, isBrandChart, isReduceMotion, primaryColor, primaryContrastColor, product, secondaryColor, }: PsMobileThemeProviderProps) => import("react").JSX.Element;

package/dist/components/ps-mobile-theme-provider/ps-mobile-theme-provider.js

@@ -1,32 +1,48 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { ThemeProvider } from 'expo-router';
 import { useColorScheme } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
 import { PsMobileThemeContext } from '../../contexts/ps-mobile-theme-context';
+import { PsMobileBrandService } from '../../services/ps-mobile-brand-service';
 import { PsMobileThemeService } from '../../services/ps-mobile-theme-service';
-export const PsMobileThemeProvider = ({ chartPalette, children, colorScheme, hasHaptics, isReduceMotion, primaryColor, primaryContrastColor, secondaryColor, }) => {
+import { PsNavigationThemeService } from '../../services/ps-navigation-theme-service';
+export const PsMobileThemeProvider = ({ chartPalette, children, colorScheme, hasHaptics, isBrandChart, isReduceMotion, primaryColor, primaryContrastColor, product, secondaryColor, }) => {
     const scheme = useColorScheme();
     const isSystemReduced = useReducedMotion();
     const isDark = colorScheme === undefined || colorScheme === 'system'
         ? scheme === 'dark'
         : colorScheme === 'dark';
     const isReduced = isSystemReduced || isReduceMotion === true;
-    const theme = useMemo(() => PsMobileThemeService.create({
-        chart: chartPalette === undefined ? undefined : isDark ? chartPalette.dark : chartPalette.light,
-        hasHaptics,
-        isDark,
-        isReduceMotion: isReduced,
-        primary: primaryColor,
-        primaryContrast: primaryContrastColor,
-        secondary: secondaryColor,
-    }), [
+    const theme = useMemo(() => {
+        const brand = PsMobileBrandService.resolve({
+            primaryColor,
+            primaryContrastColor,
+            product,
+            secondaryColor,
+        });
+        return PsMobileThemeService.create({
+            chart: chartPalette === undefined ? undefined : isDark ? chartPalette.dark : chartPalette.light,
+            hasBrandSecondary: secondaryColor !== undefined,
+            hasHaptics,
+            isBrandChart,
+            isDark,
+            isReduceMotion: isReduced,
+            primary: brand.primary,
+            primaryContrast: brand.primaryContrast,
+            secondary: brand.secondary,
+        });
+    }, [
         chartPalette,
         hasHaptics,
+        isBrandChart,
         isDark,
         isReduced,
         primaryColor,
         primaryContrastColor,
+        product,
         secondaryColor,
     ]);
-    return _jsx(PsMobileThemeContext.Provider, { value: theme, children: children });
+    const navigation = useMemo(() => PsNavigationThemeService.from(theme), [theme]);
+    return (_jsx(PsMobileThemeContext.Provider, { value: theme, children: _jsx(ThemeProvider, { value: navigation, children: children }) }));
 };