@pallasoft/ps-mobile-components 1.2.0 → 1.4.0

package/dist/components/ps-sheet-page/ps-sheet-page-view.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface PsSheetPageViewProps {
+    children: ReactNode;
+    isAnimated: boolean;
+    isPage: boolean;
+    pageId: string;
+}
+export declare const PsSheetPageView: ({ children, isAnimated, isPage, pageId }: PsSheetPageViewProps) => import("react").JSX.Element;

package/dist/components/ps-sheet-page/ps-sheet-page-view.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { SlideInLeft, SlideInRight } from 'react-native-reanimated';
+import { PsSheetPageConfig } from '../../constants/ps-sheet-page-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsSheetPageView = ({ children, isAnimated, isPage, pageId }) => {
+    const theme = usePsMobileTheme();
+    const entering = theme.isReduceMotion || !isAnimated
+        ? undefined
+        : (isPage ? SlideInRight : SlideInLeft).duration(PsSheetPageConfig.duration);
+    return (_jsx(Animated.View, { entering: entering, testID: `ps-sheet-page-${pageId}`, children: children }, pageId));
+};

package/dist/components/ps-sheet-presenter/ps-sheet-presenter.android.js

@@ -2,16 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ModalBottomSheet, RNHostView } from '@expo/ui/jetpack-compose';
 import { imePadding } from '@expo/ui/jetpack-compose/modifiers';
 import { PsNativeTreeContext } from '../../contexts/ps-native-tree-context';
-import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
 import { PsHost } from '../ps-host/ps-host';
 export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose, }) => {
-    const theme = usePsMobileTheme();
-    return isOpen ? (_jsx(PsHost, { matchContents: true, children: _jsx(ModalBottomSheet, { containerColor: theme.background, onDismissRequest: () => {
+    const scheme = usePsMaterialScheme();
+    return isOpen ? (_jsx(PsHost, { matchContents: true, children: _jsx(ModalBottomSheet, { containerColor: scheme.surfaceContainerHigh, contentColor: scheme.onSurface, onDismissRequest: () => {
                 if (!isDismissBlocked) {
                     onClose();
                 }
             }, properties: {
                 shouldDismissOnBackPress: !isDismissBlocked,
                 shouldDismissOnClickOutside: !isDismissBlocked,
-            }, sheetGesturesEnabled: !isDismissBlocked, skipPartiallyExpanded: true, children: _jsx(RNHostView, { matchContents: { vertical: true }, modifiers: [imePadding()], children: _jsx(PsNativeTreeContext.Provider, { value: false, children: children }) }) }) })) : null;
+            }, scrimColor: scheme.scrim, sheetGesturesEnabled: !isDismissBlocked, skipPartiallyExpanded: true, children: _jsx(RNHostView, { matchContents: { vertical: true }, modifiers: [imePadding()], children: _jsx(PsNativeTreeContext.Provider, { value: false, children: children }) }) }) })) : null;
 };

package/dist/components/ps-sheet-presenter/ps-sheet-presenter.ios.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { BottomSheet, Group, RNHostView } from '@expo/ui/swift-ui';
 import { frame, interactiveDismissDisabled, presentationBackground, presentationDetents, presentationDragIndicator, } from '@expo/ui/swift-ui/modifiers';
 import { PsNativeTreeContext } from '../../contexts/ps-native-tree-context';
@@ -14,6 +14,13 @@ export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose,
     const [height, setHeight] = useState(0);
     isOpenRef.current = isOpen;
     isBlockedRef.current = isDismissBlocked;
