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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsListSkeletonService } from '../../services/ps-list-skeleton-service';
+import { PsListRow } from '../ps-list/ps-list-row';
+import { PsListSection } from '../ps-list/ps-list-section';
+export const PsSkeletonList = ({ count, layout }) => {
+    const shape = PsListSkeletonService.resolve(count === undefined ? layout : { ...layout, rows: count });
+    const rowLayout = PsListSkeletonService.rows(shape);
+    return (_jsx(View, { style: { gap: PsLayoutConfig.listGap }, testID: 'ps-skeleton-list', children: PsListSkeletonService.keys(shape.sections, 'section').map((sectionKey) => (_jsx(PsListSection, { children: rowLayout.map((row, index) => (_jsx(PsListRow, { isLoading: true, isSection: row.isSection, skeleton: shape, title: '' }, `${sectionKey}-${index}`))) }, sectionKey))) }));
+};

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

@@ -0,0 +1,16 @@
+import type { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import type { PsListSkeletonLayout } from '../ps-list/ps-list-props';
+export interface PsSkeletonProps {
+    height?: number;
+    lines?: number;
+    radius?: number;
+    shape?: PsSkeletonShape;
+    width?: number;
+}
+export interface PsSkeletonSweepProps {
+    width: number;
+}
+export interface PsSkeletonListProps {
+    count?: number;
+    layout?: PsListSkeletonLayout;
+}

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

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

package/dist/components/ps-skeleton/ps-skeleton-sweep.d.ts

@@ -0,0 +1,2 @@
+import type { PsSkeletonSweepProps } from './ps-skeleton-props';
+export declare const PsSkeletonSweep: ({ width }: PsSkeletonSweepProps) => import("react").JSX.Element | null;

package/dist/components/ps-skeleton/ps-skeleton-sweep.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LinearGradient } from 'expo-linear-gradient';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsSkeletonSweep } from '../../hooks/use-ps-skeleton-sweep';
+export const PsSkeletonSweep = ({ width }) => {
+    const theme = usePsMobileTheme();
+    const { isReduced, style } = usePsSkeletonSweep(width);
+    if (isReduced || width === 0)
+        return null;
+    return (_jsx(Animated.View, { pointerEvents: 'none', style: [StyleSheet.absoluteFill, style], children: _jsx(LinearGradient, { colors: ['transparent', theme.skeletonSweep, 'transparent'], end: { x: 1, y: 0.5 }, start: { x: 0, y: 0.5 }, style: StyleSheet.absoluteFill }) }));
+};

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

