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

package/dist/components/ps-statement-table/ps-statement-table-row.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, View } from 'react-native';
+import { PsStatementTableConfig } from '../../constants/ps-statement-table-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsStatementTableService } from '../../services/ps-statement-table-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsStatementTableRow = ({ columns, onPress, row }) => {
+    const theme = usePsMobileTheme();
+    const color = PsStatementTableService.color(row, theme);
+    const weight = PsStatementTableService.isStrong(row) ? 'semibold' : 'regular';
+    const isHeading = row.emphasis === 'heading';
+    const isTotal = row.emphasis === 'total' || row.emphasis === 'subtotal';
+    const isPressable = row.isPressable === true && onPress !== undefined;
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            backgroundColor: theme.background,
+            borderTopColor: PsMobileColorService.withAlpha(theme.ink, 0.12),
+            borderTopWidth: isTotal ? 1 : 0,
+            flexDirection: 'row',
+            paddingHorizontal: PsStatementTableConfig.gutter,
+            paddingVertical: PsStatementTableConfig.rowPaddingVertical,
+        }, children: [_jsxs(Pressable, { accessibilityRole: isPressable ? 'button' : undefined, disabled: !isPressable, onPress: () => onPress?.(row.key, 0), style: {
+                    paddingLeft: PsStatementTableService.indent(row),
+                    paddingRight: 8,
+                    ...PsStatementTableService.labelStyle(),
+                }, children: [_jsx(PsText, { style: {
+                            color: isHeading ? theme.muted : color,
+                            textTransform: isHeading ? 'uppercase' : 'none',
+                        }, variant: isHeading ? 'label' : 'body', weight: weight, children: row.label }), row.subtitle === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: row.subtitle }))] }), columns.map((column, index) => (_jsx(Pressable, { accessibilityRole: isPressable ? 'button' : undefined, disabled: !isPressable, onPress: () => onPress?.(row.key, index), style: { width: PsStatementTableService.columnWidth(column) }, children: _jsx(PsText, { style: { color, textAlign: PsStatementTableService.align(column) }, variant: 'numeric', weight: weight, children: PsStatementTableService.value(row, index) }) }, column.key)))] }));
+};

package/dist/components/ps-statement-table/ps-statement-table-skeleton.d.ts

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

package/dist/components/ps-statement-table/ps-statement-table-skeleton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { PsStatementTableConfig } from '../../constants/ps-statement-table-config';
+import { PsStatementTableService } from '../../services/ps-statement-table-service';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsStatementTableSkeleton = ({ columns }) => (_jsx(View, { testID: 'ps-statement-table-skeleton', children: Array.from({ length: PsStatementTableConfig.skeletonSections }, (section, sectionIndex) => (_jsxs(View, { style: { paddingTop: 16 }, children: [_jsx(View, { style: {
+                    paddingHorizontal: PsStatementTableConfig.gutter,
+                    paddingVertical: PsStatementTableConfig.rowPaddingVertical,
+                }, children: _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: 96 }) }), Array.from({ length: PsStatementTableConfig.skeletonRowsPerSection }, (row, rowIndex) => (_jsxs(View, { style: {
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                    paddingHorizontal: PsStatementTableConfig.gutter,
+                    paddingVertical: PsStatementTableConfig.rowPaddingVertical,
+                }, children: [_jsx(View, { style: {
+                            paddingLeft: PsStatementTableConfig.indentStep,
+                            ...PsStatementTableService.labelStyle(),
+                        }, children: _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsStatementTableConfig.skeletonLabelWidths[rowIndex] }) }), Array.from({ length: columns }, (column, columnIndex) => (_jsx(View, { style: { alignItems: 'flex-end', width: PsStatementTableConfig.columnWidth }, children: _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsStatementTableConfig.skeletonValueWidth }) }, columnIndex)))] }, rowIndex)))] }, sectionIndex))) }));

package/dist/components/ps-statement-table/ps-statement-table.d.ts

@@ -0,0 +1,2 @@
+import type { PsStatementTableProps } from './ps-statement-table-props';
+export declare const PsStatementTable: ({ columns, isLoading, labelHeader, onRowPress, rows, skeletonColumns, }: PsStatementTableProps) => import("react").JSX.Element;