+    const measure = useCallback((next) => {
+        setHeight((previous) => PsSheetService.grownHeight(previous, next, isOpenRef.current));
+    }, []);
+    useEffect(() => {
+        if (!isOpen)
+            setHeight(0);
+    }, [isOpen]);
     return (_jsx(PsHost, { matchContents: true, children: _jsx(BottomSheet, { isPresented: isOpen, onIsPresentedChange: (isPresented) => {
                 if (PsSheetService.shouldClose(isPresented, isOpenRef.current, isBlockedRef.current)) {
                     onClose();
@@ -24,5 +31,5 @@ export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose,
                     presentationDragIndicator('visible'),
                     presentationBackground(theme.background),
                     interactiveDismissDisabled(isDismissBlocked),
-                ], children: _jsx(RNHostView, { matchContents: { vertical: true }, children: _jsx(PsNativeTreeContext.Provider, { value: false, children: _jsx(PsSheetMeasureContext.Provider, { value: setHeight, children: children }) }) }) }) }) }));
+                ], children: _jsx(RNHostView, { matchContents: { vertical: true }, children: _jsx(PsNativeTreeContext.Provider, { value: false, children: _jsx(PsSheetMeasureContext.Provider, { value: measure, children: children }) }) }) }) }) }));
 };

package/dist/components/ps-sortable-grid/ps-sortable-item.js

@@ -36,6 +36,8 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
     const pan = usePanGesture({
         activateAfterLongPress: PsSortableGridConfig.longPressMs,
         enabled: !isDisabled,
+        failOffsetX: [-PsSortableGridConfig.holdTolerance, PsSortableGridConfig.holdTolerance],
+        failOffsetY: [-PsSortableGridConfig.holdTolerance, PsSortableGridConfig.holdTolerance],
         onActivate: (event) => onStart(id, event.absoluteY),
         onFinalize: onEnd,
         onUpdate: (event) => onUpdate(event.translationX, event.translationY, event.absoluteY),

package/dist/components/ps-spinner/ps-spinner.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsSpinnerProps } from './ps-spinner-props';
+export declare const PsSpinner: ({ color, size }: PsSpinnerProps) => import("react").JSX.Element;

package/dist/components/ps-spinner/ps-spinner.android.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingIndicator } from '@expo/ui/jetpack-compose';
+import { size as sizeModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { PsAndroidStateConfig } from '../../constants/ps-android-state-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsHost } from '../ps-host/ps-host';
+export const PsSpinner = ({ color, size = 'small' }) => {
+    const theme = usePsMobileTheme();
+    const dimension = size === 'large'
+        ? PsAndroidStateConfig.loadingIndicatorLarge
+        : PsAndroidStateConfig.loadingIndicatorSmall;
+    return (_jsx(PsHost, { style: { height: dimension, width: dimension }, children: _jsx(LoadingIndicator, { color: color === undefined ? theme.primary : color, modifiers: [sizeModifier(dimension, dimension)] }) }));
+};

package/dist/components/ps-switch/ps-switch.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsSwitchProps } from './ps-switch-props';
+export declare const PsSwitch: ({ description, isChecked, isDisabled, label, onChange, }: PsSwitchProps) => import("react").JSX.Element;

package/dist/components/ps-switch/ps-switch.android.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from '@expo/ui/jetpack-compose';
+import { View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
+import { PsMaterialControlService } from '../../services/ps-material-control-service';
+import { PsStateService } from '../../services/ps-state-service';
+import { PsHostScope } from '../ps-host-scope/ps-host-scope';
+import { PsText } from '../ps-text/ps-text';
+export const PsSwitch = ({ description, isChecked, isDisabled = false, label, onChange, }) => {
+    const haptic = usePsHaptics();
+    const colors = PsMaterialControlService.switchColors(usePsMaterialScheme());
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: PsMobileControlConfig.rowSpacing,
+        }, children: [_jsxs(View, { style: {
+                    flex: 1,
+                    opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
+                }, children: [_jsx(PsText, { weight: 'semibold', children: label }), description === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: description }))] }), _jsx(PsHostScope, { children: _jsx(Switch, { colors: colors, enabled: !isDisabled, onCheckedChange: (isOn) => {
+                        haptic('selection');
+                        onChange?.(isOn);
+                    }, value: isChecked }) })] }));
+};

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

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

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

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

package/dist/components/ps-switcher/ps-switcher-panel.d.ts