@@ -0,0 +1,2 @@
+import type { PsSkeletonProps } from './ps-skeleton-props';
+export declare const PsSkeleton: (props: PsSkeletonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+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 { PsSkeletonService } from '../../services/ps-skeleton-service';
+import { PsSkeletonBar } from './ps-skeleton-bar';
+export const PsSkeleton = (props) => {
+    const resolved = PsSkeletonService.resolve(props);
+    const isText = props.shape === PsSkeletonShape.Text;
+    const lines = isText ? resolved.lineWidths : [resolved.width];
+    return (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants', style: { gap: PsMobileControlConfig.rowSpacing }, testID: 'ps-skeleton', children: lines.map((width, index) => (_jsx(PsSkeletonBar, { height: resolved.height, radius: resolved.radius, width: width === undefined ? '100%' : width }, index))) }));
+};

package/dist/components/ps-sortable-grid/index.d.ts

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

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

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

package/dist/components/ps-sortable-grid/ps-sortable-grid-props.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { PsSortableGridSpan } from '../../constants/ps-sortable-grid-span';
+export interface PsSortableGridItem {
+    id: string;
+    label: string;
+}
+export interface PsSortableGridLabels {
+    moveDown: string;
+    moveUp: string;
+}
+export interface PsSortableGridRenderData<T extends PsSortableGridItem> {
+    isActive: boolean;
+    item: T;
+}
+export interface PsSortableGridProps<T extends PsSortableGridItem> {
+    getItemSpan: (item: T) => PsSortableGridSpan;
+    isDisabled?: boolean;
+    items: T[];
+    labels: PsSortableGridLabels;
+    onReorder: (items: T[]) => void;
+    renderItem: (data: PsSortableGridRenderData<T>) => ReactNode;
+}

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

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

package/dist/components/ps-sortable-grid/ps-sortable-grid.d.ts

@@ -0,0 +1,2 @@
+import type { PsSortableGridItem, PsSortableGridProps } from './ps-sortable-grid-props';
+export declare const PsSortableGrid: <T extends PsSortableGridItem>({ getItemSpan, isDisabled, items, labels, onReorder, renderItem, }: PsSortableGridProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsSortableGridConfig } from '../../constants/ps-sortable-grid-config';
+import { PsScrollContext } from '../../contexts/ps-scroll-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsHapticService } from '../../services/ps-haptic-service';
+import { PsSortableGridService } from '../../services/ps-sortable-grid-service';
+import { PsSortableItem } from './ps-sortable-item';
+export const PsSortableGrid = ({ getItemSpan, isDisabled = false, items, labels, onReorder, renderItem, }) => {
+    const scroll = useContext(PsScrollContext);
+    const { hasHaptics } = usePsMobileTheme();
+    const insets = useSafeAreaInsets();
+    const { height: windowHeight } = useWindowDimensions();
+    const [order, setOrder] = useState(items);
+    const [activeId, setActiveId] = useState(null);
+    const [width, setWidth] = useState(0);
+    const [measured, setMeasured] = useState({});
+    const dragX = useSharedValue(0);
+    const dragY = useSharedValue(0);
+    const drag = useRef({
+        absoluteY: 0,
+        id: null,
+        startOffset: 0,
+        startRect: { height: 0, width: 0, x: 0, y: 0 },
+        timer: null,
+        translationX: 0,
+        translationY: 0,
+    });
+    const ids = useMemo(() => PsSortableGridService.ids(order), [order]);
+    const rects = useMemo(() => PsSortableGridService.layout(order.map((item) => getItemSpan(item)), PsSortableGridService.heights(ids, measured), width), [getItemSpan, ids, measured, order, width]);
+    const isReady = PsSortableGridService.isMeasured(ids, measured, width);
+    const latest = useRef({ items, onReorder, order, rects, scroll, windowHeight, insets });
+    latest.current = { insets, items, onReorder, order, rects, scroll, windowHeight };
+    useEffect(() => {
+        if (activeId === null)
+            setOrder(items);
+    }, [activeId, items]);
+    useEffect(() => () => {
+        if (drag.current.timer !== null)
+            clearInterval(drag.current.timer);
+    }, []);
+    const apply = useCallback(() => {
+        const current = drag.current;
+        if (current.id === null)
+            return;
+        const { order: currentOrder, rects: currentRects, scroll: host } = latest.current;
+        const delta = host === null ? 0 : host.metrics.current.offset - current.startOffset;
+        const x = current.startRect.x + current.translationX;
+        const y = current.startRect.y + current.translationY + delta;
+        const from = currentOrder.findIndex((item) => item.id === current.id);
+        dragX.value = x;
+        dragY.value = y;
+        const to = PsSortableGridService.indexAt(currentRects, x + current.startRect.width / 2, y + current.startRect.height / 2, from);
+        if (to === from)
+            return;
+        const next = PsSortableGridService.move(currentOrder, from, to);
+        latest.current.order = next;
+        setOrder(next);
+        PsHapticService.play('selection', hasHaptics);
+    }, [dragX, dragY, hasHaptics]);
+    const tick = useCallback(() => {
+        const host = latest.current.scroll;
+        if (drag.current.id === null || host === null)
+            return;
+        const metrics = host.metrics.current;
+        const zone = latest.current.windowHeight * PsSortableGridConfig.edgeRatio;
+        const step = PsSortableGridService.scrollStep(drag.current.absoluteY, latest.current.insets.top + zone, latest.current.windowHeight - latest.current.insets.bottom - zone, zone);
+        if (step === 0 || (step < 0 && !metrics.hasOffset))
+            return;
+        const next = PsSortableGridService.clampOffset(metrics.offset + step, metrics.minimum, metrics.content, metrics.viewport);
+        if (next === metrics.offset)
+            return;
+        metrics.offset = next;
+        host.scrollTo(next);
+        apply();
+    }, [apply]);
+    const start = useCallback((id, absoluteY) => {
+        const { order: currentOrder, rects: currentRects, scroll: host } = latest.current;
+        const index = currentOrder.findIndex((item) => item.id === id);
+        if (index === -1)
+            return;
+        if (drag.current.timer !== null)
+            clearInterval(drag.current.timer);
+        drag.current = {
+            absoluteY,
+            id,
+            startOffset: host === null ? 0 : host.metrics.current.offset,
+            startRect: currentRects[index],
+            timer: setInterval(tick, PsSortableGridConfig.scrollTickMs),
+            translationX: 0,
+            translationY: 0,
+        };
+        dragX.value = currentRects[index].x;
+        dragY.value = currentRects[index].y;
+        if (host !== null)
+            host.setLocked(true);
+        setActiveId(id);
+        PsHapticService.play('selection', hasHaptics);
+    }, [dragX, dragY, hasHaptics, tick]);
+    const update = useCallback((translationX, translationY, absoluteY) => {
+        drag.current.translationX = translationX;
+        drag.current.translationY = translationY;
+        drag.current.absoluteY = absoluteY;
+        apply();
+    }, [apply]);
+    const end = useCallback(() => {
+        if (drag.current.id === null)
+            return;
+        if (drag.current.timer !== null)
+            clearInterval(drag.current.timer);
+        drag.current.id = null;
+        drag.current.timer = null;
+        const { items: currentItems, onReorder: notify, order: currentOrder, scroll: host, } = latest.current;
+        if (host !== null)
+            host.setLocked(false);
+        setActiveId(null);
+        if (!PsSortableGridService.isSameOrder(PsSortableGridService.ids(currentOrder), PsSortableGridService.ids(currentItems)))
+            notify(currentOrder);
+    }, []);
+    const moveBy = useCallback((id, delta) => {
+        const { order: currentOrder, onReorder: notify } = latest.current;
+        const from = currentOrder.findIndex((item) => item.id === id);
+        const next = PsSortableGridService.move(currentOrder, from, from + delta);
+        if (next === currentOrder)
+            return;
+        latest.current.order = next;
+        setOrder(next);
+        notify(next);
+        PsHapticService.play('selection', hasHaptics);
+    }, [hasHaptics]);
+    const measure = useCallback((id, height) => {
+        setMeasured((current) => current[id] !== undefined && Math.abs(current[id] - height) < 0.5
+            ? current
+            : { ...current, [id]: height });
+    }, []);
+    return (_jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { height: PsSortableGridService.contentHeight(rects) }, children: order.map((item, index) => (_jsx(PsSortableItem, { canMoveDown: index < order.length - 1, canMoveUp: index > 0, dragX: dragX, dragY: dragY, id: item.id, isActive: item.id === activeId, isDisabled: isDisabled, isReady: isReady, label: item.label, labels: labels, onEnd: end, onMeasure: measure, onMove: moveBy, onStart: start, onUpdate: update, rect: rects[index], children: renderItem({ isActive: item.id === activeId, item }) }, item.id))) }));
+};