package/dist/components/ps-statement-table/ps-statement-table.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { PsStatementTableConfig } from '../../constants/ps-statement-table-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsStatementTableService } from '../../services/ps-statement-table-service';
+import { PsText } from '../ps-text/ps-text';
+import { PsStatementTableRow } from './ps-statement-table-row';
+import { PsStatementTableSkeleton } from './ps-statement-table-skeleton';
+export const PsStatementTable = ({ columns, isLoading = false, labelHeader, onRowPress, rows, skeletonColumns = PsStatementTableConfig.skeletonColumns, }) => {
+    const theme = usePsMobileTheme();
+    const [containerWidth, setContainerWidth] = useState(0);
+    const skeletonColumnList = useMemo(() => Array.from({ length: skeletonColumns }, (item, index) => ({ key: String(index), label: '' })), [skeletonColumns]);
+    const width = PsStatementTableService.fitWidth(containerWidth, PsStatementTableService.width(isLoading ? skeletonColumnList : columns));
+    return (_jsx(ScrollView, { horizontal: true, onLayout: (event) => setContainerWidth(event.nativeEvent.layout.width), showsHorizontalScrollIndicator: false, style: { backgroundColor: theme.background }, testID: 'ps-statement-table', children: _jsx(View, { style: { width }, testID: 'ps-statement-table-content', children: isLoading ? (_jsx(PsStatementTableSkeleton, { columns: skeletonColumns })) : (_jsxs(_Fragment, { children: [_jsxs(View, { style: {
+                            alignItems: 'center',
+                            borderBottomColor: PsMobileColorService.withAlpha(theme.ink, 0.12),
+                            borderBottomWidth: 1,
+                            flexDirection: 'row',
+                            paddingHorizontal: PsStatementTableConfig.gutter,
+                            paddingVertical: PsStatementTableConfig.rowPaddingVertical,
+                        }, children: [_jsx(PsText, { style: PsStatementTableService.labelStyle(), tone: 'muted', variant: 'label', children: labelHeader === undefined ? '' : labelHeader }), columns.map((column) => (_jsx(PsText, { style: {
+                                    textAlign: PsStatementTableService.align(column),
+                                    width: PsStatementTableService.columnWidth(column),
+                                }, tone: 'muted', variant: 'label', children: column.label }, column.key)))] }), rows.map((row) => (_jsx(PsStatementTableRow, { columns: columns, onPress: onRowPress, row: row }, row.key)))] })) }) }));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+export interface PsSwitchProps {
+    description?: string;
+    isChecked: boolean;
+    isDisabled?: boolean;
+    label: string;
+    onChange?: (isChecked: boolean) => void;
+}

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

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

package/dist/components/ps-switch/ps-switch.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.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch, 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 { PsText } from '../ps-text/ps-text';
+export const PsSwitch = ({ description, isChecked, isDisabled = false, label, onChange, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: PsMobileControlConfig.rowSpacing,
+            opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+        }, children: [_jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { weight: 'semibold', children: label }), description === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: description }))] }), _jsx(Switch, { accessibilityLabel: label, disabled: isDisabled, ios_backgroundColor: theme.line, onValueChange: (isOn) => {
+                    haptic('selection');
+                    onChange?.(isOn);
+                }, thumbColor: theme.white, trackColor: { false: theme.line, true: theme.primary }, value: isChecked })] }));
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface PsTabsProps<T> {
+    getItemIcon?: (item: T) => ReactNode;
+    getItemKey: (item: T) => string;
+    getItemLabel: (item: T) => string;
+    isLoading?: boolean;
+    items: T[];
+    onSelectionChange: (key: string) => void;
+    selectedKey: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsTabsProps } from './ps-tabs-props';
+export declare const PsTabs: <T>({ getItemIcon, getItemKey, getItemLabel, isLoading, items, onSelectionChange, selectedKey, }: PsTabsProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,49 @@
+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 { 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 { PsTabsService } from '../../services/ps-tabs-service';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+import { PsText } from '../ps-text/ps-text';
+export const PsTabs = ({ getItemIcon, getItemKey, getItemLabel, isLoading = false, items, onSelectionChange, selectedKey, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    const scroll = useRef(null);
+    const frames = useRef(new Map());
+    const [viewportWidth, setViewportWidth] = useState(0);
+    useEffect(() => {
+        const target = PsTabsService.scrollTarget(frames.current.get(selectedKey), viewportWidth);
+        if (target !== null)
+            scroll.current?.scrollTo({ animated: true, x: target });
+    }, [selectedKey, viewportWidth]);
+    if (isLoading)
+        return (_jsx(View, { style: { flexDirection: 'row', gap: PsTabsConfig.labelGap }, children: Array.from({ length: PsTabsConfig.skeletonCount }, (_, index) => (_jsx(PsSkeleton, { shape: PsSkeletonShape.Control, width: PsTabsConfig.skeletonWidth }, index))) }));
+    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, {
+                        width: event.nativeEvent.layout.width,
+                        x: event.nativeEvent.layout.x,
+                    }), onPress: () => {
+                        if (key !== selectedKey)
+                            haptic('selection');
+                        onSelectionChange(key);
+                    }, style: {
+                        alignItems: 'center',
+                        borderBottomColor: isSelected ? theme.primary : 'transparent',
+                        borderBottomWidth: PsTabsConfig.indicatorHeight,
+                        flexDirection: 'row',
+                        flexGrow: 1,
+                        gap: PsTabsConfig.labelGap,
+                        height: PsMobileControlConfig.controlHeights.large,
+                        justifyContent: 'center',
+                        marginBottom: -1,
+                        paddingHorizontal: PsTabsConfig.tabPaddingX,
+                    }, children: [getItemIcon === undefined ? null : getItemIcon(item), _jsx(PsText, { numberOfLines: 1, style: { color, fontSize: PsMobileControlConfig.controlFontSize }, weight: 'semibold', children: getItemLabel(item) })] }, key));
+            }) }) }));
+};

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

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

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

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

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { AccessibilityRole, StyleProp, TextProps, TextStyle } from 'react-native';
+import type { PsFontWeight } from '../../interfaces/ps-font-weight';
+import type { PsTextAlign } from '../../interfaces/ps-text-align';
+import type { PsTextTone } from '../../interfaces/ps-text-tone';
+import type { PsTextVariant } from '../../interfaces/ps-text-variant';
+export interface PsTextProps {
+    accessibilityRole?: AccessibilityRole;
+    align?: PsTextAlign;
+    children: ReactNode;
+    ellipsizeMode?: TextProps['ellipsizeMode'];
+    isSelectable?: boolean;
+    numberOfLines?: number;
+    onPress?: () => void;
+    style?: StyleProp<TextStyle>;
+    testID?: string;
+    tone?: PsTextTone;
+    variant?: PsTextVariant;
+    weight?: PsFontWeight;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsTextProps } from './ps-text-props';
+export declare const PsText: ({ accessibilityRole, align, children, ellipsizeMode, isSelectable, numberOfLines, onPress, style, testID, tone, variant, weight, }: PsTextProps) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, Text } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsTextService } from '../../services/ps-text-service';
+export const PsText = ({ accessibilityRole, align, children, ellipsizeMode = 'tail', isSelectable = false, numberOfLines, onPress, style, testID, tone = 'ink', variant = 'body', weight, }) => {
+    const theme = usePsMobileTheme();
+    return (_jsx(Text, { accessibilityRole: accessibilityRole, ellipsizeMode: ellipsizeMode, numberOfLines: numberOfLines, onPress: onPress, selectable: isSelectable, style: StyleSheet.flatten([
+            PsTextService.style(variant, tone, weight, theme),
+            { textAlign: align },
+            style,
+        ]), testID: testID, children: children }));
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { PsTextAreaProps } from './ps-text-area-props';
+export declare const PsTextArea: ({ errorText, helperText, isDisabled, isLoading, label, lines, onChange, placeholder, value, }: PsTextAreaProps) => import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput, View } from 'react-native';
+import { PsTextAreaConfig } from '../../constants/ps-text-area-config';
+import { usePsFocus } from '../../hooks/use-ps-focus';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+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';
+export const PsTextArea = ({ errorText, helperText, isDisabled = false, isLoading = false, label, lines = PsTextAreaConfig.defaultLines, onChange, placeholder, value, }) => {
+    const theme = usePsMobileTheme();
+    const focus = usePsFocus();
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, {});
+    return (_jsx(PsFieldFrame, { errorText: errorText, helperText: helperText, label: label, children: _jsx(View, { style: [
+                PsControlStyleService.container(theme, {
+                    hasError: errorText !== undefined,
+                    isDisabled,
+                    isFocused: focus.isFocused,
+                }),
+                { alignItems: 'flex-start' },
+            ], children: _jsx(TextInput, { accessibilityLabel: label, editable: !isDisabled, multiline: true, onBlur: focus.onBlur, onChangeText: onChange, onFocus: focus.onFocus, placeholder: placeholder, placeholderTextColor: theme.muted, selectionColor: theme.primary, style: [
+                    PsControlStyleService.input(theme),
+                    {
+                        lineHeight: PsTextAreaConfig.lineHeight,
+                        minHeight: lines * PsTextAreaConfig.lineHeight + PsTextAreaConfig.verticalPadding * 2,
+                        paddingVertical: PsTextAreaConfig.verticalPadding,
+                        textAlignVertical: 'top',
+                    },
+                ], value: value }) }) }));
+};

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

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

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

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

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