@@ -0,0 +1,10 @@
+import type { PsSwitcherItem } from '../../interfaces/ps-switcher-item';
+export interface PsSwitcherPanelProps {
+    clearLabel: string;
+    items: PsSwitcherItem[];
+    noMatchLabel: string;
+    onSelect: (id: string) => void;
+    searchPlaceholder: string;
+    selectedId: string;
+}
+export declare const PsSwitcherPanel: ({ clearLabel, items, noMatchLabel, onSelect, searchPlaceholder, selectedId, }: PsSwitcherPanelProps) => import("react").JSX.Element;

package/dist/components/ps-switcher/ps-switcher-panel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View } from 'react-native';
+import { PsSwitcherConfig } from '../../constants/ps-switcher-config';
+import { PsSwitcherService } from '../../services/ps-switcher-service';
+import { PsMenuPopupDivider } from '../ps-menu-popup/ps-menu-popup-divider';
+import { PsSearchField } from '../ps-search-field/ps-search-field';
+import { PsText } from '../ps-text/ps-text';
+import { PsSwitcherRow } from './ps-switcher-row';
+export const PsSwitcherPanel = ({ clearLabel, items, noMatchLabel, onSelect, searchPlaceholder, selectedId, }) => {
+    const [query, setQuery] = useState('');
+    const shown = PsSwitcherService.filter(items, query);
+    return (_jsxs(View, { children: [PsSwitcherService.hasSearch(items.length) ? (_jsx(View, { style: {
+                    paddingHorizontal: PsSwitcherConfig.searchPaddingHorizontal,
+                    paddingVertical: PsSwitcherConfig.searchPaddingVertical,
+                }, children: _jsx(PsSearchField, { clearLabel: clearLabel, onChange: setQuery, placeholder: searchPlaceholder, value: query }) })) : null, shown.length === 0 ? (_jsx(View, { style: { padding: PsSwitcherConfig.searchPaddingHorizontal }, children: _jsx(PsText, { tone: 'muted', children: noMatchLabel }) })) : (shown.map((item, index) => (_jsxs(View, { children: [index === 0 ? null : _jsx(PsMenuPopupDivider, {}), _jsx(PsSwitcherRow, { isSelected: item.id === selectedId, item: item, onPress: () => onSelect(item.id) })] }, item.id))))] }));
+};

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

@@ -0,0 +1,12 @@
+import type { PsSwitcherItem } from '../../interfaces/ps-switcher-item';
+export interface PsSwitcherProps {
+    allItem?: PsSwitcherItem;
+    clearLabel: string;
+    isLoading?: boolean;
+    items: PsSwitcherItem[];
+    label: string;
+    noMatchLabel: string;
+    onSelect: (id: string) => void;
+    searchPlaceholder: string;
+    selectedId: string;
+}

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

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

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

@@ -0,0 +1,7 @@
+import type { PsSwitcherItem } from '../../interfaces/ps-switcher-item';
+export interface PsSwitcherRowProps {
+    isSelected: boolean;
+    item: PsSwitcherItem;
+    onPress: () => void;
+}
+export declare const PsSwitcherRow: ({ isSelected, item, onPress }: PsSwitcherRowProps) => import("react").JSX.Element;

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

