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

package/LICENSE

@@ -0,0 +1,32 @@
+Pallasoft Proprietary License
+
+Version 1.0, 23-Jan-2024
+
+1. Grant of License:
+   Pallasoft grants you a non-exclusive, non-transferable, revocable license to use the software, solely for internal business purposes.
+
+2. Restrictions:
+   You may not:
+   a. Distribute or sublicense the software to third parties.
+   b. Reverse engineer, decompile, or disassemble the software.
+   c. Remove or alter any proprietary notices or labels on the software.
+
+3. Ownership:
+   Pallasoft retains all right, title, and interest in and to the software, including all intellectual property rights.
+
+4. Confidentiality:
+   You agree to keep the software confidential and not disclose it to third parties.
+
+5. Support and Updates:
+   This license does not entitle you to support or updates. Pallasoft may, at its discretion, provide support and updates.
+
+6. Termination:
+   This license is effective until terminated. Pallasoft may terminate the license at any time if you breach any terms. Upon termination, you must cease using the software.
+
+7. Governing Law:
+   This license is governed by the Canadian Laws. Any disputes arising out of this license shall be resolved in the courts of Canada.
+
+8. Contact Information:
+   For inquiries regarding this license, contact operations@pallasoft.com.
+
+[End of License]

package/README.md

@@ -1,3 +1,23 @@
-# Temporary Holding Version
+# @pallasoft/ps-mobile-components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Web-matching React Native Ps components for Pallasoft Expo apps, built on
+`@expo/ui`.
+
+```tsx
+import { PsButton, PsMobileThemeProvider } from '@pallasoft/ps-mobile-components';
+
+<PsMobileThemeProvider primaryColor='#FFA90A' primaryContrastColor='#232F3E'>
+	<PsButton onPress={save} variant='primary'>
+		{t('save')}
+	</PsButton>
+</PsMobileThemeProvider>;
+```
+
+## Scripts
+
+- `npm run build` compiles the package into `dist`.
+- `npm run typecheck` type checks sources and tests.
+- `npm test` runs jest-expo.
+- `npm run lint` runs ESLint using the shared package baseline.
+- `npm run format:check` checks Prettier formatting.
+- `npm run release` publishes through semantic-release.

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

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

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

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

package/dist/components/ps-action-menu/ps-action-menu-entries.d.ts

@@ -0,0 +1,12 @@
+import type { PsActionMenuHeader } from '../../interfaces/ps-action-menu-header';
+import type { PsActionMenuSection } from '../../interfaces/ps-action-menu-section';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsActionMenuEntryProps {
+    item: PsMenuItem;
+}
+export declare const PsActionMenuEntry: ({ item }: PsActionMenuEntryProps) => import("react").JSX.Element;
+export interface PsActionMenuEntriesProps {
+    header?: PsActionMenuHeader;
+    sections: PsActionMenuSection[];
+}
+export declare const PsActionMenuEntries: ({ header, sections }: PsActionMenuEntriesProps) => import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Menu, Section } from '@expo/ui/swift-ui';
+import { disabled, tint } from '@expo/ui/swift-ui/modifiers';
+import { PsSfSymbolConfig } from '../../constants/ps-sf-symbol-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+import { PsActionMenuLabelled } from './ps-action-menu-labelled';
+export const PsActionMenuEntry = ({ item }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    const symbol = PsActionMenuService.symbol(item);
+    if (item.children !== undefined && item.children.length > 0)
+        return (_jsx(Menu, { label: item.label, systemImage: symbol, children: item.children.map((child) => (_jsx(PsActionMenuEntry, { item: child }, child.id))) }));
+    if (item.subtitle !== undefined)
+        return (_jsx(Button, { modifiers: [
+                disabled(item.isDisabled === true),
+                ...(item.isDanger === true ? [tint(theme.danger)] : []),
+            ], onPress: () => {
+                haptic('selection');
+                item.onSelect();
+            }, role: item.isDanger ? 'destructive' : undefined, children: _jsx(PsActionMenuLabelled, { subtitle: item.subtitle, symbol: symbol, title: item.label }) }));
+    return (_jsx(Button, { label: item.label, modifiers: [
+            disabled(item.isDisabled === true),
+            ...(item.isDanger === true ? [tint(theme.danger)] : []),
+        ], onPress: () => {
+            haptic('selection');
+            item.onSelect();
+        }, role: item.isDanger ? 'destructive' : undefined, systemImage: symbol }));
+};
+export const PsActionMenuEntries = ({ header, sections }) => (_jsxs(_Fragment, { children: [header === undefined ? null : (_jsx(Section, { children: _jsx(Button, { modifiers: [disabled(header.onSelect === undefined)], onPress: header.onSelect, children: _jsx(PsActionMenuLabelled, { subtitle: header.subtitle === undefined ? '' : header.subtitle, symbol: PsSfSymbolConfig.headerSymbol, title: header.title }) }) })), sections.map((section) => (_jsx(Section, { title: section.title, children: section.items.map((item) => (_jsx(PsActionMenuEntry, { item: item }, item.id))) }, section.id)))] }));

