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

package/dist/components/ps-document-zoom-image/ps-document-zoom-image.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Image, View } from 'react-native';
+import { GestureDetector, usePanGesture, usePinchGesture, useSimultaneousGestures, useTapGesture, } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { PsDocumentZoomService } from '../../services/ps-document-zoom-service';
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+export const PsDocumentZoomImage = ({ name, onDismiss, onError, onZoomChange, source, }) => {
+    const [size, setSize] = useState({ height: 0, width: 0 });
+    const [isZoomed, setIsZoomed] = useState(false);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const scale = useSharedValue(1);
+    const baseScale = useSharedValue(1);
+    const x = useSharedValue(0);
+    const y = useSharedValue(0);
+    const baseX = useSharedValue(0);
+    const baseY = useSharedValue(0);
+    const drag = useSharedValue(0);
+    const commit = () => {
+        const zoomed = PsDocumentZoomService.isZoomed(scale.value);
+        const nextX = zoomed ? PsDocumentZoomService.clampAxis(x.value, size.width, scale.value) : 0;
+        const nextY = zoomed ? PsDocumentZoomService.clampAxis(y.value, size.height, scale.value) : 0;
+        if (!zoomed)
+            scale.value = withTiming(PsDocumentConfig.minZoom, { duration: PsDocumentConfig.settleMs });
+        x.value = withTiming(nextX, { duration: PsDocumentConfig.settleMs });
+        y.value = withTiming(nextY, { duration: PsDocumentConfig.settleMs });
+        baseX.value = nextX;
+        baseY.value = nextY;
+        baseScale.value = zoomed ? scale.value : PsDocumentConfig.minZoom;
+        setIsZoomed(zoomed);
+        onZoomChange(zoomed);
+    };
+    const pinch = usePinchGesture({
+        onDeactivate: commit,
+        onUpdate: (event) => {
+            scale.value = PsDocumentZoomService.clampScale(baseScale.value * event.scale);
+        },
+        runOnJS: true,
+    });
+    const move = usePanGesture({
+        enabled: isZoomed,
+        maxPointers: 1,
+        onDeactivate: commit,
+        onUpdate: (event) => {
+            x.value = PsDocumentZoomService.clampAxis(baseX.value + event.translationX, size.width, scale.value);
+            y.value = PsDocumentZoomService.clampAxis(baseY.value + event.translationY, size.height, scale.value);
+        },
+        runOnJS: true,
+    });
+    const dismiss = usePanGesture({
+        activeOffsetY: [-PsDocumentConfig.dismissActivation, PsDocumentConfig.dismissActivation],
+        enabled: !isZoomed,
+        failOffsetX: [-PsDocumentConfig.dismissActivation, PsDocumentConfig.dismissActivation],
+        maxPointers: 1,
+        onDeactivate: (event) => {
+            if (PsDocumentZoomService.shouldDismiss(event.translationY, event.velocityY)) {
+                onDismiss();
+                return;
+            }
+            drag.value = withTiming(0, { duration: PsDocumentConfig.settleMs });
+        },
+        onUpdate: (event) => {
+            drag.value = PsDocumentZoomService.dragOffset(event.translationY);
+        },
+        runOnJS: true,
+    });
+    const doubleTap = useTapGesture({
+        numberOfTaps: 2,
+        onActivate: (event) => {
+            const next = PsDocumentZoomService.nextTapScale(scale.value);
+            const nextX = PsDocumentZoomService.focalOffset(event.x, size.width, next);
+            const nextY = PsDocumentZoomService.focalOffset(event.y, size.height, next);
+            const zoomed = PsDocumentZoomService.isZoomed(next);
+            scale.value = withTiming(next, { duration: PsDocumentConfig.settleMs });
+            x.value = withTiming(nextX, { duration: PsDocumentConfig.settleMs });
+            y.value = withTiming(nextY, { duration: PsDocumentConfig.settleMs });
+            baseScale.value = next;
+            baseX.value = nextX;
+            baseY.value = nextY;
+            setIsZoomed(zoomed);
+            onZoomChange(zoomed);
+        },
+        runOnJS: true,
+    });
+    const gesture = useSimultaneousGestures(pinch, move, dismiss, doubleTap);
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [
+            { translateY: drag.value },
+            { translateX: x.value },
+            { translateY: y.value },
+            { scale: scale.value },
+        ],
+    }));
+    return (_jsx(GestureDetector, { gesture: gesture, children: _jsxs(View, { onLayout: (event) => setSize(event.nativeEvent.layout), style: { flex: 1, overflow: 'hidden' }, testID: 'ps-document-zoom-image', children: [_jsx(Animated.View, { style: [{ flex: 1 }, animatedStyle], children: _jsx(Image, { accessibilityLabel: name, onError: onError, onLoad: () => setIsLoaded(true), resizeMode: 'contain', source: { headers: source.headers, uri: source.uri }, style: { flex: 1 } }) }), isLoaded ? null : (_jsx(View, { pointerEvents: 'none', style: {
+                        alignItems: 'center',
+                        bottom: 0,
+                        justifyContent: 'center',
+                        left: 0,
+                        position: 'absolute',
+                        right: 0,
+                        top: 0,
+                    }, children: _jsx(PsSpinner, {}) }))] }) }));
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { PsDonutChartDatum } from '../../interfaces/ps-donut-chart-datum';
+export interface PsDonutChartProps {
+    centerLabel?: string;
+    centerValue?: string;
+    data: PsDonutChartDatum[];
+    emptyLabel: string;
+    formatShare: (share: number) => string;
+    height?: number;
+    isLoading?: boolean;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsDonutChartProps } from './ps-donut-chart-props';
+export declare const PsDonutChart: ({ centerLabel, centerValue, data, emptyLabel, formatShare, height, isLoading, }: PsDonutChartProps) => import("react").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+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 { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsChartDonutService } from '../../services/ps-chart-donut-service';
+import { PsChartEmptyState } from '../ps-chart-empty-state/ps-chart-empty-state';
+import { PsChartLegend } from '../ps-chart-legend/ps-chart-legend';
+import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
+import { PsDonutSlice } from '../ps-donut-slice/ps-donut-slice';
+import { PsText } from '../ps-text/ps-text';
+export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, formatShare, height = PsChartConfig.donutHeight, isLoading = false, }) => {
+    const theme = usePsMobileTheme();
+    const [selected, setSelected] = useState(null);
+    const progress = usePsChartReveal(data.map((datum) => `${datum.id}:${datum.share}`).join(','));
+    if (isLoading)
+        return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Donut });
+    const slices = PsChartDonutService.slices(data, theme.chart, height);
+    if (slices.length === 0)
+        return _jsx(PsChartEmptyState, { height: height, label: emptyLabel });
+    const circumference = PsChartDonutService.circumference(height);
+    const chosen = selected === null ? null : data[selected];
+    const readValue = chosen === null
+        ? centerValue
+        : chosen.amountLabel === undefined
+            ? formatShare(chosen.share)
+            : chosen.amountLabel;
+    const readLabel = chosen === null ? centerLabel : chosen.label;
+    return (_jsxs(View, { style: { alignItems: 'center', flexDirection: 'row', gap: 16 }, children: [_jsxs(View, { style: { height, width: height }, children: [_jsx(Svg, { height: height, width: height, children: slices.map((slice, index) => (_jsx(PsDonutSlice, { circumference: circumference, isDimmed: selected !== null && selected !== index, onPress: () => setSelected(selected === index ? null : index), progress: progress, size: height, slice: slice }, slice.id))) }), _jsxs(View, { pointerEvents: 'none', style: {
+                            alignItems: 'center',
+                            bottom: 0,
+                            justifyContent: 'center',
+                            left: 0,
+                            padding: PsChartConfig.donutThickness + 8,
+                            position: 'absolute',
+                            right: 0,
+                            top: 0,
+                        }, children: [readValue === undefined ? null : (_jsx(PsText, { numberOfLines: 1, style: { fontSize: 18, lineHeight: 24 }, variant: 'numeric', weight: 'bold', children: readValue })), readLabel === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 2, tone: 'muted', variant: 'caption', children: readLabel }))] })] }), _jsx(View, { style: { flex: 1 }, children: _jsx(PsChartLegend, { activeIndex: selected, items: data.map((datum, index) => ({
+                        color: slices[index].color,
+                        label: datum.label,
+                        value: datum.amountLabel === undefined ? formatShare(datum.share) : datum.amountLabel,
+                    })), onPressItem: (index) => setSelected(selected === index ? null : index) }) })] }));
+};