@@ -0,0 +1,12 @@
+import type { PsTextFieldType } from '../../interfaces/ps-text-field-type';
+export interface PsTextFieldProps {
+    errorText?: string;
+    helperText?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    type?: PsTextFieldType;
+    value: string;
+}

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput, View } from 'react-native';
+import { usePsFocus } from '../../hooks/use-ps-focus';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsControlStyleService } from '../../services/ps-control-style-service';
+import { PsKeyboardService } from '../../services/ps-keyboard-service';
+import { PsFieldFrame } from '../ps-field-frame/ps-field-frame';
+import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+export const PsTextField = ({ errorText, helperText, isDisabled = false, isLoading = false, label, onChange, placeholder, type = 'text', value, }) => {
+    const theme = usePsMobileTheme();
+    const focus = usePsFocus();
+    const isFree = PsKeyboardService.isFree(type);
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, {});
+    return (_jsx(PsFieldFrame, { errorText: errorText, helperText: helperText, label: label, children: _jsx(View, { style: PsControlStyleService.container(theme, {
+                hasError: errorText !== undefined,
+                isDisabled,
+                isFocused: focus.isFocused,
+            }), children: _jsx(TextInput, { accessibilityLabel: label, autoCapitalize: isFree ? 'sentences' : 'none', autoCorrect: isFree, editable: !isDisabled, keyboardType: PsKeyboardService.keyboardType(type), onBlur: focus.onBlur, onChangeText: onChange, onFocus: focus.onFocus, placeholder: placeholder, placeholderTextColor: theme.muted, secureTextEntry: PsKeyboardService.isSecure(type), selectionColor: theme.primary, style: PsControlStyleService.input(theme), value: value }) }) }));
+};

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

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

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

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

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