package/dist/components/ps-action-menu/ps-action-menu-labelled.d.ts

@@ -0,0 +1,7 @@
+import type { SFSymbol } from 'sf-symbols-typescript';
+export interface PsActionMenuLabelledProps {
+    subtitle: string;
+    symbol: SFSymbol | undefined;
+    title: string;
+}
+export declare const PsActionMenuLabelled: ({ subtitle, symbol, title }: PsActionMenuLabelledProps) => import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Text, VStack } from '@expo/ui/swift-ui';
+export const PsActionMenuLabelled = ({ subtitle, symbol, title }) => (_jsx(Label, { systemImage: symbol, children: _jsxs(VStack, { alignment: 'leading', children: [_jsx(Text, { children: title }), _jsx(Text, { children: subtitle })] }) }));

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

@@ -0,0 +1,16 @@
+import type { ReactElement } from 'react';
+import type { PsActionMenuHeader } from '../../interfaces/ps-action-menu-header';
+import type { PsActionMenuSection } from '../../interfaces/ps-action-menu-section';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsActionMenuTriggerState {
+    isOpen: boolean;
+    open: () => void;
+}
+export interface PsActionMenuProps {
+    children: ReactElement | ((state: PsActionMenuTriggerState) => ReactElement);
+    header?: PsActionMenuHeader;
+    isDisabled?: boolean;
+    items?: PsMenuItem[];
+    label: string;
+    sections?: PsActionMenuSection[];
+}

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

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

package/dist/components/ps-action-menu/ps-action-menu-trigger.d.ts

@@ -0,0 +1,8 @@
+import type { PsActionMenuProps, PsActionMenuTriggerState } from './ps-action-menu-props';
+export interface PsActionMenuTriggerProps {
+    children: PsActionMenuProps['children'];
+    isDisabled: boolean;
+    label: string;
+    state: PsActionMenuTriggerState;
+}
+export declare const PsActionMenuTrigger: ({ children, isDisabled, label, state, }: PsActionMenuTriggerProps) => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+export const PsActionMenuTrigger = ({ children, isDisabled, label, state, }) => {
+    if (typeof children === 'function')
+        return children(state);
+    return (_jsx(Pressable, { accessibilityLabel: label, accessibilityRole: 'button', disabled: isDisabled, onPress: state.open, children: children }));
+};

