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

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsListSwipeRowProps {
+    children: ReactNode;
+    leading?: PsMenuItem;
+    trailing?: PsMenuItem;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsListSwipeRowProps } from './ps-list-swipe-row-props';
+export declare const PsListSwipeRow: ({ children, leading, trailing }: PsListSwipeRowProps) => import("react").JSX.Element;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { View } from 'react-native';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
+import { PsSwipeConfig } from '../../constants/ps-swipe-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsSwipeService } from '../../services/ps-swipe-service';
+import { PsListSwipeLayer } from './ps-list-swipe-layer';
+export const PsListSwipeRow = ({ children, leading, trailing }) => {
+    const theme = usePsMobileTheme();
+    const haptic = usePsHaptics();
+    const translateX = useSharedValue(0);
+    const armed = useSharedValue(0);
+    const isArmed = useRef(false);
+    const [width, setWidth] = useState(0);
+    const setArmed = (next) => {
+        if (next === isArmed.current)
+            return;
+        isArmed.current = next;
+        armed.value = withTiming(next ? 1 : 0, { duration: PsSwipeConfig.armDurationMs });
+        if (next)
+            haptic('medium');
+    };
+    const commit = (item, direction) => {
+        translateX.value = withTiming(direction * width, { duration: PsSwipeConfig.exitMs });
+        setTimeout(() => {
+            haptic('success');
+            item.onSelect();
+            translateX.value = withSpring(0, PsSwipeConfig.spring);
+        }, PsSwipeConfig.exitMs);
+    };
+    const pan = usePanGesture({
+        activeOffsetX: [-PsSwipeConfig.activeOffset, PsSwipeConfig.activeOffset],
+        enabled: leading !== undefined || trailing !== undefined,
+        failOffsetY: [-PsSwipeConfig.failOffsetY, PsSwipeConfig.failOffsetY],
+        onDeactivate: (event) => {
+            const x = translateX.value;
+            const item = x > 0 ? leading : trailing;
+            setArmed(false);
+            if (item !== undefined && PsSwipeService.shouldCommit(x, event.velocityX, width)) {
+                commit(item, Math.sign(x));
+                return;
+            }
+            translateX.value = withSpring(0, PsSwipeConfig.spring);
+        },
+        onUpdate: (event) => {
+            const x = PsSwipeService.clamp(event.translationX, leading !== undefined, trailing !== undefined, width);
+            translateX.value = x;
+            setArmed(PsSwipeService.isArmed(x, width));
+        },
+        runOnJS: true,
+    });
+    const rowStyle = useAnimatedStyle(() => ({ transform: [{ translateX: translateX.value }] }));
+    return (_jsxs(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { overflow: 'hidden' }, children: [leading === undefined ? null : (_jsx(PsListSwipeLayer, { armed: armed, isLeading: true, item: leading, translateX: translateX, width: width })), trailing === undefined ? null : (_jsx(PsListSwipeLayer, { armed: armed, isLeading: false, item: trailing, translateX: translateX, width: width })), _jsx(GestureDetector, { gesture: pan, children: _jsx(Animated.View, { style: [{ backgroundColor: theme.surface }, rowStyle], children: children }) })] }));
+};

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

@@ -0,0 +1,2 @@
+import type { PsListProps } from './ps-list-props';
+export declare const PsList: ({ children, header, isLoading, onRefresh, skeleton, style, variant, }: PsListProps) => import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsListService } from '../../services/ps-list-service';
+import { PsScreen } from '../ps-screen/ps-screen';
+import { PsSkeletonList } from '../ps-skeleton/ps-skeleton-list';
+export const PsList = ({ children, header, isLoading = false, onRefresh, skeleton, style, variant = 'grouped', }) => (_jsx(PsScreen, { gap: PsLayoutConfig.listGap, hasGutter: PsListService.hasGutter(variant), header: header, onRefresh: onRefresh, style: style, children: isLoading ? _jsx(PsSkeletonList, { layout: skeleton }) : children }));

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

@@ -0,0 +1,2 @@
+export * from './ps-mobile-theme-provider';
+export * from './ps-mobile-theme-provider-props';

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