@@ -0,0 +1,33 @@
+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 { PsRippleKind } from '../../constants/ps-ripple-kind';
+import { PsSwitcherConfig } from '../../constants/ps-switcher-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsRippleService } from '../../services/ps-ripple-service';
+import { PsAvatar } from '../ps-avatar/ps-avatar';
+import { PsBadge } from '../ps-badge/ps-badge';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+export const PsSwitcherRow = ({ isSelected, item, onPress }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'menuitem', accessibilityState: { selected: isSelected }, onPress: () => {
+            haptic('selection');
+            onPress();
+        }, style: ({ pressed }) => ({
+            alignItems: 'center',
+            backgroundColor: pressed
+                ? theme.primarySoftStrong
+                : isSelected
+                    ? theme.primarySoft
+                    : 'transparent',
+            flexDirection: 'row',
+            gap: PsSwitcherConfig.rowGap,
+            minHeight: PsSwitcherConfig.rowMinHeight,
+            paddingHorizontal: PsMenuPopupConfig.rowPaddingHorizontal,
+            paddingVertical: PsSwitcherConfig.rowPaddingVertical,
+        }), children: [_jsx(PsAvatar, { initials: item.initials, size: 'small' }), _jsxs(View, { style: { flex: 1, gap: PsSwitcherConfig.textGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: item.title }), item.subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: item.subtitle })), item.status === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: item.statusTone, variant: 'small', children: item.status }))] }), _jsxs(View, { style: { alignItems: 'flex-end', gap: PsSwitcherConfig.textGap }, children: [item.value === undefined ? null : (_jsx(PsText, { numberOfLines: 1, weight: 'bold', children: item.value })), item.badge === undefined ? null : (_jsx(PsBadge, { size: 'small', tone: 'primary', children: item.badge }))] }), isSelected ? _jsx(PsIcon, { color: theme.primaryText, iconKey: PsIconKey.Check }) : null] }));
+};

package/dist/components/ps-switcher/ps-switcher-trigger.d.ts

@@ -0,0 +1,11 @@
+import type { ElementRef, RefObject } from 'react';
+import { View } from 'react-native';
+import type { PsSwitcherItem } from '../../interfaces/ps-switcher-item';
+export interface PsSwitcherTriggerProps {
+    anchorRef: RefObject<ElementRef<typeof View> | null>;
+    isOpen: boolean;
+    item: PsSwitcherItem;
+    label: string;
+    onPress: () => void;
+}
+export declare const PsSwitcherTrigger: ({ anchorRef, isOpen, item, label, onPress, }: PsSwitcherTriggerProps) => import("react").JSX.Element;

package/dist/components/ps-switcher/ps-switcher-trigger.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Pressable, View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
+import { PsSwitcherConfig } from '../../constants/ps-switcher-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsRippleService } from '../../services/ps-ripple-service';
+import { PsStateService } from '../../services/ps-state-service';
+import { PsAvatar } from '../ps-avatar/ps-avatar';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+export const PsSwitcherTrigger = ({ anchorRef, isOpen, item, label, onPress, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    return (_jsx(View, { collapsable: false, ref: anchorRef, children: _jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityLabel: label, accessibilityRole: 'button', accessibilityState: { expanded: isOpen }, onPress: () => {
+                haptic('selection');
+                onPress();
+            }, style: ({ pressed }) => ({
+                alignItems: 'center',
+                backgroundColor: pressed
+                    ? PsStateService.pressedFill(theme, theme.surface)
+                    : theme.surface,
+                borderColor: isOpen ? theme.primary : theme.line,
+                borderRadius: PsMobileControlConfig.controlRadius,
+                borderWidth: 1,
+                flexDirection: 'row',
+                gap: PsSwitcherConfig.rowGap,
+                minHeight: PsSwitcherConfig.triggerMinHeight,
+                overflow: 'hidden',
+                paddingHorizontal: PsSwitcherConfig.triggerPaddingHorizontal,
+                paddingVertical: PsSwitcherConfig.rowPaddingVertical,
+            }), children: [_jsx(PsAvatar, { initials: item.initials, size: 'small' }), _jsxs(View, { style: { flex: 1, gap: PsSwitcherConfig.textGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: item.title }), item.value === undefined ? null : (_jsx(PsText, { numberOfLines: 1, weight: 'bold', children: item.value })), item.status === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: item.statusTone, variant: 'small', children: item.status }))] }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Chevron, size: PsSwitcherConfig.chevronSize })] }) }));
+};

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