@@ -0,0 +1,5 @@
+export interface PsTextLinkProps {
+    children: string;
+    onPress: () => void;
+    tone?: 'emphasis' | 'muted' | 'white';
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsTextLinkProps } from './ps-text-link-props';
+export declare const PsTextLink: ({ children, onPress, tone }: PsTextLinkProps) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsText } from '../ps-text/ps-text';
+export const PsTextLink = ({ children, onPress, tone = 'emphasis' }) => {
+    const theme = usePsMobileTheme();
+    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,
+            textDecorationLine: 'underline',
+        }, tone: isWhite ? 'white' : isEmphasis ? 'ink' : 'muted', weight: isEmphasis || isWhite ? 'semibold' : 'regular', children: children }));
+};

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

@@ -0,0 +1,3 @@
+export * from './ps-toast';
+export * from './ps-toast-props';
+export * from './ps-toast-provider';

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

@@ -0,0 +1,3 @@
+export * from './ps-toast';
+export * from './ps-toast-props';
+export * from './ps-toast-provider';

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { PsToastActionData } from '../../interfaces/ps-toast-action-data';
+import type { PsToastTone } from '../../interfaces/ps-toast-tone';
+export interface PsToastProps {
+    action?: PsToastActionData;
+    message: string;
+    onDismiss: () => void;
+    tone?: PsToastTone;
+}
+export interface PsToastProviderProps {
+    children: ReactNode;
+    topInset?: number;
+}

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

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

package/dist/components/ps-toast/ps-toast-provider.d.ts

@@ -0,0 +1,2 @@
+import type { PsToastProviderProps } from './ps-toast-props';
+export declare const PsToastProvider: ({ children, topInset }: PsToastProviderProps) => import("react").JSX.Element;