package/dist/components/ps-action-menu/ps-action-menu.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsActionMenuProps } from './ps-action-menu-props';
+export declare const PsActionMenu: ({ children, header, isDisabled, items, label, sections, }: PsActionMenuProps) => import("react").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { DropdownMenu, DropdownMenuItem, HorizontalDivider, RNHostView, Text, } from '@expo/ui/jetpack-compose';
+import { PsNativeMenuConfig } from '../../constants/ps-native-menu-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+import { PsHostScope } from '../ps-host-scope/ps-host-scope';
+import { PsActionMenuTrigger } from './ps-action-menu-trigger';
+export const PsActionMenu = ({ children, header, isDisabled = false, items, label, sections, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    const [isOpen, setIsOpen] = useState(false);
+    const groups = PsActionMenuService.sections(items, sections);
+    return (_jsx(PsHostScope, { matchContents: true, children: _jsxs(DropdownMenu, { color: theme.surface, expanded: isOpen, onDismissRequest: () => setIsOpen(false), children: [_jsxs(DropdownMenu.Items, { children: [header === undefined ? null : (_jsx(DropdownMenuItem, { enabled: false, children: _jsx(DropdownMenuItem.Text, { children: _jsx(Text, { style: { fontWeight: PsNativeMenuConfig.selectedWeight }, children: header.subtitle === undefined
+                                        ? header.title
+                                        : `${header.title}\n${header.subtitle}` }) }) }, 'header')), groups.map((group, index) => (_jsxs(Fragment, { children: [index > 0 || header !== undefined ? _jsx(HorizontalDivider, {}) : null, PsActionMenuService.flatten([group]).map((item) => (_jsx(DropdownMenuItem, { elementColors: {
+                                        textColor: item.isDanger
+                                            ? theme.danger
+                                            : item.isChecked
+                                                ? theme.primary
+                                                : theme.ink,
+                                    }, enabled: item.isDisabled !== true, onClick: () => {
+                                        setIsOpen(false);
+                                        haptic('selection');
+                                        item.onSelect();
+                                    }, children: _jsx(DropdownMenuItem.Text, { children: _jsx(Text, { style: {
+                                                fontWeight: item.isChecked
+                                                    ? PsNativeMenuConfig.selectedWeight
+                                                    : PsNativeMenuConfig.unselectedWeight,
+                                            }, children: item.label }) }) }, item.id)))] }, group.id)))] }), _jsx(DropdownMenu.Trigger, { children: _jsx(RNHostView, { matchContents: true, children: _jsx(PsActionMenuTrigger, { isDisabled: isDisabled, label: label, state: {
+                                isOpen,
+                                open: () => {
+                                    if (!isDisabled)
+                                        setIsOpen(true);
+                                },
+                            }, children: children }) }) })] }) }));
+};

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

@@ -0,0 +1,2 @@
+import type { PsActionMenuProps } from './ps-action-menu-props';
+export declare const PsActionMenu: ({ children, header, isDisabled, items, label, sections, }: PsActionMenuProps) => import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+import type { PsActionMenuProps } from './ps-action-menu-props';
+export declare const PsActionMenu: ({ children, header, isDisabled, items, label, sections, }: PsActionMenuProps) => import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+import { PsNativeMenuOverlay } from '../ps-native-menu-overlay/ps-native-menu-overlay';
+import { PsActionMenuEntries } from './ps-action-menu-entries';
+export const PsActionMenu = ({ children, header, isDisabled = false, items, label, sections, }) => (_jsxs(View, { children: [typeof children === 'function' ? children({ isOpen: false, open: () => undefined }) : children, _jsx(PsNativeMenuOverlay, { isDisabled: isDisabled, label: label, children: _jsx(PsActionMenuEntries, { header: header, sections: PsActionMenuService.sections(items, sections) }) })] }));

package/dist/components/ps-action-menu/ps-action-menu.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 { PsActionMenuService } from '../../services/ps-action-menu-service';
+import { PsActionSheet } from '../ps-action-sheet/ps-action-sheet';
+import { PsActionMenuTrigger } from './ps-action-menu-trigger';
+export const PsActionMenu = ({ children, header, isDisabled = false, items, label, sections, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const flat = PsActionMenuService.flatten(PsActionMenuService.sections(items, sections));
+    return (_jsxs(View, { children: [_jsx(PsActionMenuTrigger, { isDisabled: isDisabled, label: label, state: {
+                    isOpen,
+                    open: () => {
+                        if (!isDisabled)
+                            setIsOpen(true);
+                    },
+                }, children: children }), _jsx(PsActionSheet, { isOpen: isOpen, items: flat, onClose: () => setIsOpen(false), title: header === undefined ? undefined : header.title })] }));
+};

package/dist/components/ps-action-sheet/index.d.ts

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

package/dist/components/ps-action-sheet/index.js

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

package/dist/components/ps-action-sheet/ps-action-sheet-props.d.ts

@@ -0,0 +1,8 @@
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsActionSheetProps {
+    cancelLabel?: string;
+    isOpen: boolean;
+    items: PsMenuItem[];
+    onClose: () => void;
+    title?: string;
+}

package/dist/components/ps-action-sheet/ps-action-sheet-props.js

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

package/dist/components/ps-action-sheet/ps-action-sheet.d.ts

@@ -0,0 +1,2 @@
+import type { PsActionSheetProps } from './ps-action-sheet-props';
+export declare const PsActionSheet: ({ cancelLabel, isOpen, items, onClose, title, }: PsActionSheetProps) => import("react").JSX.Element;

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Modal, Pressable, StyleSheet, View } from 'react-native';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsActionSheetService } from '../../services/ps-action-sheet-service';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+export const PsActionSheet = ({ cancelLabel, isOpen, items, onClose, title, }) => {
+    const theme = usePsMobileTheme();
+    const insets = useSafeAreaInsets();
+    const pending = useRef(undefined);
+    const runPending = () => {
+        const action = pending.current;
+        pending.current = undefined;
+        action?.();
+    };
+    return (_jsxs(Modal, { animationType: 'fade', onDismiss: runPending, onRequestClose: onClose, statusBarTranslucent: true, transparent: true, visible: isOpen, children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: onClose, style: [StyleSheet.absoluteFill, { backgroundColor: theme.overlay }] }), _jsx(View, { pointerEvents: 'box-none', style: { flex: 1, justifyContent: 'flex-end' }, children: _jsxs(Animated.View, { entering: FadeInDown, style: {
+                        backgroundColor: theme.surface,
+                        borderColor: theme.line,
+                        borderTopLeftRadius: PsLayoutConfig.actionSheetRadius,
+                        borderTopRightRadius: PsLayoutConfig.actionSheetRadius,
+                        borderWidth: 1,
+                        paddingBottom: insets.bottom + PsLayoutConfig.sheetFooterGap,
+                        paddingTop: PsLayoutConfig.sheetFooterGap,
+                    }, testID: 'ps-action-sheet', children: [title === undefined ? null : (_jsx(View, { style: { paddingHorizontal: PsLayoutConfig.gutter, paddingVertical: 8 }, children: _jsx(PsText, { tone: 'muted', variant: 'label', children: title }) })), items.map((item) => (_jsxs(Pressable, { accessibilityRole: 'menuitem', accessibilityState: { disabled: item.isDisabled === true }, disabled: item.isDisabled, onPress: () => {
+                                pending.current = item.onSelect;
+                                onClose();
+                                if (!PsActionSheetService.runsOnDismiss())
+                                    runPending();
+                            }, style: ({ pressed }) => ({
+                                alignItems: 'center',
+                                backgroundColor: pressed
+                                    ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                                    : 'transparent',
+                                flexDirection: 'row',
+                                gap: PsMobileControlConfig.rowSpacing,
+                                minHeight: PsLayoutConfig.actionSheetRowHeight,
+                                opacity: item.isDisabled === true ? PsMobileControlConfig.disabledOpacity : 1,
+                                paddingHorizontal: PsLayoutConfig.gutter,
+                            }), children: [item.iconKey === undefined ? null : (_jsx(PsIcon, { color: item.isDanger === true ? theme.danger : theme.ink, iconKey: item.iconKey })), _jsx(PsText, { style: { flex: 1 }, tone: item.isDanger === true ? 'danger' : 'ink', weight: 'medium', children: item.label }), item.isChecked === true ? (_jsx(PsIcon, { color: theme.primary, iconKey: PsIconKey.Check })) : null] }, item.id))), cancelLabel === undefined ? null : (_jsx(Pressable, { accessibilityRole: 'button', onPress: onClose, style: {
+                                alignItems: 'center',
+                                borderTopColor: theme.line,
+                                borderTopWidth: 1,
+                                justifyContent: 'center',
+                                marginTop: PsLayoutConfig.sheetFooterGap,
+                                minHeight: PsLayoutConfig.actionSheetRowHeight,
+                            }, children: _jsx(PsText, { weight: 'semibold', children: cancelLabel }) }))] }) })] }));
+};

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

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

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

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

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

