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

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Pressable, TextInput, View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsFocus } from '../../hooks/use-ps-focus';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsControlStyleService } from '../../services/ps-control-style-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsSearchField = ({ clearLabel, isLoading = false, onChange, placeholder, value, }) => {
+    const theme = usePsMobileTheme();
+    const focus = usePsFocus();
+    if (isLoading)
+        return _jsx(PsSkeleton, { shape: PsSkeletonShape.Control });
+    return (_jsxs(View, { style: [
+            PsControlStyleService.container(theme, {
+                hasError: false,
+                isDisabled: false,
+                isFocused: focus.isFocused,
+            }),
+            { gap: PsMobileControlConfig.buttonIconSpacing },
+        ], children: [_jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Search, size: PsMobileControlConfig.iconSizeInline }), _jsx(TextInput, { accessibilityLabel: placeholder, autoCorrect: false, onBlur: focus.onBlur, onChangeText: onChange, onFocus: focus.onFocus, placeholder: placeholder, placeholderTextColor: theme.muted, returnKeyType: 'search', selectionColor: theme.primary, style: PsControlStyleService.input(theme), value: value }), value === '' ? null : (_jsx(Pressable, { accessibilityLabel: clearLabel, accessibilityRole: 'button', hitSlop: PsLayoutConfig.hitSlop, onPress: () => onChange(''), children: _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Close, size: PsMobileControlConfig.iconSizeInline }) }))] }));
+};

package/dist/components/ps-segmented-control/index.d.ts

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

package/dist/components/ps-segmented-control/index.js

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

package/dist/components/ps-segmented-control/ps-segmented-control-props.d.ts

@@ -0,0 +1,9 @@
+export interface PsSegmentedControlProps<T> {
+    getItemKey: (item: T) => string;
+    getItemLabel: (item: T) => string;
+    isLoading?: boolean;
+    items: T[];
+    onSelectionChange: (key: string) => void;
+    selectedKey: string;
+    size?: 'compact' | 'default';
+}

package/dist/components/ps-segmented-control/ps-segmented-control-props.js

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

package/dist/components/ps-segmented-control/ps-segmented-control.android.d.ts

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