@@ -0,0 +1,2 @@
+import type { PsSwitcherProps } from './ps-switcher-props';
+export declare const PsSwitcher: ({ allItem, clearLabel, isLoading, items, label, noMatchLabel, onSelect, searchPlaceholder, selectedId, }: PsSwitcherProps) => import("react").JSX.Element | null;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsMenuAnchor } from '../../hooks/use-ps-menu-anchor';
+import { PsSwitcherService } from '../../services/ps-switcher-service';
+import { PsMenuPopup } from '../ps-menu-popup/ps-menu-popup';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+import { PsSwitcherPanel } from './ps-switcher-panel';
+import { PsSwitcherTrigger } from './ps-switcher-trigger';
+export const PsSwitcher = ({ allItem, clearLabel, isLoading = false, items, label, noMatchLabel, onSelect, searchPlaceholder, selectedId, }) => {
+    const menu = usePsMenuAnchor();
+    const all = allItem === undefined ? items : [allItem, ...items];
+    const selected = PsSwitcherService.selected(all, selectedId);
+    if (isLoading)
+        return _jsx(PsSkeleton, { shape: PsSkeletonShape.Card });
+    if (selected === undefined)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(PsSwitcherTrigger, { isOpen: menu.anchor !== undefined, item: selected, label: label, onPress: menu.open, anchorRef: menu.ref }), menu.anchor === undefined ? null : (_jsx(PsMenuPopup, { anchor: menu.anchor, isFullWidth: true, onClose: menu.close, children: _jsx(PsSwitcherPanel, { clearLabel: clearLabel, items: all, noMatchLabel: noMatchLabel, onSelect: (id) => {
+                        menu.close();
+                        onSelect(id);
+                    }, searchPlaceholder: searchPlaceholder, selectedId: selectedId }) }))] }));
+};

package/dist/components/ps-tab-bar-provider/index.d.ts

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

package/dist/components/ps-tab-bar-provider/index.js

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

package/dist/components/ps-tab-bar-provider/ps-tab-bar-provider-props.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export interface PsTabBarProviderProps {
+    children: ReactNode;
+}

package/dist/components/ps-tab-bar-provider/ps-tab-bar-provider-props.js

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

package/dist/components/ps-tab-bar-provider/ps-tab-bar-provider.d.ts

@@ -0,0 +1,2 @@
+import type { PsTabBarProviderProps } from './ps-tab-bar-provider-props';
+export declare const PsTabBarProvider: ({ children }: PsTabBarProviderProps) => import("react").JSX.Element;

package/dist/components/ps-tab-bar-provider/ps-tab-bar-provider.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { PsTabBarContext } from '../../contexts/ps-tab-bar-context';
+export const PsTabBarProvider = ({ children }) => {
+    const [isHidden, setIsHidden] = useState(false);
+    const value = useMemo(() => ({ hasTabBar: true, isHidden, setIsHidden }), [isHidden]);
+    return _jsx(PsTabBarContext.Provider, { value: value, children: children });
+};

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

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { Pressable, ScrollView, View } from 'react-native';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
 import { PsTabsConfig } from '../../constants/ps-tabs-config';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsTabsService } from '../../services/ps-tabs-service';
 import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
 import { PsText } from '../ps-text/ps-text';