@@ -0,0 +1,2 @@
+export * from './ps-mobile-theme-provider';
+export * from './ps-mobile-theme-provider-props';

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { PsChartPaletteColors } from '../../interfaces/ps-chart-palette-colors';
+import type { PsColorSchemeChoice } from '../../interfaces/ps-color-scheme-choice';
+export interface PsMobileThemeProviderProps {
+    chartPalette?: PsChartPaletteColors;
+    children: ReactNode;
+    colorScheme?: PsColorSchemeChoice;
+    hasHaptics?: boolean;
+    isReduceMotion?: boolean;
+    primaryColor: string;
+    primaryContrastColor: string;
+    secondaryColor?: string;
+}

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { useReducedMotion } from 'react-native-reanimated';
+import { PsMobileThemeContext } from '../../contexts/ps-mobile-theme-context';
+import { PsMobileThemeService } from '../../services/ps-mobile-theme-service';
+export const PsMobileThemeProvider = ({ chartPalette, children, colorScheme, hasHaptics, isReduceMotion, primaryColor, primaryContrastColor, 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,
+    }), [
+        chartPalette,
+        hasHaptics,
+        isDark,
+        isReduced,
+        primaryColor,
+        primaryContrastColor,
+        secondaryColor,
+    ]);
+    return _jsx(PsMobileThemeContext.Provider, { value: theme, children: children });
+};

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

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

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

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

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

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+import type { PsNativeMenuItem } from '../../interfaces/ps-native-menu-item';
+export interface PsNativeMenuTriggerState {
+    isOpen: boolean;
+    open: () => void;
+}
+export interface PsNativeMenuProps {
+    children: (state: PsNativeMenuTriggerState) => ReactElement;
+    isDisabled?: boolean;
+    isFullWidth?: boolean;
+    items: PsNativeMenuItem[];
+    label: string;
+    onSelect: (value: string) => void;
+}

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

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

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

@@ -0,0 +1,6 @@
+import type { PsNativeMenuItem } from '../../interfaces/ps-native-menu-item';
+export interface PsNativeMenuRowProps {
+    item: PsNativeMenuItem;
+    onSelect: (value: string) => void;
+}
+export declare const PsNativeMenuRow: ({ item, onSelect }: PsNativeMenuRowProps) => import("react").JSX.Element;