package/dist/components/ps-toast/ps-toast-provider.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { View } from 'react-native';
+import { PsToastConfig } from '../../constants/ps-toast-config';
+import { PsToastContext } from '../../contexts/ps-toast-context';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { PsToastToneService } from '../../services/ps-toast-tone-service';
+import { PsToast } from './ps-toast';
+export const PsToastProvider = ({ children, topInset = 0 }) => {
+    const haptic = usePsHaptics();
+    const [items, setItems] = useState([]);
+    const timers = useRef(new Map());
+    const counter = useRef(0);
+    const removeToast = useCallback((id) => {
+        const timer = timers.current.get(id);
+        if (timer !== undefined)
+            clearTimeout(timer);
+        timers.current.delete(id);
+        setItems((current) => current.filter((item) => item.id !== id));
+    }, []);
+    const showToast = useCallback((message, tone = 'primary', action) => {
+        const feedback = PsToastToneService.haptic(tone);
+        if (feedback !== null)
+            haptic(feedback);
+        counter.current += 1;
+        const id = `ps-toast-${counter.current}`;
+        setItems((current) => [...current, { action, id, message, tone }].slice(-PsToastConfig.maxVisible));
+        timers.current.set(id, setTimeout(() => removeToast(id), PsToastToneService.duration(action !== undefined, PsToastConfig.durationMs, PsToastConfig.actionDurationMs)));
+    }, [haptic, removeToast]);
+    useEffect(() => {
+        const pending = timers.current;
+        return () => pending.forEach((timer) => clearTimeout(timer));
+    }, []);
+    const value = useMemo(() => ({ removeToast, showToast }), [removeToast, showToast]);
+    return (_jsxs(PsToastContext.Provider, { value: value, children: [children, _jsx(View, { pointerEvents: 'box-none', style: {
+                    gap: PsToastConfig.gap,
+                    left: PsToastConfig.horizontalInset,
+                    position: 'absolute',
+                    right: PsToastConfig.horizontalInset,
+                    top: topInset + PsToastConfig.topSpacing,
+                    zIndex: PallasoftZIndex.Toast,
+                }, children: items.map((item) => (_jsx(PsToast, { action: item.action, message: item.message, onDismiss: () => removeToast(item.id), tone: item.tone }, item.id))) })] }));
+};

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

@@ -0,0 +1,2 @@
+import type { PsToastProps } from './ps-toast-props';
+export declare const PsToast: ({ action, message, onDismiss, tone }: PsToastProps) => import("react").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, View } from 'react-native';
+import Animated, { FadeInUp, FadeOutUp } from 'react-native-reanimated';
+import { PsToastConfig } from '../../constants/ps-toast-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsToastToneService } from '../../services/ps-toast-tone-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsToast = ({ action, message, onDismiss, tone = 'primary' }) => {
+    const theme = usePsMobileTheme();
+    const accent = PsToastToneService.accent(theme, tone);
+    return (_jsx(Animated.View, { entering: FadeInUp, exiting: FadeOutUp, children: _jsxs(Pressable, { accessibilityLiveRegion: 'polite', accessibilityRole: tone === 'danger' ? 'alert' : 'text', onPress: onDismiss, style: {
+                alignItems: 'center',
+                backgroundColor: theme.surface,
+                borderColor: theme.line,
+                borderLeftColor: accent,
+                borderLeftWidth: 4,
+                borderRadius: PsToastConfig.radius,
+                borderWidth: 1,
+                flexDirection: 'row',
+                gap: PsToastConfig.gap,
+                padding: PsToastConfig.padding,
+            }, testID: 'ps-toast', children: [_jsx(View, { style: { flex: 1 }, children: _jsx(PsText, { children: message }) }), action === undefined ? null : (_jsx(PsText, { accessibilityRole: 'button', onPress: () => {
+                        action.onClick();
+                        onDismiss();
+                    }, style: { color: accent }, weight: 'semibold', children: action.label }))] }) }));
+};

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

@@ -0,0 +1,3 @@
+export * from './ps-widget-grid';
+export * from './ps-widget-list';
+export * from './ps-widget-list-props';

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

@@ -0,0 +1,3 @@
+export * from './ps-widget-grid';
+export * from './ps-widget-list';
+export * from './ps-widget-list-props';

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import { View } from 'react-native';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+export const PsWidgetGrid = ({ children }) => (_jsx(View, { style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: PsChartConfig.kpiGap,
+        justifyContent: 'space-between',
+    }, children: Children.toArray(children).map((child, index) => (_jsx(View, { style: { flexBasis: '47.5%', flexGrow: 0, flexShrink: 1 }, children: child }, index))) }));

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RefreshControl, ScrollView } from 'react-native';
+import { PsListConfig } from '../../constants/ps-list-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsRefresh } from '../../hooks/use-ps-refresh';
+export const PsWidgetList = ({ children, onRefresh, style }) => {
+    const theme = usePsMobileTheme();
+    const { isRefreshing, refresh } = usePsRefresh(onRefresh);
+    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 }));
+};

package/dist/constants/ps-amount-field-config.d.ts

@@ -0,0 +1,5 @@
+export declare const PsAmountFieldConfig: {
+    readonly decimalSeparator: ".";
+    readonly maxDecimals: 2;
+    readonly prefixSpacing: 8;
+};

package/dist/constants/ps-amount-field-config.js

@@ -0,0 +1,5 @@
+export const PsAmountFieldConfig = {
+    decimalSeparator: '.',
+    maxDecimals: 2,
+    prefixSpacing: 8,
+};