package/dist/components/ps-sortable-grid/ps-sortable-item-props.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type { PsSortableRect } from '../../interfaces/ps-sortable-rect';
+import type { PsSortableGridLabels } from './ps-sortable-grid-props';
+export interface PsSortableItemProps {
+    canMoveDown: boolean;
+    canMoveUp: boolean;
+    children: ReactNode;
+    dragX: SharedValue<number>;
+    dragY: SharedValue<number>;
+    id: string;
+    isActive: boolean;
+    isDisabled: boolean;
+    isReady: boolean;
+    label: string;
+    labels: PsSortableGridLabels;
+    onEnd: () => void;
+    onMeasure: (id: string, height: number) => void;
+    onMove: (id: string, delta: number) => void;
+    onStart: (id: string, absoluteY: number) => void;
+    onUpdate: (translationX: number, translationY: number, absoluteY: number) => void;
+    rect: PsSortableRect;
+}

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

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

package/dist/components/ps-sortable-grid/ps-sortable-item.d.ts

@@ -0,0 +1,2 @@
+import type { PsSortableItemProps } from './ps-sortable-item-props';
+export declare const PsSortableItem: ({ canMoveDown, canMoveUp, children, dragX, dragY, id, isActive, isDisabled, isReady, label, labels, onEnd, onMeasure, onMove, onStart, onUpdate, rect, }: PsSortableItemProps) => import("react").JSX.Element;

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

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { PsSortableGridConfig } from '../../constants/ps-sortable-grid-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY, id, isActive, isDisabled, isReady, label, labels, onEnd, onMeasure, onMove, onStart, onUpdate, rect, }) => {
+    const theme = usePsMobileTheme();
+    const left = useSharedValue(rect.x);
+    const top = useSharedValue(rect.y);
+    const scale = useSharedValue(1);
+    const wasActive = useRef(false);
+    useEffect(() => {
+        if (isActive) {
+            wasActive.current = true;
+            return;
+        }
+        if (wasActive.current) {
+            left.value = dragX.value;
+            top.value = dragY.value;
+            wasActive.current = false;
+        }
+        if (!isReady) {
+            left.value = rect.x;
+            top.value = rect.y;
+            return;
+        }
+        left.value = withTiming(rect.x, { duration: PsSortableGridConfig.moveMs });
+        top.value = withTiming(rect.y, { duration: PsSortableGridConfig.moveMs });
+    }, [dragX, dragY, isActive, isReady, left, rect.x, rect.y, top]);
+    useEffect(() => {
+        scale.value = withTiming(isActive ? PsSortableGridConfig.activeScale : 1, {
+            duration: PsSortableGridConfig.scaleMs,
+        });
+    }, [isActive, scale]);
+    const pan = usePanGesture({
+        activateAfterLongPress: PsSortableGridConfig.longPressMs,
+        enabled: !isDisabled,
+        onActivate: (event) => onStart(id, event.absoluteY),
+        onFinalize: onEnd,
+        onUpdate: (event) => onUpdate(event.translationX, event.translationY, event.absoluteY),
+        runOnJS: true,
+    });
+    const animatedStyle = useAnimatedStyle(() => ({
+        left: isActive ? dragX.value : left.value,
+        top: isActive ? dragY.value : top.value,
+        transform: [{ scale: scale.value }],
+    }));
+    return (_jsx(GestureDetector, { gesture: pan, children: _jsx(Animated.View, { accessibilityActions: isDisabled
+                ? undefined
+                : [
+                    ...(canMoveUp ? [{ label: labels.moveUp, name: 'moveUp' }] : []),
+                    ...(canMoveDown ? [{ label: labels.moveDown, name: 'moveDown' }] : []),
+                ], accessibilityLabel: label, accessible: !isDisabled, collapsable: false, onAccessibilityAction: (event) => onMove(id, event.nativeEvent.actionName === 'moveUp' ? -1 : 1), onLayout: (event) => onMeasure(id, event.nativeEvent.layout.height), style: [
+                {
+                    borderRadius: PsSortableGridConfig.radius,
+                    opacity: isReady ? 1 : 0,
+                    position: 'absolute',
+                    width: rect.width,
+                    zIndex: isActive ? PsSortableGridConfig.activeZIndex : 0,
+                },
+                isActive
+                    ? {
+                        outlineColor: theme.primary,
+                        outlineOffset: PsSortableGridConfig.outlineOffset,
+                        outlineStyle: 'solid',
+                        outlineWidth: PsSortableGridConfig.outlineWidth,
+                    }
+                    : undefined,
+                animatedStyle,
+            ], children: children }) }));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+export interface PsSparklineProps {
+    color?: string;
+    height?: number;
+    isLoading?: boolean;
+    showArea?: boolean;
+    values: number[];
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsSparklineProps } from './ps-sparkline-props';
+export declare const PsSparkline: ({ color, height, isLoading, showArea, values, }: PsSparklineProps) => import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import Svg 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 { usePsChartWidth } from '../../hooks/use-ps-chart-width';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsChartScaleService } from '../../services/ps-chart-scale-service';
+import { PsChartLine } from '../ps-chart-line/ps-chart-line';
+import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
+export const PsSparkline = ({ color, height = PsChartConfig.sparklineHeight, isLoading = false, showArea = true, values, }) => {
+    const theme = usePsMobileTheme();
+    const { onLayout, width } = usePsChartWidth();
+    const progress = usePsChartReveal(values.join(','));
+    if (isLoading)
+        return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Line });
+    if (values.length === 0)
+        return _jsx(View, { style: { height } });
+    const plot = PsChartScaleService.sparkPlot(width, height);
+    const domain = PsChartScaleService.spanDomain(values);
+    const points = values.map((value, index) => ({
+        x: PsChartScaleService.x(index, values.length, plot),
+        y: PsChartScaleService.y(value, domain, plot),
+    }));
+    return (_jsx(View, { onLayout: onLayout, style: { height }, testID: 'ps-sparkline', children: width === 0 ? null : (_jsx(Svg, { height: height, width: width, children: _jsx(PsChartLine, { areaBaseline: showArea ? plot.bottom : undefined, color: color === undefined ? theme.primary : color, points: points, progress: progress, strokeWidth: PsChartConfig.sparklineWidth }) })) }));
+};

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

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

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

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

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