package/dist/components/ps-donut-slice/index.d.ts

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

package/dist/components/ps-donut-slice/index.js

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

package/dist/components/ps-donut-slice/ps-donut-slice-props.d.ts

@@ -0,0 +1,10 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { PsDonutSliceData } from '../../interfaces/ps-donut-slice-data';
+export interface PsDonutSliceProps {
+    circumference: number;
+    isDimmed: boolean;
+    onPress: () => void;
+    progress: SharedValue<number>;
+    size: number;
+    slice: PsDonutSliceData;
+}

package/dist/components/ps-donut-slice/ps-donut-slice-props.js

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

package/dist/components/ps-donut-slice/ps-donut-slice.d.ts

@@ -0,0 +1,2 @@
+import type { PsDonutSliceProps } from './ps-donut-slice-props';
+export declare const PsDonutSlice: ({ circumference, isDimmed, onPress, progress, size, slice, }: PsDonutSliceProps) => import("react").JSX.Element;

package/dist/components/ps-donut-slice/ps-donut-slice.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { Circle } from 'react-native-svg';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+import { PsChartDonutService } from '../../services/ps-chart-donut-service';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+export const PsDonutSlice = ({ circumference, isDimmed, onPress, progress, size, slice, }) => {
+    const centre = size / 2;
+    const animatedProps = useAnimatedProps(() => ({
+        strokeDasharray: [
+            Math.max(0, Math.min(slice.dashLength, progress.value * circumference - slice.start)),
+            circumference,
+        ],
+    }));
+    return (_jsx(AnimatedCircle, { animatedProps: animatedProps, cx: centre, cy: centre, fill: 'none', onPress: onPress, opacity: isDimmed ? 0.4 : 1, origin: `${centre}, ${centre}`, r: PsChartDonutService.radius(size), rotation: -90, stroke: slice.color, strokeDasharray: [slice.dashLength, circumference], strokeDashoffset: slice.dashOffset, strokeWidth: PsChartConfig.donutThickness }));
+};