package/dist/components/ps-native-menu/ps-native-menu-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 } 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 PsNativeMenuRow = ({ item, onSelect }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(Pressable, { accessibilityRole: 'menuitem', accessibilityState: { selected: item.isSelected }, onPress: () => onSelect(item.value), style: ({ pressed }) => ({
+            alignItems: 'center',
+            backgroundColor: pressed
+                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                : theme.surface,
+            flexDirection: 'row',
+            gap: PsMobileControlConfig.rowSpacing,
+            minHeight: PsLayoutConfig.rowMinHeight,
+            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-native-menu/ps-native-menu.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsNativeMenuProps } from './ps-native-menu-props';
+export declare const PsNativeMenu: ({ children, isDisabled, isFullWidth, items, onSelect, }: PsNativeMenuProps) => import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DropdownMenu, DropdownMenuItem, RNHostView, Text } from '@expo/ui/jetpack-compose';
+import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';
+import { PsNativeMenuConfig } from '../../constants/ps-native-menu-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsHostScope } from '../ps-host-scope/ps-host-scope';
+export const PsNativeMenu = ({ children, isDisabled = false, isFullWidth = false, items, onSelect, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    const [isOpen, setIsOpen] = useState(false);
+    const matchContents = isFullWidth ? { vertical: true } : true;
+    return (_jsx(PsHostScope, { matchContents: matchContents, children: _jsxs(DropdownMenu, { color: theme.surface, expanded: isOpen, modifiers: isFullWidth ? [fillMaxWidth()] : [], onDismissRequest: () => setIsOpen(false), children: [_jsx(DropdownMenu.Items, { children: items.map((item) => (_jsx(DropdownMenuItem, { elementColors: { textColor: item.isSelected ? theme.primary : theme.ink }, onClick: () => {
+                            setIsOpen(false);
+                            haptic('selection');
+                            onSelect(item.value);
+                        }, children: _jsx(DropdownMenuItem.Text, { children: _jsx(Text, { style: {
+                                    fontWeight: item.isSelected
+                                        ? PsNativeMenuConfig.selectedWeight
+                                        : PsNativeMenuConfig.unselectedWeight,
+                                }, children: item.label }) }) }, item.value))) }), _jsx(DropdownMenu.Trigger, { children: _jsx(RNHostView, { matchContents: matchContents, children: children({
+                            isOpen,
+                            open: () => {
+                                if (!isDisabled)
+                                    setIsOpen(true);
+                            },
+                        }) }) })] }) }));
+};

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

@@ -0,0 +1,2 @@
+import type { PsNativeMenuProps } from './ps-native-menu-props';
+export declare const PsNativeMenu: ({ children, isDisabled, items, onSelect, }: PsNativeMenuProps) => import("react").JSX.Element;

package/dist/components/ps-native-menu/ps-native-menu.ios.d.ts

@@ -0,0 +1,2 @@
+import type { PsNativeMenuProps } from './ps-native-menu-props';
+export declare const PsNativeMenu: ({ children, isDisabled, items, label, onSelect, }: PsNativeMenuProps) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@expo/ui/swift-ui';
+import { View } from 'react-native';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { PsNativeMenuOverlay } from '../ps-native-menu-overlay/ps-native-menu-overlay';
+export const PsNativeMenu = ({ children, isDisabled = false, items, label, onSelect, }) => {
+    const haptic = usePsHaptics();
+    return (_jsxs(View, { children: [children({ isOpen: false, open: () => undefined }), _jsx(PsNativeMenuOverlay, { isDisabled: isDisabled, label: label, children: items.map((item) => (_jsx(Button, { label: item.label, onPress: () => {
+                        haptic('selection');
+                        onSelect(item.value);
+                    }, systemImage: item.systemImage }, item.value))) })] }));
+};

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View } from 'react-native';
+import { PsCard } from '../ps-card/ps-card';
+import { PsNativeMenuRow } from './ps-native-menu-row';
+export const PsNativeMenu = ({ children, isDisabled = false, items, onSelect, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs(View, { children: [children({
+                isOpen,
+                open: () => {
+                    if (!isDisabled)
+                        setIsOpen((current) => !current);
+                },
+            }), isOpen ? (_jsx(PsCard, { padding: 'none', children: items.map((item) => (_jsx(PsNativeMenuRow, { item: item, onSelect: (value) => {
+                        onSelect(value);
+                        setIsOpen(false);
+                    } }, item.value))) })) : null] }));
+};

package/dist/components/ps-native-menu-overlay/index.d.ts

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

package/dist/components/ps-native-menu-overlay/index.js

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

package/dist/components/ps-native-menu-overlay/ps-native-menu-overlay-props.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface PsNativeMenuOverlayProps {
+    children: ReactNode;
+    isDisabled: boolean;
+    label: string;
+}

package/dist/components/ps-native-menu-overlay/ps-native-menu-overlay-props.js

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

package/dist/components/ps-native-menu-overlay/ps-native-menu-overlay.d.ts

@@ -0,0 +1,2 @@
+import type { PsNativeMenuOverlayProps } from './ps-native-menu-overlay-props';
+export declare const PsNativeMenuOverlay: ({ children }: PsNativeMenuOverlayProps) => import("react").ReactNode;

package/dist/components/ps-native-menu-overlay/ps-native-menu-overlay.ios.d.ts

@@ -0,0 +1,2 @@
+import type { PsNativeMenuOverlayProps } from './ps-native-menu-overlay-props';
+export declare const PsNativeMenuOverlay: ({ children, isDisabled, label }: PsNativeMenuOverlayProps) => import("react").JSX.Element | null;

package/dist/components/ps-native-menu-overlay/ps-native-menu-overlay.ios.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu, Rectangle } from '@expo/ui/swift-ui';
+import { accessibilityLabel, foregroundStyle, frame } from '@expo/ui/swift-ui/modifiers';
+import { StyleSheet, View } from 'react-native';
+import { PsNativeMenuConfig } from '../../constants/ps-native-menu-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsHost } from '../ps-host/ps-host';
+export const PsNativeMenuOverlay = ({ children, isDisabled, label }) => {
+    const theme = usePsMobileTheme();
+    if (isDisabled)
+        return null;
+    return (_jsx(View, { style: [StyleSheet.absoluteFill, { opacity: PsNativeMenuConfig.overlayOpacity }], testID: 'ps-native-menu-overlay', children: _jsx(PsHost, { matchContents: false, style: StyleSheet.absoluteFill, children: _jsx(Menu, { label: _jsx(Rectangle, { modifiers: [
+                        foregroundStyle(theme.surface),
+                        frame({ maxHeight: Infinity, maxWidth: Infinity }),
+                    ] }), modifiers: [
+                    accessibilityLabel(label),
+                    frame({ maxHeight: Infinity, maxWidth: Infinity }),
+                ], children: children }) }) }));
+};

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

@@ -0,0 +1 @@
+export const PsNativeMenuOverlay = ({ children }) => children;

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

@@ -0,0 +1 @@
+export * from './ps-page-backdrop';

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

@@ -0,0 +1 @@
+export * from './ps-page-backdrop';

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

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftBackdropConfig } from '@pallasoft/ps-design-system';
+import { LinearGradient } from 'expo-linear-gradient';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsBackdropService } from '../../services/ps-backdrop-service';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+export const PsPageBackdrop = () => {
+    const theme = usePsMobileTheme();
+    const { height, width } = useWindowDimensions();
+    const line = theme.line;
+    const fadeHeight = PsBackdropService.fadeHeight(height);
+    const verticalOpacity = PallasoftBackdropConfig.gridLineOpacity * PallasoftBackdropConfig.gridFadeOpacity;
+    return (_jsxs(View, { pointerEvents: 'none', style: StyleSheet.absoluteFill, testID: 'ps-page-backdrop', children: [_jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: theme.background }] }), _jsx(LinearGradient, { colors: [
+                    PsMobileColorService.withAlpha(theme.surface, PallasoftBackdropConfig.surfaceOpacity),
+                    PsMobileColorService.withAlpha(theme.surface, 0),
+                ], locations: [0, PallasoftBackdropConfig.surfaceStop], style: StyleSheet.absoluteFill }), _jsx(LinearGradient, { colors: [
+                    PsMobileColorService.withAlpha(theme.primary, PallasoftBackdropConfig.primaryOpacity),
+                    PsMobileColorService.withAlpha(theme.primary, 0),
+                ], end: { x: 1, y: 1 }, locations: [0, PallasoftBackdropConfig.primaryStop], start: { x: 0, y: 0 }, style: StyleSheet.absoluteFill }), _jsx(LinearGradient, { colors: [
+                    PsMobileColorService.withAlpha(theme.accent, PallasoftBackdropConfig.accentOpacity),
+                    PsMobileColorService.withAlpha(theme.accent, 0),
+                ], end: { x: 0, y: 0 }, locations: [0, PallasoftBackdropConfig.accentStop], start: { x: 1, y: 1 }, style: StyleSheet.absoluteFill }), PsBackdropService.verticalOffsets(width).map((offset) => (_jsx(LinearGradient, { colors: [
+                    PsMobileColorService.withAlpha(line, verticalOpacity),
+                    PsMobileColorService.withAlpha(line, 0),
+                ], style: { height: fadeHeight, left: offset, position: 'absolute', top: 0, width: 1 } }, `v-${offset}`))), PsBackdropService.horizontalLines(height).map((row) => (_jsx(View, { style: {
+                    backgroundColor: PsMobileColorService.withAlpha(line, row.opacity),
+                    height: 1,
+                    left: 0,
+                    position: 'absolute',
+                    right: 0,
+                    top: row.offset,
+                } }, `h-${row.offset}`)))] }));
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface PsPageHeaderProps {
+    actions?: ReactNode;
+    isLoading?: boolean;
+    leading?: ReactNode;
+    onTitlePress?: () => void;
+    subtitle?: string;
+    title: string;
+    trailing?: ReactNode;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsPageHeaderProps } from './ps-page-header-props';
+export declare const PsPageHeader: ({ actions, isLoading, leading, onTitlePress, subtitle, title, trailing, }: PsPageHeaderProps) => import("react").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { PsPageHeaderConfig } from '../../constants/ps-page-header-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { PsPageHeaderContext } from '../../contexts/ps-page-header-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsPageHeaderService } from '../../services/ps-page-header-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+import { PsText } from '../ps-text/ps-text';
+export const PsPageHeader = ({ actions, isLoading = false, leading, onTitlePress, subtitle, title, trailing, }) => {
+    const theme = usePsMobileTheme();
+    const layout = PsPageHeaderService.layout();
+    return (_jsxs(View, { style: {
+            alignItems: 'flex-start',
+            flexDirection: 'row',
+            gap: PsLayoutConfig.headerSlotGap,
+        }, testID: 'ps-page-header', children: [leading, _jsx(View, { style: {
+                    flex: 1,
+                    gap: PsLayoutConfig.headerGap,
+                    minWidth: 0,
+                    paddingTop: layout.titleOffset,
+                }, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(PsSkeleton, { height: PsPageHeaderConfig.skeletonTitleHeight, shape: PsSkeletonShape.Line, width: PsPageHeaderConfig.skeletonTitleWidth }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsPageHeaderConfig.skeletonSubtitleWidth })] })) : (_jsxs(_Fragment, { children: [onTitlePress === undefined ? (_jsx(PsText, { accessibilityRole: 'header', numberOfLines: 1, variant: 'title', children: title })) : (_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: 'button', onPress: onTitlePress, style: {
+                                alignItems: 'center',
+                                flexDirection: 'row',
+                                gap: PsPageHeaderConfig.actionGap,
+                            }, children: [_jsx(PsText, { numberOfLines: 1, style: { flexShrink: 1 }, variant: 'title', children: title }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Chevron, size: PsMobileControlConfig.iconSizeStandalone })] })), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 2, tone: 'muted', children: subtitle }))] })) }), _jsx(View, { style: {
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                    gap: PsPageHeaderConfig.actionGap,
+                    marginTop: layout.actionOffset,
+                }, children: _jsxs(PsPageHeaderContext.Provider, { value: true, children: [actions, trailing] }) })] }));
+};