@@ -0,0 +1,11 @@
+export interface PsAmountFieldProps {
+    currencyPrefix?: string;
+    errorText?: string;
+    helperText?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    value: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsAmountFieldProps } from './ps-amount-field-props';
+export declare const PsAmountField: ({ currencyPrefix, errorText, helperText, isDisabled, isLoading, label, onChange, placeholder, value, }: PsAmountFieldProps) => import("react").JSX.Element;

package/dist/components/ps-amount-field/ps-amount-field.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextInput, View } from 'react-native';
+import { PsAmountFieldConfig } from '../../constants/ps-amount-field-config';
+import { usePsFocus } from '../../hooks/use-ps-focus';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsAmountFieldService } from '../../services/ps-amount-field-service';
+import { PsControlStyleService } from '../../services/ps-control-style-service';
+import { PsFieldFrame } from '../ps-field-frame/ps-field-frame';
+import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsText } from '../ps-text/ps-text';
+export const PsAmountField = ({ currencyPrefix, errorText, helperText, isDisabled = false, isLoading = false, label, onChange, placeholder, value, }) => {
+    const theme = usePsMobileTheme();
+    const focus = usePsFocus();
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, {});
+    return (_jsx(PsFieldFrame, { errorText: errorText, helperText: helperText, label: label, children: _jsxs(View, { style: [
+                PsControlStyleService.container(theme, {
+                    hasError: errorText !== undefined,
+                    isDisabled,
+                    isFocused: focus.isFocused,
+                }),
+                { gap: PsAmountFieldConfig.prefixSpacing },
+            ], children: [currencyPrefix === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'numeric', children: currencyPrefix })), _jsx(TextInput, { accessibilityLabel: label, editable: !isDisabled, keyboardType: 'decimal-pad', onBlur: focus.onBlur, onChangeText: (raw) => onChange?.(PsAmountFieldService.sanitize(raw)), onFocus: focus.onFocus, placeholder: placeholder, placeholderTextColor: theme.muted, selectionColor: theme.primary, style: [
+                        PsControlStyleService.input(theme),
+                        { fontFamily: theme.fonts.medium, fontVariant: ['tabular-nums'] },
+                    ], value: value })] }) }));
+};