@@ -25,8 +27,8 @@ export const PsTabs = ({ getItemIcon, getItemKey, getItemLabel, isLoading = fals
     return (_jsx(View, { onLayout: (event) => setViewportWidth(event.nativeEvent.layout.width), style: { borderBottomColor: theme.line, borderBottomWidth: 1 }, children: _jsx(ScrollView, { accessibilityRole: 'tablist', contentContainerStyle: { flexGrow: 1 }, horizontal: true, ref: scroll, showsHorizontalScrollIndicator: false, children: items.map((item) => {
                 const key = getItemKey(item);
                 const isSelected = key === selectedKey;
-                const color = isSelected ? theme.primary : theme.muted;
-                return (_jsxs(Pressable, { accessibilityRole: 'tab', accessibilityState: { selected: isSelected }, onLayout: (event) => frames.current.set(key, {
+                const color = isSelected ? theme.primaryText : theme.muted;
+                return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'tab', accessibilityState: { selected: isSelected }, onLayout: (event) => frames.current.set(key, {
                         width: event.nativeEvent.layout.width,
                         x: event.nativeEvent.layout.x,
                     }), onPress: () => {

package/dist/components/ps-text-link/ps-text-link.js

@@ -6,7 +6,7 @@ export const PsTextLink = ({ children, onPress, tone = 'emphasis' }) => {
     const isEmphasis = tone === 'emphasis';
     const isWhite = tone === 'white';
     return (_jsx(PsText, { accessibilityRole: 'link', onPress: onPress, style: {
-            textDecorationColor: isEmphasis ? theme.primary : isWhite ? theme.white : theme.muted,
+            textDecorationColor: isEmphasis ? theme.primaryText : isWhite ? theme.white : theme.muted,
             textDecorationLine: 'underline',
         }, tone: isWhite ? 'white' : isEmphasis ? 'ink' : 'muted', weight: isEmphasis || isWhite ? 'semibold' : 'regular', children: children }));
 };

package/dist/components/ps-waterfall-chart/index.d.ts

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

package/dist/components/ps-waterfall-chart/index.js

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

package/dist/components/ps-waterfall-chart/ps-waterfall-chart-props.d.ts

@@ -0,0 +1,9 @@
+import type { PsWaterfallDatum } from '../../interfaces/ps-waterfall-datum';
+export interface PsWaterfallChartProps {
+    data: PsWaterfallDatum[];
+    emptyLabel: string;
+    formatTick: (value: number) => string;
+    formatValue: (value: number) => string;
+    height?: number;
+    isLoading?: boolean;
+}

package/dist/components/ps-waterfall-chart/ps-waterfall-chart-props.js

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

package/dist/components/ps-waterfall-chart/ps-waterfall-chart.d.ts

@@ -0,0 +1,2 @@
+import type { PsWaterfallChartProps } from './ps-waterfall-chart-props';
+export declare const PsWaterfallChart: ({ data, emptyLabel, formatTick, formatValue, height, isLoading, }: PsWaterfallChartProps) => import("react").JSX.Element;

package/dist/components/ps-waterfall-chart/ps-waterfall-chart.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import Svg, { G, Line, Text as SvgText } from 'react-native-svg';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+import { PsChartSkeletonVariant } from '../../constants/ps-chart-skeleton-variant';
+import { usePsChartReveal } from '../../hooks/use-ps-chart-reveal';
+import { usePsChartScrub } from '../../hooks/use-ps-chart-scrub';
+import { usePsChartWidth } from '../../hooks/use-ps-chart-width';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsChartScaleService } from '../../services/ps-chart-scale-service';
+import { PsWaterfallService } from '../../services/ps-waterfall-service';
+import { PsChartBar } from '../ps-chart-bar/ps-chart-bar';
+import { PsChartEmptyState } from '../ps-chart-empty-state/ps-chart-empty-state';
+import { PsChartReadout } from '../ps-chart-readout/ps-chart-readout';
+import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
+export const PsWaterfallChart = ({ data, emptyLabel, formatTick, formatValue, height = PsChartConfig.chartHeight, isLoading = false, }) => {
+    const theme = usePsMobileTheme();
+    const { onLayout, width } = usePsChartWidth();
+    const plot = PsChartScaleService.plot(width, height);
+    const { index, panHandlers } = usePsChartScrub(data.length, true, plot);
+    const steps = PsWaterfallService.steps(data);
+    const progress = usePsChartReveal(`waterfall:${PsWaterfallService.values(steps).join(',')}`);
+    if (isLoading)
+        return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Bars });
+    if (steps.length === 0 || PsWaterfallService.values(steps).every((value) => value === 0))
+        return _jsx(PsChartEmptyState, { height: height, label: emptyLabel });
+    const colors = [theme.chart[0], theme.danger, theme.primary700];
+    const domain = PsChartScaleService.domain(PsWaterfallService.values(steps));
+    const selected = index === null ? steps.length - 1 : index;
+    const step = steps[selected];
+    const rects = PsWaterfallService.rects(steps, colors, domain, plot);
+    const color = step.isTotal ? colors[2] : step.value < 0 ? colors[1] : colors[0];
+    return (_jsxs(View, { style: { gap: 8 }, children: [_jsx(PsChartReadout, { items: [{ color, label: step.label, value: formatValue(step.value) }], title: step.label }), _jsx(View, { accessible: true, accessibilityLabel: `${step.label}, ${formatValue(step.value)}`, accessibilityRole: 'image', onLayout: onLayout, style: { height }, children: width === 0 ? null : (_jsxs(_Fragment, { children: [_jsxs(Svg, { height: height, pointerEvents: 'none', width: width, children: [PsChartScaleService.ticks(domain).map((tick) => {
+                                    const y = PsChartScaleService.y(tick, domain, plot);
+                                    return (_jsxs(G, { children: [_jsx(Line, { stroke: theme.line, strokeWidth: PsChartConfig.gridLineWidth, x1: plot.left, x2: plot.right, y1: y, y2: y }), _jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'end', x: plot.left - 6, y: y + 3, children: formatTick(tick) })] }, tick));
+                                }), steps.map((entry, position) => (_jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'middle', x: PsChartScaleService.categoryX(position, steps.length, plot, true), y: height - 6, children: entry.label }, entry.label))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id)))] }), _jsx(View, { ...panHandlers, style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' })] })) })] }));
+};

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

@@ -10,5 +10,5 @@ export const PsWidgetList = ({ children, onRefresh, style }) => {
     return (_jsx(ScrollView, { contentContainerStyle: {
             gap: PsMobileControlConfig.rowSpacing,
             padding: PsListConfig.contentInset,
-        }, contentInsetAdjustmentBehavior: 'automatic', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), style: [{ backgroundColor: theme.background, flex: 1 }, style], children: children }));
+        }, contentInsetAdjustmentBehavior: 'automatic', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], progressBackgroundColor: theme.surface, onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), style: [{ backgroundColor: theme.background, flex: 1 }, style], children: children }));
 };

package/dist/constants/ps-android-state-config.d.ts

@@ -0,0 +1,12 @@
+export declare const PsAndroidStateConfig: {
+    readonly disabledContainerAlpha: 0.12;
+    readonly disabledContentAlpha: 0.38;
+    readonly focusAlpha: 0.12;
+    readonly iconRippleRadius: 24;
+    readonly loadingIndicatorLarge: 48;
+    readonly loadingIndicatorSmall: 28;
+    readonly rippleAlpha: 0.16;
+    readonly rippleOnFillAlpha: 0.24;
+    readonly tabLabelSize: 12;
+    readonly touchTarget: 48;
+};

package/dist/constants/ps-android-state-config.js

@@ -0,0 +1,12 @@
+export const PsAndroidStateConfig = {
+    disabledContainerAlpha: 0.12,
+    disabledContentAlpha: 0.38,
+    focusAlpha: 0.12,
+    iconRippleRadius: 24,
+    loadingIndicatorLarge: 48,
+    loadingIndicatorSmall: 28,
+    rippleAlpha: 0.16,
+    rippleOnFillAlpha: 0.24,
+    tabLabelSize: 12,
+    touchTarget: 48,
+};

package/dist/constants/ps-app-lock-config.d.ts

@@ -0,0 +1,13 @@
+export declare const PsAppLockConfig: {
+    readonly activeState: "active";
+    readonly backgroundState: "background";
+    readonly inactiveState: "inactive";
+    readonly defaultGraceSeconds: 60;
+    readonly iosPlatform: "ios";
+    readonly nativeModuleName: "ExpoLocalAuthentication";
+    readonly layout: {
+        readonly gap: 24;
+        readonly horizontalPadding: 20;
+        readonly maxWidth: 384;
+    };
+};

package/dist/constants/ps-app-lock-config.js

@@ -0,0 +1,13 @@
+export const PsAppLockConfig = {
+    activeState: 'active',
+    backgroundState: 'background',
+    inactiveState: 'inactive',
+    defaultGraceSeconds: 60,
+    iosPlatform: 'ios',
+    nativeModuleName: 'ExpoLocalAuthentication',
+    layout: {
+        gap: 24,
+        horizontalPadding: 20,
+        maxWidth: 384,
+    },
+};

package/dist/constants/ps-app-lock-native-codes.d.ts

@@ -0,0 +1,10 @@
+export declare const PsAuthenticationTypeCode: {
+    readonly face: 2;
+    readonly fingerprint: 1;
+    readonly iris: 3;
+};
+export declare const PsSecurityLevelCode: {
+    readonly biometricWeak: 2;
+    readonly none: 0;
+    readonly secret: 1;
+};

package/dist/constants/ps-app-lock-native-codes.js

@@ -0,0 +1,10 @@
+export const PsAuthenticationTypeCode = {
+    face: 2,
+    fingerprint: 1,
+    iris: 3,
+};
+export const PsSecurityLevelCode = {
+    biometricWeak: 2,
+    none: 0,
+    secret: 1,
+};

package/dist/constants/ps-barcode-permission.d.ts

@@ -0,0 +1,6 @@
+export declare const PsBarcodePermission: {
+    readonly checking: "checking";
+    readonly denied: "denied";
+    readonly granted: "granted";
+};
+export type PsBarcodePermission = (typeof PsBarcodePermission)[keyof typeof PsBarcodePermission];

package/dist/constants/ps-barcode-permission.js

@@ -0,0 +1,5 @@
+export const PsBarcodePermission = {
+    checking: 'checking',
+    denied: 'denied',
+    granted: 'granted',
+};

package/dist/constants/ps-barcode-scanner-config.d.ts

@@ -0,0 +1,18 @@
+import { PallasoftDarkColor } from '@pallasoft/ps-design-system';
+export declare const PsBarcodeScannerConfig: {
+    readonly backdropColor: PallasoftDarkColor.Background;
+    readonly barcodeTypes: string[];
+    readonly barGap: 12;
+    readonly barPadding: 12;
+    readonly cooldownMs: 1500;
+    readonly facing: "back";
+    readonly frameAspectRatio: 0.6;
+    readonly frameBorderWidth: 3;
+    readonly frameRadius: 16;
+    readonly frameWidthFraction: 0.8;
+    readonly footerGap: 8;
+    readonly footerPadding: 16;
+    readonly pillPaddingHorizontal: 14;
+    readonly pillPaddingVertical: 8;
+    readonly pillRadius: 16;
+};

package/dist/constants/ps-barcode-scanner-config.js

@@ -0,0 +1,31 @@
+import { PallasoftDarkColor } from '@pallasoft/ps-design-system';
+export const PsBarcodeScannerConfig = {
+    backdropColor: PallasoftDarkColor.Background,
+    barcodeTypes: [
+        'ean13',
+        'ean8',
+        'upc_a',
+        'upc_e',
+        'code128',
+        'code39',
+        'code93',
+        'itf14',
+        'codabar',
+        'qr',
+        'datamatrix',
+        'pdf417',
+    ],
+    barGap: 12,
+    barPadding: 12,
+    cooldownMs: 1500,
+    facing: 'back',
+    frameAspectRatio: 0.6,
+    frameBorderWidth: 3,
+    frameRadius: 16,
+    frameWidthFraction: 0.8,
+    footerGap: 8,
+    footerPadding: 16,
+    pillPaddingHorizontal: 14,
+    pillPaddingVertical: 8,
+    pillRadius: 16,
+};

package/dist/constants/ps-biometry-kind.d.ts

@@ -0,0 +1,7 @@
+export declare const PsBiometryKind: {
+    readonly face: "face";
+    readonly fingerprint: "fingerprint";
+    readonly iris: "iris";
+    readonly passcode: "passcode";
+};
+export type PsBiometryKind = (typeof PsBiometryKind)[keyof typeof PsBiometryKind];

package/dist/constants/ps-biometry-kind.js

@@ -0,0 +1,6 @@
+export const PsBiometryKind = {
+    face: 'face',
+    fingerprint: 'fingerprint',
+    iris: 'iris',
+    passcode: 'passcode',
+};