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

package/dist/components/ps-icon-button/ps-icon-button-props.d.ts

@@ -0,0 +1,13 @@
+import type { PsIconKey } from '@pallasoft/ps-icons';
+import type { PsButtonSize } from '../ps-button/ps-button-props';
+export interface PsIconButtonProps {
+    backgroundColor?: string;
+    color?: string;
+    iconKey: PsIconKey;
+    isDisabled?: boolean;
+    label: string;
+    onPress?: () => void;
+    size?: PsButtonSize;
+    testID?: string;
+    variant?: 'default' | 'header';
+}

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

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

package/dist/components/ps-icon-button/ps-icon-button.d.ts

@@ -0,0 +1,2 @@
+import type { PsIconButtonProps } from './ps-icon-button-props';
+export declare const PsIconButton: ({ backgroundColor, color, iconKey, isDisabled, label, onPress, size, testID, variant, }: PsIconButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+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 { 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 { PsIcon } from '../ps-icon/ps-icon';
+export const PsIconButton = ({ backgroundColor, color, iconKey, isDisabled = false, label, onPress, size = 'default', testID, variant, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    const isInHeader = useContext(PsPageHeaderContext);
+    const isHeader = variant === undefined ? isInHeader : variant === 'header';
+    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
+            ? undefined
+            : () => {
+                haptic('light');
+                onPress();
+            }, testID: testID, style: ({ pressed }) => ({
+            alignItems: 'center',
+            backgroundColor: backgroundColor !== undefined
+                ? backgroundColor
+                : isHeader
+                    ? PsMobileColorService.withAlpha(theme.ink, pressed
+                        ? PsMobileControlConfig.neutralAlpha + PsMobileControlConfig.pressedAlpha
+                        : PsMobileControlConfig.neutralAlpha)
+                    : pressed
+                        ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                        : 'transparent',
+            borderRadius: isHeader ? dimension / 2 : PsMobileControlConfig.controlRadius,
+            height: dimension,
+            justifyContent: 'center',
+            opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+            width: dimension,
+        }), children: _jsx(PsIcon, { color: color === undefined ? theme.ink : color, iconKey: iconKey, size: isHeader ? PsPageHeaderConfig.iconSize : undefined }) }));
+};

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

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

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

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

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

@@ -0,0 +1,6 @@
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsIconMenuProps {
+    isDisabled?: boolean;
+    items: PsMenuItem[];
+    label: string;
+}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { PsActionMenu } from '../ps-action-menu/ps-action-menu';
+import { PsIconButton } from '../ps-icon-button/ps-icon-button';
+export const PsIconMenu = ({ isDisabled = false, items, label }) => {
+    if (items.length === 0)
+        return null;
+    return (_jsx(PsActionMenu, { isDisabled: isDisabled, items: items, label: label, children: ({ open }) => (_jsx(PsIconButton, { iconKey: PsIconKey.More, isDisabled: isDisabled, label: label, onPress: open })) }));
+};

package/dist/components/ps-kpi-card/index.d.ts

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

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

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

package/dist/components/ps-kpi-card/ps-kpi-card-props.d.ts

@@ -0,0 +1,9 @@
+import type { PsChartDeltaBadgeProps } from '../ps-chart-delta-badge/ps-chart-delta-badge-props';
+export interface PsKpiCardProps {
+    delta?: PsChartDeltaBadgeProps;
+    isLoading?: boolean;
+    period?: string;
+    title: string;
+    value: string;
+    values?: number[];
+}

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

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

package/dist/components/ps-kpi-card/ps-kpi-card.d.ts

@@ -0,0 +1,2 @@
+import type { PsKpiCardProps } from './ps-kpi-card-props';
+export declare const PsKpiCard: ({ delta, isLoading, period, title, value, values, }: PsKpiCardProps) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+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';
+import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
+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 }) }));
+};

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