package/dist/components/ps-amount-text/index.d.ts

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

package/dist/components/ps-amount-text/index.js

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

package/dist/components/ps-amount-text/ps-amount-text-props.d.ts

@@ -0,0 +1,5 @@
+import type { PsAmountDirection } from '../../services/ps-amount-tone-service';
+export interface PsAmountTextProps {
+    direction?: PsAmountDirection;
+    formatted: string;
+}

package/dist/components/ps-amount-text/ps-amount-text-props.js

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

package/dist/components/ps-amount-text/ps-amount-text.d.ts

@@ -0,0 +1,2 @@
+import type { PsAmountTextProps } from './ps-amount-text-props';
+export declare const PsAmountText: ({ direction, formatted }: PsAmountTextProps) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsAmountToneService } from '../../services/ps-amount-tone-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsAmountText = ({ direction = 'neutral', formatted }) => {
+    const theme = usePsMobileTheme();
+    return (_jsx(PsText, { style: { color: PsAmountToneService.color(direction, theme) }, variant: 'numeric', weight: direction === 'neutral' ? 'regular' : 'medium', children: formatted }));
+};

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

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

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

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

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

@@ -0,0 +1,6 @@
+export interface PsAvatarProps {
+    alt?: string;
+    initials: string;
+    size?: 'header' | 'large' | 'medium' | 'small';
+    src?: string | null;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsAvatarProps } from './ps-avatar-props';
+export declare const PsAvatar: ({ alt, initials, size, src }: PsAvatarProps) => import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { Image, View } from 'react-native';
+import { PsAvatarConfig } from '../../constants/ps-avatar-config';
+import { PsPageHeaderContext } from '../../contexts/ps-page-header-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsAvatar = ({ alt, initials, size, src }) => {
+    const theme = usePsMobileTheme();
+    const [hasFailed, setHasFailed] = useState(false);
+    const isInHeader = useContext(PsPageHeaderContext);
+    const resolved = size === undefined ? (isInHeader ? 'header' : 'small') : size;
+    const dimension = PsAvatarConfig.sizes[resolved];
+    const shape = { borderRadius: dimension / 2, height: dimension, width: dimension };
+    const hasImage = src !== null && src !== undefined && src !== '' && !hasFailed;
+    return hasImage ? (_jsx(Image, { accessibilityLabel: alt, resizeMode: 'cover', onError: () => setHasFailed(true), source: { uri: src }, style: shape, testID: 'ps-avatar-image' })) : (_jsx(View, { accessibilityLabel: alt, accessible: alt !== undefined, style: [
+            shape,
+            {
+                alignItems: 'center',
+                backgroundColor: PsMobileColorService.withAlpha(theme.primary, PsAvatarConfig.softAlpha),
+                justifyContent: 'center',
+            },
+        ], testID: 'ps-avatar', children: _jsx(PsText, { style: {
+                color: theme.ink,
+                fontSize: PsAvatarConfig.fontSizes[resolved],
+                lineHeight: PsAvatarConfig.fontSizes[resolved] + 4,
+            }, weight: 'bold', children: initials }) }));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { PsBadgeTone } from '../../services/ps-badge-tone-service';
+export interface PsBadgeProps {
+    children: string;
+    isLoading?: boolean;
+    size?: 'default' | 'small';
+    tone?: PsBadgeTone;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsBadgeProps } from './ps-badge-props';
+export declare const PsBadge: ({ children, isLoading, size, tone, }: PsBadgeProps) => import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsBadgeToneService } from '../../services/ps-badge-tone-service';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+import { PsText } from '../ps-text/ps-text';
+export const PsBadge = ({ children, isLoading = false, size = 'default', tone = 'neutral', }) => {
+    const theme = usePsMobileTheme();
+    const colors = PsBadgeToneService.resolve(tone, theme);
+    const isSmall = size === 'small';
+    if (isLoading)
+        return _jsx(PsSkeleton, { shape: PsSkeletonShape.Badge });
+    return (_jsx(View, { style: {
+            alignItems: 'center',
+            alignSelf: 'flex-start',
+            backgroundColor: colors.background,
+            borderRadius: 999,
+            justifyContent: 'center',
+            flexShrink: 0,
+            minHeight: isSmall
+                ? PsMobileControlConfig.badgeSmallHeight
+                : PsMobileControlConfig.badgeMinHeight,
+            paddingHorizontal: isSmall
+                ? PsMobileControlConfig.badgeSmallPadding
+                : PsMobileControlConfig.badgeHorizontalPadding,
+            paddingVertical: isSmall ? 0 : PsMobileControlConfig.badgeVerticalPadding,
+        }, children: _jsx(PsText, { numberOfLines: 1, style: { color: colors.foreground }, variant: isSmall ? 'caption' : 'label', weight: 'semibold', children: children }) }));
+};

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

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

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

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

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