package/dist/components/ps-empty-state/index.d.ts

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

package/dist/components/ps-empty-state/index.js

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

package/dist/components/ps-empty-state/ps-empty-state-props.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { PsIconKey } from '@pallasoft/ps-icons';
+export interface PsEmptyStateAction {
+    label: string;
+    onPress: () => void;
+    variant?: 'primary' | 'secondary';
+}
+export interface PsEmptyStateProps {
+    actions?: PsEmptyStateAction[];
+    description?: string;
+    iconKey?: PsIconKey;
+    illustration?: ReactNode;
+    title: string;
+}

package/dist/components/ps-empty-state/ps-empty-state-props.js

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

package/dist/components/ps-empty-state/ps-empty-state.d.ts

@@ -0,0 +1,2 @@
+import type { PsEmptyStateProps } from './ps-empty-state-props';
+export declare const PsEmptyState: ({ actions, description, iconKey, illustration, title, }: PsEmptyStateProps) => import("react").JSX.Element;

package/dist/components/ps-empty-state/ps-empty-state.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsButton } from '../ps-button/ps-button';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+export const PsEmptyState = ({ actions = [], description, iconKey, illustration, title, }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            gap: PsMobileControlConfig.emptyStateSpacing,
+            padding: PsMobileControlConfig.cardPadding * 1.5,
+        }, testID: 'ps-empty-state', children: [illustration === undefined ? (iconKey === undefined ? null : (_jsx(PsIcon, { color: theme.muted, iconKey: iconKey, size: PsMobileControlConfig.emptyStateIconSize }))) : (illustration), _jsx(PsText, { align: 'center', variant: 'heading', children: title }), description === undefined ? null : (_jsx(PsText, { align: 'center', tone: 'muted', children: description })), actions.map((action) => (_jsx(PsButton, { onPress: action.onPress, variant: action.variant === 'primary' ? 'primary' : 'secondary', children: action.label }, action.label)))] }));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PsFieldFrameProps {
+    children: ReactNode;
+    errorText?: string;
+    helperText?: string;
+    label: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsFieldFrameProps } from './ps-field-frame-props';
+export declare const PsFieldFrame: ({ children, errorText, helperText, label }: PsFieldFrameProps) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsText } from '../ps-text/ps-text';
+export const PsFieldFrame = ({ children, errorText, helperText, label }) => {
+    const note = errorText === undefined ? helperText : errorText;
+    return (_jsxs(View, { style: { gap: PsLayoutConfig.headerGap + 2 }, children: [_jsx(PsText, { variant: 'label', children: label }), children, note === undefined ? null : (_jsx(PsText, { tone: errorText === undefined ? 'muted' : 'danger', variant: 'caption', children: note }))] }));
+};

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

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

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

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

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