package/dist/components/ps-segmented-control/ps-segmented-control.android.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SegmentedButton, SingleChoiceSegmentedButtonRow, Text } from '@expo/ui/jetpack-compose';
+import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsHostScope } from '../ps-host-scope/ps-host-scope';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsSegmentedControl = ({ getItemKey, getItemLabel, isLoading = false, items, onSelectionChange, selectedKey, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    if (isLoading)
+        return _jsx(PsSkeleton, { shape: PsSkeletonShape.Control });
+    return (_jsx(PsHostScope, { matchContents: { vertical: true }, children: _jsx(SingleChoiceSegmentedButtonRow, { modifiers: [fillMaxWidth()], children: items.map((item) => {
+                const key = getItemKey(item);
+                return (_jsx(SegmentedButton, { colors: {
+                        activeBorderColor: theme.primary,
+                        activeContainerColor: theme.primarySoft,
+                        activeContentColor: theme.ink,
+                        inactiveBorderColor: theme.line,
+                        inactiveContentColor: theme.muted,
+                    }, onClick: () => {
+                        haptic('selection');
+                        onSelectionChange(key);
+                    }, selected: key === selectedKey, children: _jsx(SegmentedButton.Label, { children: _jsx(Text, { children: getItemLabel(item) }) }) }, key));
+            }) }) }));
+};

package/dist/components/ps-segmented-control/ps-segmented-control.d.ts

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

package/dist/components/ps-segmented-control/ps-segmented-control.ios.d.ts

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

package/dist/components/ps-segmented-control/ps-segmented-control.ios.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Picker, Text } from '@expo/ui/swift-ui';
+import { pickerStyle, tag, tint } from '@expo/ui/swift-ui/modifiers';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsHostScope } from '../ps-host-scope/ps-host-scope';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsSegmentedControl = ({ getItemKey, getItemLabel, isLoading = false, items, onSelectionChange, selectedKey, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    if (isLoading)
+        return _jsx(PsSkeleton, { shape: PsSkeletonShape.Control });
+    return (_jsx(PsHostScope, { matchContents: { vertical: true }, children: _jsx(Picker, { modifiers: [pickerStyle('segmented'), tint(theme.primary)], onSelectionChange: (key) => {
+                haptic('selection');
+                onSelectionChange(key);
+            }, selection: selectedKey, children: items.map((item) => (_jsx(Text, { modifiers: [tag(getItemKey(item))], children: getItemLabel(item) }, getItemKey(item)))) }) }));
+};

package/dist/components/ps-segmented-control/ps-segmented-control.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsSegmentedControlConfig } from '../../constants/ps-segmented-control-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsSegmentedControlService } from '../../services/ps-segmented-control-service';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+import { PsText } from '../ps-text/ps-text';
+export const PsSegmentedControl = ({ getItemKey, getItemLabel, isLoading = false, items, onSelectionChange, selectedKey, size = 'default', }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    const [trackWidth, setTrackWidth] = useState(0);
+    const index = items.findIndex((item) => getItemKey(item) === selectedKey);
+    const offset = useSharedValue(0);
+    const width = PsSegmentedControlService.thumbWidth(trackWidth, items.length);
+    const target = PsSegmentedControlService.thumbOffset(trackWidth, items.length, index);
+    useEffect(() => {
+        offset.value = withTiming(target, { duration: PsSegmentedControlConfig.animationMs });
+    }, [target]);
+    const thumbStyle = useAnimatedStyle(() => ({ transform: [{ translateX: offset.value }] }));
+    if (isLoading)
+        return _jsx(PsSkeleton, { shape: PsSkeletonShape.Control });
+    return (_jsxs(View, { accessibilityRole: 'tablist', onLayout: (event) => setTrackWidth(event.nativeEvent.layout.width), style: {
+            backgroundColor: PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.neutralAlpha),
+            borderRadius: 999,
+            flexDirection: 'row',
+            height: PsMobileControlConfig.controlHeights[size],
+            padding: PsSegmentedControlConfig.padding,
+        }, children: [_jsx(Animated.View, { style: [
+                    {
+                        backgroundColor: theme.surface,
+                        borderColor: theme.line,
+                        borderRadius: 999,
+                        borderWidth: 1,
+                        bottom: PsSegmentedControlConfig.padding,
+                        left: PsSegmentedControlConfig.padding,
+                        position: 'absolute',
+                        top: PsSegmentedControlConfig.padding,
+                        width,
+                    },
+                    thumbStyle,
+                ], testID: 'ps-segmented-thumb' }), items.map((item) => {
+                const key = getItemKey(item);
+                const isSelected = key === selectedKey;
+                return (_jsx(Pressable, { accessibilityRole: 'tab', accessibilityState: { selected: isSelected }, onPress: () => {
+                        haptic('selection');
+                        onSelectionChange(key);
+                    }, style: { alignItems: 'center', flex: 1, justifyContent: 'center' }, children: _jsx(PsText, { numberOfLines: 1, style: { fontSize: PsMobileControlConfig.controlFontSize }, tone: isSelected ? 'ink' : 'muted', weight: 'semibold', children: getItemLabel(item) }) }, key));
+            })] }));
+};

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

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

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

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

package/dist/components/ps-select/ps-select-control-props.d.ts

@@ -0,0 +1,9 @@
+import type { PsSelectSize } from './ps-select-props';
+export interface PsSelectControlProps {
+    errorText: string | undefined;
+    isDisabled: boolean;
+    isFocused: boolean;
+    placeholder: string | undefined;
+    selectedLabel: string;
+    size: PsSelectSize;
+}

package/dist/components/ps-select/ps-select-control-props.js

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

package/dist/components/ps-select/ps-select-control.d.ts

@@ -0,0 +1,2 @@
+import type { PsSelectControlProps } from './ps-select-control-props';
+export declare const PsSelectControl: ({ errorText, isDisabled, isFocused, placeholder, selectedLabel, size, }: PsSelectControlProps) => import("react").JSX.Element;