package/dist/components/ps-pallasoft-sign-in-button/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ps-pallasoft-mark';
+export * from './ps-pallasoft-sign-in-button';
+export * from './ps-pallasoft-sign-in-button-props';

package/dist/components/ps-pallasoft-sign-in-button/index.js

@@ -0,0 +1,3 @@
+export * from './ps-pallasoft-mark';
+export * from './ps-pallasoft-sign-in-button';
+export * from './ps-pallasoft-sign-in-button-props';

package/dist/components/ps-pallasoft-sign-in-button/ps-pallasoft-mark.d.ts

@@ -0,0 +1,4 @@
+export interface PsPallasoftMarkProps {
+    size: number;
+}
+export declare const PsPallasoftMark: ({ size }: PsPallasoftMarkProps) => import("react").JSX.Element;

package/dist/components/ps-pallasoft-sign-in-button/ps-pallasoft-mark.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftBrandMark } from '@pallasoft/ps-design-system';
+import Svg, { Path } from 'react-native-svg';
+export const PsPallasoftMark = ({ size }) => (_jsxs(Svg, { height: size, viewBox: PallasoftBrandMark.viewBox, width: size, children: [_jsx(Path, { clipRule: 'evenodd', d: PallasoftBrandMark.primaryPath, fill: PallasoftBrandMark.primaryColor, fillRule: 'evenodd' }), _jsx(Path, { clipRule: 'evenodd', d: PallasoftBrandMark.secondaryPath, fill: PallasoftBrandMark.secondaryColor, fillRule: 'evenodd' })] }));