@@ -0,0 +1,10 @@
+export * from './ps-list';
+export * from './ps-list-props';
+export * from './ps-list-row';
+export * from './ps-list-section';
+export * from './ps-list-action-row';
+export * from './ps-list-content';
+export * from './ps-list-select-row';
+export * from './ps-list-select-row-props';
+export * from './ps-list-person-row';
+export * from './ps-list-person-row-props';

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

@@ -0,0 +1,10 @@
+export * from './ps-list';
+export * from './ps-list-props';
+export * from './ps-list-row';
+export * from './ps-list-section';
+export * from './ps-list-action-row';
+export * from './ps-list-content';
+export * from './ps-list-select-row';
+export * from './ps-list-select-row-props';
+export * from './ps-list-person-row';
+export * from './ps-list-person-row-props';

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

@@ -0,0 +1,2 @@
+import type { PsListActionRowProps } from './ps-list-props';
+export declare const PsListActionRow: ({ children, iconKey, isDisabled, onPress, tone, }: PsListActionRowProps) => import("react").JSX.Element;

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

@@ -0,0 +1,24 @@
+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 { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMobileColorService } from '../../services/ps-mobile-color-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 }) => ({
+            alignItems: 'center',
+            backgroundColor: pressed
+                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                : theme.surface,
+            flexDirection: 'row',
+            gap: PsMobileControlConfig.rowSpacing,
+            minHeight: PsLayoutConfig.rowMinHeight,
+            opacity: isDisabled ? PsMobileControlConfig.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-content.d.ts

@@ -0,0 +1,2 @@
+import type { PsListContentProps } from './ps-list-props';
+export declare const PsListContent: ({ children, isEdgeToEdge }: PsListContentProps) => import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsListConfig } from '../../constants/ps-list-config';
+export const PsListContent = ({ children, isEdgeToEdge = false }) => (_jsx(View, { style: { padding: isEdgeToEdge ? 0 : PsListConfig.contentInset }, testID: 'ps-list-content', children: children }));

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuView } from '@react-native-menu/menu';
+import { Platform } from 'react-native';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsContextMenuService } from '../../services/ps-context-menu-service';
+export const PsListContextMenu = ({ children, items, title }) => {
+    const theme = usePsMobileTheme();
+    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();
+        }, shouldOpenOnLongPress: true, testID: 'ps-list-context-menu', themeVariant: theme.isDark ? 'dark' : 'light', title: title, children: children }));
+};

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