package/dist/components/ps-select/ps-select-control.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsControlStyleService } from '../../services/ps-control-style-service';
+import { PsSelectStyleService } from '../../services/ps-select-style-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+export const PsSelectControl = ({ errorText, isDisabled, isFocused, placeholder, selectedLabel, size, }) => {
+    const theme = usePsMobileTheme();
+    const state = { hasError: errorText !== undefined, isDisabled, isFocused };
+    return (_jsxs(View, { style: [
+            size === 'compact'
+                ? PsSelectStyleService.pill(theme, state)
+                : PsControlStyleService.container(theme, state),
+            { gap: PsMobileControlConfig.rowSpacing / 2 },
+        ], children: [_jsx(PsText, { numberOfLines: 1, style: size === 'compact'
+                    ? { fontSize: PsMobileControlConfig.controlFontSize }
+                    : { flex: 1, fontSize: PsMobileControlConfig.controlFontSize }, tone: selectedLabel === '' ? 'muted' : 'ink', weight: size === 'compact' ? 'semibold' : 'regular', children: selectedLabel === '' ? placeholder : selectedLabel }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Chevron, size: PsMobileControlConfig.iconSizeInline })] }));
+};

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

@@ -0,0 +1,18 @@
+export interface PsSelectOption {
+    label: string;
+    value: string;
+}
+export type PsSelectSize = 'compact' | 'default';
+export interface PsSelectProps {
+    closeLabel?: string;
+    errorText?: string;
+    helperText?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+    onChange: (value: string) => void;
+    options: PsSelectOption[];
+    placeholder?: string;
+    size?: PsSelectSize;
+    value: string;
+}

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

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

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface PsSelectTriggerProps {
+    children: ReactNode;
+    isDisabled: boolean;
+    label: string;
+    onPress: () => void;
+}
+export declare const PsSelectTrigger: ({ children, isDisabled, label, onPress }: PsSelectTriggerProps) => import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+export const PsSelectTrigger = ({ children, isDisabled, label, onPress }) => (_jsx(Pressable, { accessibilityLabel: label, accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, onPress: onPress, children: children }));

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { usePsFocus } from '../../hooks/use-ps-focus';
+import { PsNativeMenuService } from '../../services/ps-native-menu-service';
+import { PsSelectService } from '../../services/ps-select-service';
+import { PsFieldFrame } from '../ps-field-frame/ps-field-frame';
+import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsNativeMenu } from '../ps-native-menu/ps-native-menu';
+import { PsSelectControl } from './ps-select-control';
+import { PsSelectTrigger } from './ps-select-trigger';
+export const PsSelect = ({ errorText, helperText, isDisabled = false, isLoading = false, label, onChange, options, placeholder, size = 'default', value, }) => {
+    const focus = usePsFocus();
+    const selected = PsSelectService.selectedLabel(options, value);
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, {});
+    const menu = (_jsx(PsNativeMenu, { isDisabled: isDisabled, isFullWidth: size === 'default', items: PsNativeMenuService.items(options, value), label: label, onSelect: onChange, children: ({ isOpen, open }) => (_jsx(PsSelectTrigger, { isDisabled: isDisabled, label: label, onPress: open, children: _jsx(PsSelectControl, { errorText: errorText, isDisabled: isDisabled, isFocused: isOpen || focus.isFocused, placeholder: placeholder, selectedLabel: selected, size: size }) })) }));
+    if (size === 'compact')
+        return _jsx(View, { style: { alignSelf: 'flex-start' }, children: menu });
+    return (_jsx(PsFieldFrame, { errorText: errorText, helperText: helperText, label: label, children: menu }));
+};

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

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

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

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

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { PsSheetAction } from '../../interfaces/ps-sheet-action';
+export interface PsSheetProps {
+    children: ReactNode;
+    closeLabel?: string;
+    eyebrow?: string;
+    footer?: ReactNode;
+    isDismissBlocked?: boolean;
+    isOpen: boolean;
+    isScrollable?: boolean;
+    leadingLabel?: string;
+    onClose: () => void;
+    title: string;
+    trailingAction?: PsSheetAction;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsSheetProps } from './ps-sheet-props';
+export declare const PsSheet: ({ children, closeLabel, eyebrow, footer, isDismissBlocked, isOpen, isScrollable, leadingLabel, onClose, title, trailingAction, }: PsSheetProps) => import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsSheetService } from '../../services/ps-sheet-service';
+import { PsSheetContent } from '../ps-sheet-content/ps-sheet-content';
+import { PsSheetPresenter } from '../ps-sheet-presenter/ps-sheet-presenter';
+export const PsSheet = ({ children, closeLabel, eyebrow, footer, isDismissBlocked = false, isOpen, isScrollable = true, leadingLabel, onClose, title, trailingAction, }) => (_jsx(PsSheetPresenter, { isDismissBlocked: isDismissBlocked, isOpen: isOpen, onClose: onClose, children: _jsx(PsSheetContent, { footer: footer, header: {
+            eyebrow,
+            isLeadingDisabled: isDismissBlocked,
+            leadingLabel,
+            onLeadingPress: onClose,
+            title,
+            trailing: trailingAction === undefined
+                ? PsSheetService.closeAction(closeLabel, onClose)
+                : trailingAction,
+        }, isScrollable: isScrollable, children: children }) }));

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

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

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

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

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { PsSheetHeaderProps } from '../ps-sheet-header/ps-sheet-header-props';
+export interface PsSheetContentProps {
+    children: ReactNode;
+    footer?: ReactNode;
+    header: PsSheetHeaderProps;
+    isScrollable: boolean;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsSheetContentProps } from './ps-sheet-content-props';
+export declare const PsSheetContent: ({ children, footer, header, isScrollable }: PsSheetContentProps) => import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
+import { Platform, ScrollView, View, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsSheetMeasureContext } from '../../contexts/ps-sheet-measure-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsSheetService } from '../../services/ps-sheet-service';
+import { PsSheetHeader } from '../ps-sheet-header/ps-sheet-header';
+export const PsSheetContent = ({ children, footer, header, isScrollable }) => {
+    const theme = usePsMobileTheme();
+    const insets = useSafeAreaInsets();
+    const { height } = useWindowDimensions();
+    const report = useContext(PsSheetMeasureContext);
+    const [headerHeight, setHeaderHeight] = useState(0);
+    const [bodyHeight, setBodyHeight] = useState(0);
+    const fitted = headerHeight > 0 && bodyHeight > 0
+        ? PsSheetService.fittedHeight(headerHeight, bodyHeight, height)
+        : null;
+    useEffect(() => {
+        if (fitted !== null)
+            report(fitted);
+    }, [fitted, report]);
+    const body = (_jsxs(_Fragment, { children: [children, footer === undefined ? null : (_jsx(View, { style: {
+                    flexDirection: 'row',
+                    gap: PsLayoutConfig.sheetFooterGap,
+                    justifyContent: 'center',
+                }, testID: 'ps-sheet-footer', children: footer }))] }));
+    const contentStyle = {
+        gap: PsLayoutConfig.gutter,
+        paddingBottom: PsSheetService.bottomPadding(Platform.OS === 'ios', insets.bottom),
+        paddingHorizontal: PsLayoutConfig.sheetGutter,
+        paddingTop: PsLayoutConfig.sheetHeaderPaddingVertical,
+    };
+    return (_jsxs(View, { style: {
+            backgroundColor: theme.background,
+            height: fitted === null ? undefined : fitted,
+            maxHeight: PsSheetService.maxHeight(height),
+        }, testID: 'ps-sheet', children: [_jsx(View, { onLayout: (event) => setHeaderHeight(event.nativeEvent.layout.height), children: _jsx(PsSheetHeader, { ...header }) }), isScrollable ? (_jsx(ScrollView, { automaticallyAdjustKeyboardInsets: true, contentContainerStyle: contentStyle, keyboardDismissMode: 'interactive', keyboardShouldPersistTaps: 'handled', onContentSizeChange: (_width, contentHeight) => setBodyHeight(contentHeight), style: { flexGrow: 0 }, children: body })) : (_jsx(View, { onLayout: (event) => setBodyHeight(event.nativeEvent.layout.height), style: contentStyle, children: body }))] }));
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+import type { PsSheetAction } from '../../interfaces/ps-sheet-action';
+export interface PsSheetHeaderProps {
+    eyebrow?: string;
+    isLeadingDisabled?: boolean;
+    leadingLabel?: string;
+    onLeadingPress?: () => void;
+    title: string;
+    trailing?: PsSheetAction;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsSheetHeaderProps } from './ps-sheet-header-props';
+export declare const PsSheetHeader: ({ eyebrow, isLeadingDisabled, leadingLabel, onLeadingPress, title, trailing, }: PsSheetHeaderProps) => import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { StyleSheet, View } from 'react-native';
+import { PsPageHeaderConfig } from '../../constants/ps-page-header-config';
+import { PsSheetConfig } from '../../constants/ps-sheet-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsSheetService } from '../../services/ps-sheet-service';
+import { PsIconButton } from '../ps-icon-button/ps-icon-button';
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+import { PsText } from '../ps-text/ps-text';
+export const PsSheetHeader = ({ eyebrow, isLeadingDisabled = false, leadingLabel, onLeadingPress, title, trailing, }) => {
+    const theme = usePsMobileTheme();
+    const trailingColor = trailing?.tone === 'danger' ? theme.danger : theme.primary;
+    const trailingContrast = trailing?.tone === 'danger' ? theme.white : theme.primaryContrast;
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            borderBottomColor: theme.line,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+            flexDirection: 'row',
+            minHeight: PsSheetConfig.headerMinHeight,
+            paddingBottom: PsSheetConfig.headerPaddingBottom,
+            paddingHorizontal: PsSheetConfig.headerPaddingHorizontal,
+            paddingTop: PsSheetConfig.headerPaddingTop,
+        }, testID: 'ps-sheet-header', children: [_jsx(View, { style: { alignItems: 'flex-start', minWidth: PsSheetConfig.actionMinWidth }, children: leadingLabel === undefined ? null : (_jsx(PsIconButton, { iconKey: PsIconKey.Close, isDisabled: isLeadingDisabled, label: leadingLabel, onPress: onLeadingPress, testID: 'ps-sheet-leading', variant: 'header' })) }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [_jsx(PsText, { accessibilityRole: 'header', align: 'center', numberOfLines: 2, weight: 'bold', children: title }), eyebrow === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 1, tone: 'muted', variant: 'small', children: eyebrow }))] }), _jsx(View, { style: { alignItems: 'flex-end', minWidth: PsSheetConfig.actionMinWidth }, children: trailing === undefined ? null : trailing.isSubmitting === true ? (_jsx(View, { accessibilityLabel: trailing.label, accessibilityState: { busy: true }, style: {
+                        alignItems: 'center',
+                        backgroundColor: trailingColor,
+                        borderRadius: PsPageHeaderConfig.buttonSize / 2,
+                        height: PsPageHeaderConfig.buttonSize,
+                        justifyContent: 'center',
+                        width: PsPageHeaderConfig.buttonSize,
+                    }, testID: 'ps-sheet-trailing', children: _jsx(PsSpinner, { color: trailingContrast }) })) : (_jsx(PsIconButton, { backgroundColor: trailingColor, color: trailingContrast, iconKey: PsIconKey.Check, isDisabled: PsSheetService.isActionInactive(trailing), label: trailing.label, onPress: trailing.onPress, testID: 'ps-sheet-trailing', variant: 'header' })) })] }));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PsSheetPresenterProps {
+    children: ReactNode;
+    isDismissBlocked: boolean;
+    isOpen: boolean;
+    onClose: () => void;
+}

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

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