package/dist/components/ps-pallasoft-sign-in-button/ps-pallasoft-sign-in-button-props.d.ts

@@ -0,0 +1,6 @@
+export interface PsPallasoftSignInButtonProps {
+    children: string;
+    isLoading?: boolean;
+    onPress: () => void;
+    size?: 'default' | 'large';
+}

package/dist/components/ps-pallasoft-sign-in-button/ps-pallasoft-sign-in-button-props.js

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

package/dist/components/ps-pallasoft-sign-in-button/ps-pallasoft-sign-in-button.d.ts

@@ -0,0 +1,2 @@
+import type { PsPallasoftSignInButtonProps } from './ps-pallasoft-sign-in-button-props';
+export declare const PsPallasoftSignInButton: ({ children, isLoading, onPress, size, }: PsPallasoftSignInButtonProps) => import("react").JSX.Element;

package/dist/components/ps-pallasoft-sign-in-button/ps-pallasoft-sign-in-button.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftControlMetric } from '@pallasoft/ps-design-system';
+import { Pressable } from 'react-native';
+import { PsMotionConfig } from '../../constants/ps-motion-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsSignInSurfaceService } from '../../services/ps-sign-in-surface-service';
+import { PsPallasoftSignInContent } from './ps-pallasoft-sign-in-content';
+export const PsPallasoftSignInButton = ({ children, isLoading = false, onPress, size = 'default', }) => {
+    const theme = usePsMobileTheme();
+    const surface = PsSignInSurfaceService.resolve(theme, size);
+    return (_jsx(Pressable, { accessibilityRole: 'button', accessibilityState: { busy: isLoading, disabled: isLoading }, disabled: isLoading, onPress: onPress, style: ({ pressed }) => ({
+            alignItems: 'center',
+            alignSelf: 'stretch',
+            backgroundColor: surface.backgroundColor,
+            borderColor: surface.borderColor,
+            borderRadius: PallasoftControlMetric.Radius,
+            borderWidth: 1,
+            flexDirection: 'row',
+            gap: PallasoftControlMetric.Radius,
+            height: surface.height,
+            justifyContent: 'center',
+            opacity: pressed || isLoading ? PsMotionConfig.pressedOpacity : 1,
+            paddingHorizontal: PallasoftControlMetric.LargeHeight / 2,
+            transform: [{ scale: pressed ? PsMotionConfig.pressedScale : 1 }],
+        }), testID: 'ps-pallasoft-sign-in-button', children: _jsx(PsPallasoftSignInContent, { isLoading: isLoading, label: children, textColor: surface.textColor }) }));
+};