@@ -0,0 +1,7 @@
+import type { PsListRowBadge } from './ps-list-props';
+export interface PsListPersonRowProps {
+    badge?: PsListRowBadge;
+    initials: string;
+    subtitle?: string;
+    title: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsListPersonRowProps } from './ps-list-person-row-props';
+export declare const PsListPersonRow: ({ badge, initials, subtitle, title }: PsListPersonRowProps) => import("react").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsAvatar } from '../ps-avatar/ps-avatar';
+import { PsBadge } from '../ps-badge/ps-badge';
+import { PsText } from '../ps-text/ps-text';
+export const PsListPersonRow = ({ badge, initials, subtitle, title }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            backgroundColor: theme.surface,
+            flexDirection: 'row',
+            gap: PsLayoutConfig.headerSlotGap,
+            minHeight: subtitle === undefined
+                ? PsLayoutConfig.rowMinHeight
+                : PsLayoutConfig.rowMinHeightWithSubtitle,
+            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-props.d.ts

@@ -0,0 +1,72 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { PsIconKey } from '@pallasoft/ps-icons';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+import type { PsBadgeTone } from '../../services/ps-badge-tone-service';
+import type { PsListVariant } from '../../services/ps-list-service';
+export interface PsSkeletonRowLayout {
+    depth?: number;
+    isSection?: boolean;
+}
+export interface PsListSkeletonLayout {
+    hasLeadingIcon?: boolean;
+    hasSubtitle?: boolean;
+    hasValue?: boolean;
+    rowLayout?: PsSkeletonRowLayout[];
+    rows?: number;
+    sections?: number;
+}
+export interface PsListSkeletonResolved {
+    hasLeadingIcon: boolean;
+    hasSubtitle: boolean;
+    hasValue: boolean;
+    rowLayout: PsSkeletonRowLayout[] | undefined;
+    rows: number;
+    sections: number;
+}
+export interface PsListProps {
+    children: ReactNode;
+    header?: ReactNode;
+    isLoading?: boolean;
+    onRefresh?: () => Promise<void>;
+    skeleton?: PsListSkeletonLayout;
+    style?: StyleProp<ViewStyle>;
+    variant?: PsListVariant;
+}
+export interface PsListSectionProps {
+    children: ReactNode;
+    footer?: string;
+    title?: string;
+}
+export interface PsListRowBadge {
+    label: string;
+    tone?: PsBadgeTone;
+}
+export interface PsListRowProps {
+    actions?: PsMenuItem[];
+    badge?: PsListRowBadge;
+    hasChevron?: boolean;
+    isLoading?: boolean;
+    isSection?: boolean;
+    isSelectable?: boolean;
+    isSelected?: boolean;
+    leadingSwipe?: PsMenuItem;
+    leadingIcon?: PsIconKey;
+    onPress?: () => void;
+    skeleton?: PsListSkeletonLayout;
+    subtitle?: string;
+    trailingSwipe?: PsMenuItem;
+    title: string;
+    value?: string;
+}
+export interface PsListActionRowProps {
+    children: string;
+    iconKey?: PsIconKey;
+    isDisabled?: boolean;
+    onPress: () => void;
+    tone?: 'primary' | 'destructive';
+}
+export interface PsListContentProps {
+    children: ReactElement;
+    isEdgeToEdge?: boolean;
+}

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

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

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

@@ -0,0 +1,6 @@
+import type { PsListRowProps } from './ps-list-props';
+export interface PsListRowBodyProps extends Pick<PsListRowProps, 'badge' | 'hasChevron' | 'isSelectable' | 'isSelected' | '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;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMobileColorService } from '../../services/ps-mobile-color-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, }) => {
+    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 }) => ({
+            alignItems: 'center',
+            backgroundColor: pressed
+                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                : theme.surface,
+            flexDirection: 'row',
+            gap: PsLayoutConfig.headerSlotGap,
+            minHeight: hasSecondLine
+                ? PsLayoutConfig.rowMinHeightWithSubtitle
+                : 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: {
+                    alignItems: 'center',
+                    backgroundColor: theme.primarySoft,
+                    borderRadius: PsLayoutConfig.rowIconBoxRadius,
+                    height: PsLayoutConfig.rowIconBox,
+                    justifyContent: 'center',
+                    width: PsLayoutConfig.rowIconBox,
+                }, children: _jsx(PsIcon, { color: theme.ink, iconKey: leadingIcon, size: PsLayoutConfig.rowIconSize }) })), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsxs(View, { style: {
+                            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: {
+                                    flexShrink: 1,
+                                    maxWidth: PsLayoutConfig.rowValueMaxWidth,
+                                    textAlign: 'right',
+                                }, variant: 'numeric', children: value }))] }), hasSecondLine ? (_jsxs(View, { style: {
+                            alignItems: 'center',
+                            flexDirection: 'row',
+                            gap: PsLayoutConfig.headerSlotGap,
+                        }, children: [_jsx(PsText, { numberOfLines: 1, style: { flex: 1, flexShrink: 1 }, tone: 'muted', variant: 'small', children: subtitle === undefined ? '' : subtitle }), badge === undefined ? null : (_jsx(PsBadge, { size: 'small', tone: badge.tone, children: badge.label }))] })) : null] }), hasChevron ? (_jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ChevronRight, size: PsMobileControlConfig.iconSizeInline })) : null] }));
+};

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