@@ -0,0 +1,3 @@
+export interface PsFieldSkeletonProps {
+    count?: number;
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsFieldSkeletonConfig } from '../../constants/ps-field-skeleton-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsFieldSkeleton = ({ count = PsFieldSkeletonConfig.defaultCount, }) => (_jsx(View, { style: { gap: PsFieldSkeletonConfig.fieldGap }, testID: 'ps-field-skeleton', children: Array.from({ length: count }, (item, index) => (_jsxs(View, { style: { gap: PsFieldSkeletonConfig.labelGap }, children: [_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsFieldSkeletonConfig.labelWidth }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Control })] }, index))) }));

package/dist/components/ps-filter-bar/index.d.ts

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

package/dist/components/ps-filter-bar/index.js

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

package/dist/components/ps-filter-bar/ps-filter-bar-props.d.ts

@@ -0,0 +1,13 @@
+import type { PsFilterBarLabels } from '../../interfaces/ps-filter-bar-labels';
+import type { PsFilterGroup } from '../../interfaces/ps-filter-group';
+export interface PsFilterBarProps {
+    groups: PsFilterGroup[];
+    isLoading?: boolean;
+    labels: PsFilterBarLabels;
+    onApply: (values: Record<string, string>) => void;
+}
+export interface PsFilterGroupChipProps {
+    group: PsFilterGroup;
+    labels: PsFilterBarLabels;
+    onChange: (value: string) => void;
+}

package/dist/components/ps-filter-bar/ps-filter-bar-props.js

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

package/dist/components/ps-filter-bar/ps-filter-bar.d.ts

@@ -0,0 +1,2 @@
+import type { PsFilterBarProps } from './ps-filter-bar-props';
+export declare const PsFilterBar: ({ groups, isLoading, labels, onApply }: PsFilterBarProps) => import("react").JSX.Element;

package/dist/components/ps-filter-bar/ps-filter-bar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { ScrollView } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { PsFilterService } from '../../services/ps-filter-service';
+import { PsChip } from '../ps-chip/ps-chip';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+import { PsFilterGroupChip } from './ps-filter-group-chip';
+export const PsFilterBar = ({ groups, isLoading = false, labels, onApply }) => {
+    if (isLoading)
+        return _jsx(PsSkeleton, { shape: PsSkeletonShape.Pill });
+    return (_jsxs(ScrollView, { contentContainerStyle: { alignItems: 'center', gap: PsLayoutConfig.sheetFooterGap }, horizontal: true, showsHorizontalScrollIndicator: false, children: [groups.map((group) => (_jsx(PsFilterGroupChip, { group: group, labels: labels, onChange: (value) => onApply({ ...PsFilterService.values(groups), [group.id]: value }) }, group.id))), PsFilterService.chips(groups).length === 0 ? null : (_jsx(PsChip, { onPress: () => onApply(PsFilterService.cleared(groups)), trailingIcon: PsIconKey.Close, children: labels.clear }))] }));
+};