@@ -0,0 +1,4 @@
+export interface PsSpinnerProps {
+    color?: string;
+    size?: 'large' | 'small';
+}

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActivityIndicator } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsSpinner = ({ color, size = 'small' }) => {
+    const theme = usePsMobileTheme();
+    return _jsx(ActivityIndicator, { color: color === undefined ? theme.primary : color, size: size });
+};

package/dist/components/ps-splash-overlay/index.d.ts

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

package/dist/components/ps-splash-overlay/index.js

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

package/dist/components/ps-splash-overlay/ps-splash-overlay-props.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PsSplashOverlayProps {
+    children: ReactNode;
+    isReady: boolean;
+    minimumMs?: number;
+    onHidden?: () => void;
+}

package/dist/components/ps-splash-overlay/ps-splash-overlay-props.js

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

package/dist/components/ps-splash-overlay/ps-splash-overlay.d.ts

@@ -0,0 +1,2 @@
+import type { PsSplashOverlayProps } from './ps-splash-overlay-props';
+export declare const PsSplashOverlay: ({ children, isReady, minimumMs, onHidden, }: PsSplashOverlayProps) => import("react").JSX.Element | null;

package/dist/components/ps-splash-overlay/ps-splash-overlay.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { StyleSheet, View } from 'react-native';
+import Animated, { FadeIn, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { PsMotionConfig } from '../../constants/ps-motion-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsPageBackdrop } from '../ps-page-backdrop/ps-page-backdrop';
+export const PsSplashOverlay = ({ children, isReady, minimumMs = PsMotionConfig.splashMinimumMs, onHidden, }) => {
+    const theme = usePsMobileTheme();
+    const [isHidden, setIsHidden] = useState(false);
+    const startedAt = useRef(Date.now());
+    const opacity = useSharedValue(1);
+    const fadeStyle = useAnimatedStyle(() => ({ opacity: opacity.get() }));
+    useEffect(() => {
+        if (!isReady)
+            return;
+        const wait = Math.max(0, minimumMs - (Date.now() - startedAt.current));
+        const fadeTimer = setTimeout(() => {
+            opacity.set(withTiming(0, { duration: PsMotionConfig.splashFadeMs }));
+        }, wait);
+        const hideTimer = setTimeout(() => {
+            setIsHidden(true);
+            onHidden?.();
+        }, wait + PsMotionConfig.splashFadeMs);
+        return () => {
+            clearTimeout(fadeTimer);
+            clearTimeout(hideTimer);
+        };
+    }, [isReady, minimumMs, onHidden, opacity]);
+    if (isHidden)
+        return null;
+    return (_jsxs(Animated.View, { pointerEvents: isReady ? 'none' : 'auto', style: [
+            StyleSheet.absoluteFill,
+            { alignItems: 'center', justifyContent: 'center', zIndex: PallasoftZIndex.TopLayer },
+            fadeStyle,
+        ], testID: 'ps-splash-overlay', children: [_jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: theme.background }] }), _jsx(Animated.View, { entering: FadeIn.duration(PsMotionConfig.splashBackdropFadeMs), style: StyleSheet.absoluteFill, children: _jsx(PsPageBackdrop, {}) }), children] }));
+};

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