@@ -0,0 +1,4 @@
+export interface PsListRowSelectMarkProps {
+    isSelected: boolean;
+}
+export declare const PsListRowSelectMark: ({ isSelected }: PsListRowSelectMarkProps) => import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsIcon } from '../ps-icon/ps-icon';
+export const PsListRowSelectMark = ({ isSelected }) => {
+    const theme = usePsMobileTheme();
+    return (_jsx(View, { style: {
+            alignItems: 'center',
+            backgroundColor: isSelected ? theme.primary : 'transparent',
+            borderColor: isSelected ? theme.primary : theme.line,
+            borderRadius: PsLayoutConfig.selectMarkSize / 2,
+            borderWidth: 1,
+            height: PsLayoutConfig.selectMarkSize,
+            justifyContent: 'center',
+            width: PsLayoutConfig.selectMarkSize,
+        }, testID: 'ps-list-row-select-mark', children: isSelected ? (_jsx(PsIcon, { color: theme.primaryContrast, iconKey: PsIconKey.Check, size: PsMobileControlConfig.iconSizeInline })) : null }));
+};

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

@@ -0,0 +1,3 @@
+import type { PsListRowProps } from './ps-list-props';
+export type PsListRowSkeletonProps = Pick<PsListRowProps, 'badge' | 'isSection' | 'leadingIcon' | 'skeleton' | 'subtitle' | 'value'>;
+export declare const PsListRowSkeleton: ({ badge, isSection, leadingIcon, skeleton, subtitle, value, }: PsListRowSkeletonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsListConfig } from '../../constants/ps-list-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { PsListSkeletonService } from '../../services/ps-list-skeleton-service';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsListRowSkeleton = ({ badge, isSection = false, leadingIcon, skeleton, subtitle, value, }) => {
+    const shape = PsListSkeletonService.resolve(skeleton);
+    const hasIcon = shape.hasLeadingIcon || leadingIcon !== undefined;
+    const hasSubtitle = !isSection && (shape.hasSubtitle || subtitle !== undefined);
+    const hasValue = shape.hasValue || value !== undefined;
+    const hasBadge = !isSection && badge !== undefined;
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: PsLayoutConfig.headerSlotGap,
+            minHeight: hasSubtitle
+                ? PsLayoutConfig.rowMinHeightWithSubtitle
+                : 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: {
+                            alignItems: 'center',
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                        }, children: [_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: isSection ? PsListConfig.sectionRowTitleWidth : PsListConfig.skeletonTitleWidth }), hasValue ? (_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsListConfig.skeletonValueWidth })) : null] }), hasSubtitle ? (_jsxs(View, { style: {
+                            alignItems: 'center',
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                        }, children: [_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsListConfig.skeletonSubtitleWidth }), hasBadge ? (_jsx(PsSkeleton, { height: PsMobileControlConfig.badgeSmallHeight, shape: PsSkeletonShape.Badge, width: PsListConfig.skeletonBadgeWidth })) : null] })) : null] })] }));
+};

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

@@ -0,0 +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;

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

@@ -0,0 +1,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 { 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, }) => {
+    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 }));
+    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-section.d.ts