package/dist/components/ps-filter-bar/ps-filter-group-chip.d.ts

@@ -0,0 +1,2 @@
+import type { PsFilterGroupChipProps } from './ps-filter-bar-props';
+export declare const PsFilterGroupChip: ({ group, labels, onChange }: PsFilterGroupChipProps) => import("react").JSX.Element;

package/dist/components/ps-filter-bar/ps-filter-group-chip.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { PsFilterService } from '../../services/ps-filter-service';
+import { PsNativeMenuService } from '../../services/ps-native-menu-service';
+import { PsChip } from '../ps-chip/ps-chip';
+import { PsNativeMenu } from '../ps-native-menu/ps-native-menu';
+export const PsFilterGroupChip = ({ group, labels, onChange }) => (_jsx(PsNativeMenu, { items: PsNativeMenuService.items(PsFilterService.menuOptions(group, labels), group.value), label: group.label, onSelect: onChange, children: ({ open }) => (_jsx(PsChip, { isSelected: group.value !== '', onPress: open, trailingIcon: PsIconKey.Chevron, children: PsFilterService.chipLabel(group) })) }));

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

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

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

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

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface PsFormSheetProps {
+    cancelLabel: string;
+    closeLabel?: string;
+    children: ReactNode;
+    eyebrow?: string;
+    footerStart?: ReactNode;
+    isLoading?: boolean;
+    isOpen: boolean;
+    isSubmitting?: boolean;
+    loadingFields?: number;
+    isSubmitDisabled?: boolean;
+    onClose: () => void;
+    onSubmit: () => void;
+    submitLabel: string;
+    submitVariant?: 'danger' | 'primary';
+    title: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsFormSheetProps } from './ps-form-sheet-props';
+export declare const PsFormSheet: ({ cancelLabel, children, eyebrow, footerStart, isLoading, isOpen, isSubmitting, loadingFields, isSubmitDisabled, onClose, onSubmit, submitLabel, submitVariant, title, }: PsFormSheetProps) => import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsFormSheetConfig } from '../../constants/ps-form-sheet-config';
+import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsSheet } from '../ps-sheet/ps-sheet';
+export const PsFormSheet = ({ cancelLabel, children, eyebrow, footerStart, isLoading = false, isOpen, isSubmitting = false, loadingFields = PsFormSheetConfig.loadingFields, isSubmitDisabled = false, onClose, onSubmit, submitLabel, submitVariant = 'primary', title, }) => (_jsx(PsSheet, { eyebrow: eyebrow, footer: footerStart, isDismissBlocked: isSubmitting, isOpen: isOpen, leadingLabel: cancelLabel, onClose: onClose, title: title, trailingAction: {
+        isDisabled: isSubmitDisabled || isLoading,
+        isSubmitting,
+        label: submitLabel,
+        onPress: onSubmit,
+        tone: submitVariant,
+    }, children: isLoading ? _jsx(PsFieldSkeleton, { count: loadingFields }) : children }));

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

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

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

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

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface PsHostMatchContents {
+    horizontal?: boolean;
+    vertical?: boolean;
+}
+export interface PsHostProps {
+    children: ReactNode;
+    matchContents?: boolean | PsHostMatchContents;
+    style?: StyleProp<ViewStyle>;
+}

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Host } from '@expo/ui/jetpack-compose';
+import { PsNativeTreeContext } from '../../contexts/ps-native-tree-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsHost = ({ children, matchContents = false, style }) => {
+    const theme = usePsMobileTheme();
+    return (_jsx(Host, { colorScheme: theme.isDark ? 'dark' : 'light', matchContents: matchContents, seedColor: theme.primary, style: style, children: _jsx(PsNativeTreeContext.Provider, { value: true, children: children }) }));
+};

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

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

package/dist/components/ps-host/ps-host.ios.d.ts

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