package/dist/components/ps-pallasoft-sign-in-button/ps-pallasoft-sign-in-content.d.ts

@@ -0,0 +1,6 @@
+export interface PsPallasoftSignInContentProps {
+    isLoading: boolean;
+    label: string;
+    textColor: string;
+}
+export declare const PsPallasoftSignInContent: ({ isLoading, label, textColor, }: PsPallasoftSignInContentProps) => import("react").JSX.Element;

package/dist/components/ps-pallasoft-sign-in-button/ps-pallasoft-sign-in-content.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftControlMetric } from '@pallasoft/ps-design-system';
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+import { PsText } from '../ps-text/ps-text';
+import { PsPallasoftMark } from './ps-pallasoft-mark';
+export const PsPallasoftSignInContent = ({ isLoading, label, textColor, }) => (_jsxs(_Fragment, { children: [isLoading ? (_jsx(PsSpinner, { color: textColor })) : (_jsx(PsPallasoftMark, { size: PallasoftControlMetric.IconStandalone })), _jsx(PsText, { numberOfLines: 1, style: { color: textColor, fontSize: PallasoftControlMetric.FontSize + 1 }, weight: 'semibold', children: label })] }));

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface PsScreenProps {
+    children: ReactNode;
+    gap?: number;
+    hasGutter?: boolean;
+    header?: ReactNode;
+    onRefresh?: () => Promise<void>;
+    style?: StyleProp<ViewStyle>;
+}

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

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

package/dist/components/ps-screen/ps-screen.d.ts

@@ -0,0 +1,2 @@
+import type { PsScreenProps } from './ps-screen-props';
+export declare const PsScreen: ({ children, gap, hasGutter, header, onRefresh, style, }: PsScreenProps) => import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Platform, RefreshControl, ScrollView, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsScrollContext } from '../../contexts/ps-scroll-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsRefresh } from '../../hooks/use-ps-refresh';
+import { usePsScrollHost } from '../../hooks/use-ps-scroll-host';
+import { PsScreenService } from '../../services/ps-screen-service';
+export const PsScreen = ({ children, gap = PsLayoutConfig.listGap, hasGutter = true, header, onRefresh, style, }) => {
+    const theme = usePsMobileTheme();
+    const insets = useSafeAreaInsets();
+    const { isRefreshing, refresh } = usePsRefresh(onRefresh);
+    const host = usePsScrollHost();
+    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(ScrollView, { contentContainerStyle: PsScreenService.content(insets, Platform.OS === 'ios', hasGutter, gap), contentInsetAdjustmentBehavior: 'automatic', keyboardDismissMode: 'interactive', onContentSizeChange: host.onContentSizeChange, onLayout: host.onLayout, onScroll: host.onScroll, keyboardShouldPersistTaps: 'handled', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primary], onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), ref: host.scrollRef, scrollEnabled: !host.isLocked, scrollEventThrottle: PsLayoutConfig.scrollEventThrottle, showsVerticalScrollIndicator: false, style: [{ backgroundColor: theme.background, flex: 1 }, style], testID: 'ps-screen', children: _jsxs(PsScrollContext, { value: host.context, children: [header, children] }) }), header === undefined ? null : (_jsx(View, { pointerEvents: 'none', style: [
+                    PsScreenService.statusBarScrim(insets.top),
+                    { backgroundColor: theme.background },
+                ], testID: 'ps-screen-status-bar-scrim' }))] }));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+export interface PsSearchFieldProps {
+    clearLabel: string;
+    isLoading?: boolean;
+    onChange: (value: string) => void;
+    placeholder: string;
+    value: string;
+}

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

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

package/dist/components/ps-search-field/ps-search-field.d.ts

@@ -0,0 +1,2 @@
+import type { PsSearchFieldProps } from './ps-search-field-props';
+export declare const PsSearchField: ({ clearLabel, isLoading, onChange, placeholder, value, }: PsSearchFieldProps) => import("react").JSX.Element;