@@ -0,0 +1,2 @@
+import type { PsListSectionProps } from './ps-list-props';
+export declare const PsListSection: ({ children, footer, title }: PsListSectionProps) => import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsListConfig } from '../../constants/ps-list-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsListService } from '../../services/ps-list-service';
+import { PsCard } from '../ps-card/ps-card';
+import { PsText } from '../ps-text/ps-text';
+export const PsListSection = ({ children, footer, title }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(View, { style: { gap: PsLayoutConfig.listSectionGap }, children: [title === undefined ? null : (_jsx(PsText, { accessibilityRole: 'header', tone: 'muted', variant: 'label', children: title })), _jsx(PsCard, { padding: 'none', children: PsListService.interleave(children, (key) => (_jsx(View, { style: {
+                        backgroundColor: theme.line,
+                        height: 1,
+                        marginLeft: PsListConfig.dividerInset,
+                    } }, key))) }), footer === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: footer }))] }));
+};

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { PsSelectOption } from '../ps-select/ps-select-props';
+export interface PsListSelectRowProps {
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    onChange: (value: string) => void;
+    options: PsSelectOption[];
+    subtitle?: string;
+    title: string;
+    value: string;
+    valueAccessory?: ReactNode;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsListSelectRowProps } from './ps-list-select-row-props';
+export declare const PsListSelectRow: ({ isDisabled, isLoading, onChange, options, subtitle, title, value, valueAccessory, }: PsListSelectRowProps) => import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+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 { PsIcon } from '../ps-icon/ps-icon';
+import { PsNativeMenu } from '../ps-native-menu/ps-native-menu';
+import { PsText } from '../ps-text/ps-text';
+import { PsListRowSkeleton } from './ps-list-row-skeleton';
+export const PsListSelectRow = ({ isDisabled = false, isLoading = false, onChange, options, subtitle, title, value, valueAccessory, }) => {
+    const theme = usePsMobileTheme();
+    if (isLoading)
+        return _jsx(PsListRowSkeleton, { subtitle: subtitle, value: value });
+    return (_jsx(PsNativeMenu, { isDisabled: isDisabled, isFullWidth: true, items: PsNativeMenuService.items(options, value), label: title, onSelect: onChange, children: () => (_jsxs(View, { accessibilityRole: 'button', accessibilityValue: { text: PsSelectService.selectedLabel(options, value) }, style: {
+                alignItems: 'center',
+                backgroundColor: theme.surface,
+                flexDirection: 'row',
+                gap: PsLayoutConfig.headerSlotGap,
+                minHeight: PsLayoutConfig.rowMinHeight,
+                opacity: isDisabled ? PsMobileControlConfig.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-list/ps-list-swipe-layer.d.ts

@@ -0,0 +1,10 @@
+import { type SharedValue } from 'react-native-reanimated';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsListSwipeLayerProps {
+    armed: SharedValue<number>;
+    isLeading: boolean;
+    item: PsMenuItem;
+    translateX: SharedValue<number>;
+    width: number;
+}
+export declare const PsListSwipeLayer: ({ armed, isLeading, item, translateX, width, }: PsListSwipeLayerProps) => import("react").JSX.Element;

package/dist/components/ps-list/ps-list-swipe-layer.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import { PsSwipeConfig } from '../../constants/ps-swipe-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsSwipeActionService } from '../../services/ps-swipe-action-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+export const PsListSwipeLayer = ({ armed, isLeading, item, translateX, width, }) => {
+    const theme = usePsMobileTheme();
+    const reach = width * PsSwipeConfig.commitFraction;
+    const layerStyle = useAnimatedStyle(() => ({
+        opacity: isLeading ? (translateX.value > 0 ? 1 : 0) : translateX.value < 0 ? 1 : 0,
+    }));
+    const iconStyle = useAnimatedStyle(() => {
+        const progress = reach === 0 ? 0 : Math.min(1, Math.abs(translateX.value) / reach);
+        return {
+            opacity: interpolate(progress, [0, 0.4], [0, 1], 'clamp'),
+            transform: [
+                {
+                    scale: interpolate(progress, [0, 1], [PsSwipeConfig.startIconScale, 1], 'clamp') *
+                        interpolate(armed.value, [0, 1], [1, PsSwipeConfig.armedScale]),
+                },
+            ],
+        };
+    });
+    return (_jsx(Animated.View, { pointerEvents: 'none', style: [
+            StyleSheet.absoluteFill,
+            {
+                alignItems: isLeading ? 'flex-start' : 'flex-end',
+                backgroundColor: PsSwipeActionService.background(item, theme),
+                justifyContent: 'center',
+                paddingHorizontal: PsSwipeConfig.iconInset,
+            },
+            layerStyle,
+        ], testID: `ps-list-swipe-${item.id}`, children: _jsx(Animated.View, { style: iconStyle, children: item.iconKey === undefined ? null : (_jsx(PsIcon, { color: PsSwipeActionService.foreground(item, theme), iconKey: item.iconKey, size: PsSwipeConfig.iconSize })) }) }));
+};