@@ -0,0 +1,15 @@
+import type { PsIconKey } from '@pallasoft/ps-icons';
+import type { PsButtonVariant } from '../../services/ps-button-style-service';
+export type PsButtonSize = 'compact' | 'default' | 'large';
+export interface PsButtonProps {
+    children: string;
+    isDisabled?: boolean;
+    isFullWidth?: boolean;
+    isLoading?: boolean;
+    leadingIcon?: PsIconKey;
+    loadingLabel?: string;
+    onPress?: () => void;
+    size?: PsButtonSize;
+    trailingIcon?: PsIconKey;
+    variant?: PsButtonVariant;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsButtonProps } from './ps-button-props';
+export declare const PsButton: ({ children, isDisabled, isFullWidth, isLoading, leadingIcon, loadingLabel, onPress, size, trailingIcon, variant, }: PsButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsButtonStyleService } from '../../services/ps-button-style-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+import { PsText } from '../ps-text/ps-text';
+export const PsButton = ({ children, isDisabled = false, isFullWidth = false, isLoading = false, leadingIcon, loadingLabel, onPress, size = 'default', trailingIcon, variant = 'secondary', }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    const style = PsButtonStyleService.resolve(variant, theme);
+    const isInactive = isDisabled || isLoading;
+    const iconSize = PsMobileControlConfig.iconSizeInline;
+    return (_jsx(Pressable, { accessibilityLabel: isLoading && loadingLabel !== undefined ? loadingLabel : children, accessibilityRole: 'button', accessibilityState: { busy: isLoading, disabled: isInactive }, disabled: isInactive, onPress: onPress === undefined
+            ? undefined
+            : () => {
+                haptic('light');
+                onPress();
+            }, style: ({ pressed }) => ({
+            alignItems: 'center',
+            alignSelf: isFullWidth ? 'stretch' : 'flex-start',
+            backgroundColor: pressed ? style.pressedBackground : style.background,
+            borderColor: pressed ? style.pressedBorder : style.border,
+            borderRadius: PsMobileControlConfig.controlRadius,
+            borderWidth: 1,
+            height: PsMobileControlConfig.controlHeights[size],
+            justifyContent: 'center',
+            opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+            paddingHorizontal: PsMobileControlConfig.controlPaddingX[size],
+        }), children: isLoading ? (_jsx(PsSpinner, { color: style.foreground })) : (_jsxs(View, { style: {
+                alignItems: 'center',
+                flexDirection: 'row',
+                gap: PsMobileControlConfig.buttonIconSpacing,
+            }, children: [leadingIcon === undefined ? null : (_jsx(PsIcon, { color: style.foreground, iconKey: leadingIcon, size: iconSize })), _jsx(PsText, { numberOfLines: 1, style: { color: style.foreground, fontSize: PsMobileControlConfig.controlFontSize }, weight: 'semibold', children: children }), trailingIcon === undefined ? null : (_jsx(PsIcon, { color: style.foreground, iconKey: trailingIcon, size: iconSize }))] })) }));
+};

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

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

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

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