package/dist/components/ps-sheet-presenter/ps-sheet-presenter.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsSheetPresenterProps } from './ps-sheet-presenter-props';
+export declare const PsSheetPresenter: ({ children, isDismissBlocked, isOpen, onClose, }: PsSheetPresenterProps) => import("react").JSX.Element | null;

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

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

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

@@ -0,0 +1,2 @@
+import type { PsSheetPresenterProps } from './ps-sheet-presenter-props';
+export declare const PsSheetPresenter: ({ children, isDismissBlocked, isOpen, onClose, }: PsSheetPresenterProps) => import("react").JSX.Element;

package/dist/components/ps-sheet-presenter/ps-sheet-presenter.ios.d.ts

@@ -0,0 +1,2 @@
+import type { PsSheetPresenterProps } from './ps-sheet-presenter-props';
+export declare const PsSheetPresenter: ({ children, isDismissBlocked, isOpen, onClose, }: PsSheetPresenterProps) => import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { BottomSheet, Group, RNHostView } from '@expo/ui/swift-ui';
+import { frame, interactiveDismissDisabled, presentationBackground, presentationDetents, presentationDragIndicator, } from '@expo/ui/swift-ui/modifiers';
+import { PsNativeTreeContext } from '../../contexts/ps-native-tree-context';
+import { PsSheetMeasureContext } from '../../contexts/ps-sheet-measure-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsSheetService } from '../../services/ps-sheet-service';
+import { PsHost } from '../ps-host/ps-host';
+export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose, }) => {
+    const theme = usePsMobileTheme();
+    const isOpenRef = useRef(isOpen);
+    const isBlockedRef = useRef(isDismissBlocked);
+    const [height, setHeight] = useState(0);
+    isOpenRef.current = isOpen;
+    isBlockedRef.current = isDismissBlocked;
+    return (_jsx(PsHost, { matchContents: true, children: _jsx(BottomSheet, { isPresented: isOpen, onIsPresentedChange: (isPresented) => {
+                if (PsSheetService.shouldClose(isPresented, isOpenRef.current, isBlockedRef.current)) {
+                    onClose();
+                }
+            }, children: _jsx(Group, { modifiers: [
+                    frame({ alignment: 'top', maxHeight: Infinity, maxWidth: Infinity }),
+                    presentationDetents(height > 0 ? [{ height }] : ['medium']),
+                    presentationDragIndicator('visible'),
+                    presentationBackground(theme.background),
+                    interactiveDismissDisabled(isDismissBlocked),
+                ], children: _jsx(RNHostView, { matchContents: { vertical: true }, children: _jsx(PsNativeTreeContext.Provider, { value: false, children: _jsx(PsSheetMeasureContext.Provider, { value: setHeight, children: children }) }) }) }) }) }));
+};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Pressable, StyleSheet, View } from 'react-native';
+import { PsSheetConfig } from '../../constants/ps-sheet-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose, }) => {
+    const theme = usePsMobileTheme();
+    return (_jsx(Modal, { animationType: 'slide', onRequestClose: isDismissBlocked ? undefined : onClose, statusBarTranslucent: true, transparent: true, visible: isOpen, children: _jsxs(View, { style: {
+                backgroundColor: theme.overlay,
+                flex: 1,
+                justifyContent: 'flex-end',
+            }, children: [_jsx(Pressable, { onPress: isDismissBlocked ? undefined : onClose, style: StyleSheet.absoluteFill, testID: 'ps-sheet-scrim' }), _jsx(View, { style: {
+                        backgroundColor: theme.background,
+                        borderTopLeftRadius: PsSheetConfig.cornerRadius,
+                        borderTopRightRadius: PsSheetConfig.cornerRadius,
+                        overflow: 'hidden',
+                    }, children: children })] }) }));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { type DimensionValue } from 'react-native';
+export interface PsSkeletonBarProps {
+    height: number;
+    radius: number;
+    width: DimensionValue;
+}
+export declare const PsSkeletonBar: ({ height, radius, width }: PsSkeletonBarProps) => import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsSkeletonSweep } from './ps-skeleton-sweep';
+export const PsSkeletonBar = ({ height, radius, width }) => {
+    const theme = usePsMobileTheme();
+    const [measured, setMeasured] = useState(0);
+    return (_jsx(View, { onLayout: (event) => setMeasured(event.nativeEvent.layout.width), style: {
+            backgroundColor: theme.skeletonBase,
+            borderRadius: radius,
+            height,
+            overflow: 'hidden',
+            width,
+        }, children: _jsx(PsSkeletonSweep, { width: measured }) }));
+};

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

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