package/dist/components/ps-host/ps-host.ios.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Host } from '@expo/ui/swift-ui';
+import { PsNativeTreeContext } from '../../contexts/ps-native-tree-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsHost = ({ children, matchContents = false, style }) => {
+    const theme = usePsMobileTheme();
+    return (_jsx(Host, { colorScheme: theme.isDark ? 'dark' : 'light', matchContents: matchContents, seedColor: theme.primary, style: style, children: _jsx(PsNativeTreeContext.Provider, { value: true, children: children }) }));
+};

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+export const PsHost = ({ children, style }) => _jsx(View, { style: style, children: children });

package/dist/components/ps-host-scope/index.d.ts

@@ -0,0 +1 @@
+export * from './ps-host-scope';

package/dist/components/ps-host-scope/index.js

@@ -0,0 +1 @@
+export * from './ps-host-scope';

package/dist/components/ps-host-scope/ps-host-scope.d.ts

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

package/dist/components/ps-host-scope/ps-host-scope.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useContext } from 'react';
+import { PsNativeTreeContext } from '../../contexts/ps-native-tree-context';
+import { PsHost } from '../ps-host/ps-host';
+export const PsHostScope = ({ children, matchContents = true, style }) => {
+    const isInsideNativeTree = useContext(PsNativeTreeContext);
+    return isInsideNativeTree ? (_jsx(Fragment, { children: children })) : (_jsx(PsHost, { matchContents: matchContents, style: style, children: children }));
+};

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

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

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

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

package/dist/components/ps-icon/ps-icon-element.d.ts

@@ -0,0 +1,5 @@
+import type { PsIconGlyphElement } from '@pallasoft/ps-icons';
+export interface PsIconElementProps {
+    element: PsIconGlyphElement;
+}
+export declare const PsIconElement: ({ element }: PsIconElementProps) => import("react").JSX.Element;

package/dist/components/ps-icon/ps-icon-element.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Circle, Ellipse, Line, Path, Polyline, Rect } from 'react-native-svg';
+export const PsIconElement = ({ element }) => {
+    switch (element.kind) {
+        case 'circle':
+            return _jsx(Circle, { ...element.attributes });
+        case 'ellipse':
+            return _jsx(Ellipse, { ...element.attributes });
+        case 'line':
+            return _jsx(Line, { ...element.attributes });
+        case 'polyline':
+            return _jsx(Polyline, { ...element.attributes });
+        case 'rect':
+            return _jsx(Rect, { ...element.attributes });
+        case 'path':
+            return _jsx(Path, { ...element.attributes });
+    }
+};

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

@@ -0,0 +1,7 @@
+import type { PsIconKey } from '@pallasoft/ps-icons';
+export interface PsIconProps {
+    color?: string;
+    iconKey: PsIconKey;
+    label?: string;
+    size?: number;
+}

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconConfig, PsIconGlyphs } from '@pallasoft/ps-icons';
+import Svg, { G } from 'react-native-svg';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsIconFitService } from '../../services/ps-icon-fit-service';
+import { PsIconElement } from './ps-icon-element';
+export const PsIcon = ({ color, iconKey, label, size = PsMobileControlConfig.iconSizeStandalone, }) => {
+    const theme = usePsMobileTheme();
+    const tint = color === undefined ? theme.ink : color;
+    const glyph = PsIconGlyphs[iconKey];
+    const filled = glyph.fill !== undefined;
+    const transform = PsIconFitService.transform(iconKey);
+    const elements = glyph.elements.map((element, index) => (_jsx(PsIconElement, { element: element }, index)));
+    return (_jsx(Svg, { accessibilityLabel: label, fill: filled ? tint : 'none', height: size, stroke: filled ? 'none' : tint, strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: PsIconFitService.strokeWidth(iconKey), testID: `ps-icon-${iconKey}`, viewBox: `0 0 ${PsIconConfig.center * 2} ${PsIconConfig.center * 2}`, width: size, children: transform === undefined ? elements : _jsx(G, { transform: transform, children: elements }) }));
+};

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

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

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

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