@@ -0,0 +1,3 @@
+export * from './ps-stagger-container';
+export * from './ps-stagger-item';
+export * from './ps-stagger-props';

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

@@ -0,0 +1,3 @@
+export * from './ps-stagger-container';
+export * from './ps-stagger-item';
+export * from './ps-stagger-props';

package/dist/components/ps-stagger/ps-stagger-container.d.ts

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

package/dist/components/ps-stagger/ps-stagger-container.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import { View } from 'react-native';
+import { PsStaggerIndexContext } from '../../contexts/ps-stagger-index-context';
+export const PsStaggerContainer = ({ children, style }) => (_jsx(View, { style: style, children: Children.toArray(children).map((child, index) => (_jsx(PsStaggerIndexContext.Provider, { value: index, children: child }, index))) }));

package/dist/components/ps-stagger/ps-stagger-item.d.ts

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

package/dist/components/ps-stagger/ps-stagger-item.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { PsMotionConfig } from '../../constants/ps-motion-config';
+import { PsStaggerIndexContext } from '../../contexts/ps-stagger-index-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsStaggerItem = ({ children, style }) => {
+    const index = useContext(PsStaggerIndexContext);
+    const { isReduceMotion } = usePsMobileTheme();
+    return (_jsx(Animated.View, { entering: isReduceMotion
+            ? undefined
+            : FadeInDown.delay(index * PsMotionConfig.staggerStepMs).duration(PsMotionConfig.staggerDurationMs), style: style, children: children }));
+};

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface PsStaggerContainerProps {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export interface PsStaggerItemProps {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+export type PsStatementAlign = 'left' | 'right';
+export type PsStatementEmphasis = 'heading' | 'muted' | 'normal' | 'subtotal' | 'total';
+export type PsStatementTone = 'danger' | 'neutral' | 'success';
+export interface PsStatementColumn {
+    align?: PsStatementAlign;
+    key: string;
+    label: string;
+    width?: number;
+}
+export interface PsStatementRow {
+    emphasis?: PsStatementEmphasis;
+    isPressable?: boolean;
+    key: string;
+    label: string;
+    level?: number;
+    subtitle?: string;
+    tone?: PsStatementTone;
+    values: string[];
+}
+export interface PsStatementTableProps {
+    columns: PsStatementColumn[];
+    isLoading?: boolean;
+    labelHeader?: string;
+    onRowPress?: (key: string, columnIndex: number) => void;
+    rows: PsStatementRow[];
+    skeletonColumns?: number;
+}

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

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

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

@@ -0,0 +1,7 @@
+import type { PsStatementColumn, PsStatementRow } from './ps-statement-table-props';
+export interface PsStatementTableRowProps {
+    columns: PsStatementColumn[];
+    onPress?: (key: string, columnIndex: number) => void;
+    row: PsStatementRow;
+}
+export declare const PsStatementTableRow: ({ columns, onPress, row }: PsStatementTableRowProps) => import("react").JSX.Element;