@procivis/one-react-native-components 0.1.63 → 0.3.22

package/lib/typescript/ui-components/buttons/hold-button.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TouchableWithoutFeedbackProps } from 'react-native';
+export interface HoldButtonProps extends Omit<TouchableWithoutFeedbackProps, 'children' | 'onLayout' | 'onPress' | 'onLongPress' | 'onPressIn' | 'onPressOut'> {
+    title: string;
+    subtitlePrefix: string;
+    subtitleSuffix: string;
+    holdTimeoutSecs?: number;
+    onFinished: () => void;
+}
+/**
+ * Press and hold button component
+ *
+ * follows design: https://www.figma.com/design/cCmAyBQrQWCQZuDi85pJfe/Procivis-One-Wallet-Developments-2025?node-id=1-871
+ */
+declare const HoldButton: React.ForwardRefExoticComponent<HoldButtonProps & React.RefAttributes<import("react-native").TouchableWithoutFeedback>>;
+export default HoldButton;

package/lib/typescript/ui-components/buttons/index.d.ts

@@ -0,0 +1,15 @@
+import type { BackButtonProps } from './back-button';
+import BackButton, { BackButtonIcon } from './back-button';
+import type { ButtonProps } from './button';
+import { Button, ButtonType } from './button';
+import type { ConnectivityButtonProps } from './connectivity-button';
+import ConnectivityButton, { ConnectivityTransport } from './connectivity-button';
+import type { FilterButtonProps } from './filter-button';
+import FilterButton from './filter-button';
+import type { GhostButtonProps } from './ghost-button';
+import GhostButton from './ghost-button';
+import type { HoldButtonProps } from './hold-button';
+import HoldButton from './hold-button';
+import type { ScanButtonProps } from './scan-button';
+import ScanButton from './scan-button';
+export { BackButton, BackButtonIcon, BackButtonProps, Button, ButtonProps, ButtonType, ConnectivityButton, ConnectivityButtonProps, ConnectivityTransport, FilterButton, FilterButtonProps, GhostButton, GhostButtonProps, HoldButton, HoldButtonProps, ScanButton, ScanButtonProps, };

package/lib/typescript/ui-components/buttons/scan-button.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TouchableOpacityProps, View } from 'react-native';
+export type ScanButtonProps = TouchableOpacityProps;
+declare const ScanButton: React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<View>>>>;
+export default ScanButton;

package/lib/typescript/ui-components/credential/card/credential-card.d.ts

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import { ImageOrComponentSource } from '../../image/image-or-component';
+import { CredentialHeaderProps } from './credential-header';
+import { CarouselImage } from './credential-image-carousel';
+export declare const CredentialCardShadow: Pick<ViewStyle, 'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius'>;
+export declare const CredentialCardRatio: number;
+export type CredentialCardNotice = {
+    text: string;
+    noticeIcon?: React.ComponentType<any> | React.ReactElement;
+};
+export type CredentialCardProps = {
+    cardCarouselImages?: CarouselImage[];
+    cardImage?: ImageOrComponentSource;
+    color?: ColorValue;
+    credentialId?: string;
+    header: CredentialHeaderProps;
+    notice?: CredentialCardNotice;
+    onCardPress?: (credentialId?: string) => void;
+    onHeaderPress?: (credentialId?: string) => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+declare const CredentialCard: FC<CredentialCardProps>;
+export default CredentialCard;

package/lib/typescript/ui-components/credential/card/credential-header.d.ts

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { AccessibilityProps, ColorValue, StyleProp, ViewStyle } from 'react-native';
+import { ImageOrComponentSource } from '../../image/image-or-component';
+export interface CredentialHeaderProps extends AccessibilityProps {
+    accessory?: React.ComponentType<any> | React.ReactElement;
+    blur?: boolean;
+    color?: ColorValue;
+    credentialDetailPrimary?: string;
+    credentialDetailSecondary?: string;
+    credentialDetailTestID?: string;
+    credentialDetailErrorColor?: boolean;
+    credentialName: string;
+    icon?: ImageOrComponentSource;
+    iconLabelColor?: ColorValue;
+    statusIcon?: React.ComponentType<any> | React.ReactElement;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const CredentialHeader: FC<CredentialHeaderProps>;
+export default CredentialHeader;

package/lib/typescript/ui-components/credential/card/index.d.ts

@@ -0,0 +1,15 @@
+import type { CredentialCardNotice, CredentialCardProps } from './credential-card';
+import CredentialCard, { CredentialCardRatio, CredentialCardShadow } from './credential-card';
+import type { CredentialDetailsCardProps } from './credential-details-card';
+import CredentialDetailsCard from './credential-details-card';
+import type { CredentialDetailsCardListItemProps } from './credential-details-list-item';
+import CredentialDetailsCardListItem from './credential-details-list-item';
+import type { CredentialHeaderProps } from './credential-header';
+import CredentialHeader from './credential-header';
+import type { CarouselImage } from './credential-image-carousel';
+import { CarouselImageType } from './credential-image-carousel';
+export { CarouselImage, CarouselImageType };
+export { CredentialCard, CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };
+export { CredentialDetailsCard, CredentialDetailsCardProps };
+export { CredentialDetailsCardListItem, CredentialDetailsCardListItemProps };
+export { CredentialHeader, CredentialHeaderProps };

package/lib/typescript/ui-components/credential/credential-attribute-item.d.ts

@@ -0,0 +1,49 @@
+import { ComponentType, FC, ReactElement } from 'react';
+import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+export type CredentialAttributeValue = {
+    attributes: CredentialAttribute[];
+    image?: never;
+    value?: never;
+    values?: never;
+    valueErrorColor?: never;
+    testID?: string;
+} | {
+    attributes?: never;
+    image: ImageSourcePropType;
+    value?: never;
+    values?: never;
+    valueErrorColor?: never;
+    testID?: string;
+} | {
+    attributes?: never;
+    image?: never;
+    value: string;
+    values?: never;
+    valueErrorColor?: boolean;
+    testID?: string;
+} | {
+    attributes?: never;
+    image?: never;
+    value?: never;
+    values: CredentialAttribute[];
+    valueErrorColor?: boolean;
+    testID?: string;
+};
+export type CredentialAttribute = CredentialAttributeValue & {
+    disabled?: boolean;
+    selected?: boolean;
+    nested?: boolean;
+    listValue?: boolean;
+    id: string;
+    name?: string;
+    path: string;
+    rightAccessory?: ComponentType<any> | ReactElement;
+};
+export type CredentialAttributeItemProps = CredentialAttribute & {
+    last: boolean | undefined;
+    onImagePreview?: (name: string, image: ImageSourcePropType) => void;
+    onPress?: (id: string, selected: boolean) => void;
+    style?: StyleProp<ViewStyle>;
+};
+declare const CredentialAttributeItem: FC<CredentialAttributeItemProps>;
+export default CredentialAttributeItem;

package/lib/typescript/ui-components/credential/index.d.ts

@@ -0,0 +1,9 @@
+import type { CredentialAttribute, CredentialAttributeItemProps, CredentialAttributeValue } from './credential-attribute-item';
+import CredentialAttributeItem from './credential-attribute-item';
+import { Barcode, Mrz, QrCode } from './credential-carousel-images';
+import Selector from './selector';
+import { SelectorStatus } from './selector-status';
+export { CredentialAttribute, CredentialAttributeItem, CredentialAttributeItemProps, CredentialAttributeValue };
+export { Barcode, Mrz, QrCode };
+export { Selector, SelectorStatus };
+export * from './card';

package/lib/typescript/ui-components/entity/avatar.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType, FunctionComponent, ReactElement } from 'react';
+import { ViewProps } from 'react-native';
+import { ImageOrComponentSource } from '../image/image-or-component';
+export type AvatarProps = ViewProps & {
+    avatar?: ImageOrComponentSource;
+    placeholderText?: string;
+    statusIcon?: ComponentType<any> | ReactElement;
+    testID?: string;
+};
+declare const Avatar: FunctionComponent<AvatarProps>;
+export default Avatar;

package/lib/typescript/ui-components/entity/entity-cluster.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+import { ViewProps } from 'react-native';
+import { AvatarProps } from './avatar';
+export type EntityClusterProps = ViewProps & {
+    avatar?: AvatarProps;
+    entityName: string;
+    subline?: string;
+    textColor?: string;
+    sublineColor?: string;
+    testID?: string;
+};
+declare const EntityCluster: FunctionComponent<EntityClusterProps>;
+export default EntityCluster;

package/lib/typescript/ui-components/header/index.d.ts

@@ -0,0 +1,11 @@
+import FocusAwareStatusBar from './focus-aware-status-bar';
+import type { FoldableHeaderProps } from './foldable-header';
+import FoldableHeader from './foldable-header';
+import type { HeaderProps } from './header';
+import Header from './header';
+import type { NavigationHeaderProps } from './navigation-header';
+import NavigationHeader from './navigation-header';
+export { FocusAwareStatusBar };
+export { FoldableHeader, FoldableHeaderProps };
+export { Header, HeaderProps };
+export { NavigationHeader, NavigationHeaderProps };

package/lib/typescript/ui-components/history/data-item.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType, FC, ReactElement } from 'react';
+import { ColorValue, ViewProps } from 'react-native';
+export type DataItemProps = ViewProps & {
+    attribute: string;
+    last?: boolean;
+    multiline?: boolean;
+    value: string;
+    valueColor?: ColorValue;
+    valueIcon?: ComponentType<any> | ReactElement;
+};
+declare const DataItem: FC<DataItemProps>;
+export default DataItem;

package/lib/typescript/ui-components/history/history-details.d.ts

@@ -0,0 +1,51 @@
+import { ComponentType, FC, ReactElement } from 'react';
+import { ColorValue, ImageSourcePropType } from 'react-native';
+import { CredentialDetails, CredentialDetailsProps, EntityDetailsProps } from '../../components';
+import { CardLabels } from '../../utils';
+import { CredentialDetailsCardListItemProps, CredentialHeaderProps } from '../credential';
+export type HistoryDetailsLabels = {
+    credentialCard: CardLabels;
+    data: {
+        date: string;
+        action: string;
+    };
+    infoButtonAccessibility?: string;
+    relatedAssets: string;
+    title: string;
+};
+type CredentialDetails = Omit<CredentialDetailsProps, 'expanded' | 'labels' | 'lastItem' | 'onHeaderPress' | 'onImagePreview'>;
+type CredentialCard = Omit<CredentialDetailsCardListItemProps, 'expanded' | 'labels' | 'lastItem' | 'onHeaderPress' | 'onImagePreview'>;
+export type HistoryDetailsViewProps = {
+    assets?: {
+        header?: CredentialHeaderProps & {
+            onPressed?: () => void;
+        };
+        cards?: ({
+            credentialDetails: CredentialDetails;
+        } | {
+            credentialCard: CredentialCard;
+        })[];
+    };
+    data: {
+        header?: {
+            entity: EntityDetailsProps;
+        } | {
+            credentialHeader: CredentialHeaderProps;
+        };
+        date: string;
+        action: {
+            icon: ComponentType<any> | ReactElement;
+            label: string;
+            color: ColorValue;
+            testID?: string;
+        };
+    };
+    headerButton?: ReactElement;
+    labels: HistoryDetailsLabels;
+    onBackPressed: () => void;
+    onInfoPressed?: () => void;
+    onImagePreview: (title: string, image: ImageSourcePropType) => void;
+    testID: string;
+};
+export declare const HistoryDetailsView: FC<HistoryDetailsViewProps>;
+export {};

package/lib/typescript/ui-components/history/history-item.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType, FC, ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type HistoryItemViewProps = {
+    first?: boolean;
+    icon: ComponentType<any> | ReactElement;
+    info?: string;
+    label: string;
+    last?: boolean;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+    time: string;
+};
+declare const HistoryItemView: FC<HistoryItemViewProps>;
+export default HistoryItemView;

package/lib/typescript/ui-components/history/history-section-header.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+declare const HistorySectionHeaderView: FC<{
+    day: string;
+    testID?: string;
+    year?: string;
+}>;
+export default HistorySectionHeaderView;

package/lib/typescript/ui-components/history/history-section-list-item.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { HistoryItemViewProps } from './history-item';
+export interface HistorySectionListItemProps extends HistoryItemViewProps {
+    first?: boolean;
+}
+declare const HistorySectionListItem: FC<HistorySectionListItemProps>;
+export default HistorySectionListItem;

package/lib/typescript/ui-components/history/index.d.ts

@@ -0,0 +1,9 @@
+import DataItem, { DataItemProps } from './data-item';
+import HistoryItemView, { HistoryItemViewProps } from './history-item';
+import HistorySectionHeaderView from './history-section-header';
+import HistorySectionListItem, { HistorySectionListItemProps } from './history-section-list-item';
+export * from './history-details';
+export { DataItem, DataItemProps };
+export { HistoryItemView, HistoryItemViewProps };
+export { HistorySectionHeaderView };
+export { HistorySectionListItem, HistorySectionListItemProps };

package/lib/typescript/ui-components/icons/history.d.ts

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { ViewProps } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+export declare const HistoryCredentialIcon: FC<SvgProps>;
+export declare const HistorySchemaIcon: FC<SvgProps>;
+export declare const HistoryBackupCreatedIcon: FC<SvgProps>;
+export declare const HistoryBackupRestoredIcon: FC<SvgProps>;
+export declare const HistoryProofRequestIcon: FC<SvgProps>;
+export declare const HistoryIssueIcon: FC<SvgProps>;
+export declare const HistoryRevokeIcon: FC<SvgProps>;
+export declare const HistorySuspendIcon: FC<SvgProps>;
+export declare const HistoryDidIcon: React.FC<SvgProps>;
+export declare const HistoryKeyIcon: React.FC<SvgProps>;
+export declare const HistoryOrganisationIcon: React.FC<SvgProps>;
+export declare const HistoryTrustAnchorIcon: React.FC<SvgProps>;
+export declare const HistoryTrustedEntityIcon: React.FC<SvgProps>;
+export declare const HistoryStatusAcceptedIcon: FC<SvgProps>;
+export declare const HistoryStatusDeleteIcon: FC<SvgProps>;
+export declare const HistoryStatusErrorIcon: FC<SvgProps>;
+export declare const HistoryStatusSuspendIcon: FC<SvgProps>;
+export declare const HistoryStatusSuspendTemporaryIcon: FC<SvgProps>;
+export declare const HistoryStatusIndicatorIcon: FC<SvgProps>;
+export type HistoryItemIconProps = ViewProps & {
+    StatusIcon: FC<SvgProps>;
+    TypeIcon: FC<SvgProps>;
+};
+export declare const HistoryItemIcon: FC<HistoryItemIconProps>;

package/lib/typescript/ui-components/image/index.d.ts

@@ -0,0 +1,3 @@
+import type { ImageOrComponentSource } from './image-or-component';
+import ImageOrComponent from './image-or-component';
+export { ImageOrComponent, ImageOrComponentSource };

package/lib/typescript/ui-components/index.d.ts

@@ -0,0 +1,25 @@
+export * from './accessibility';
+export * from './action-modal';
+export * from './activity-indicator';
+export * from './blur';
+export * from './buttons';
+export * from './camera';
+export * from './control';
+export * from './credential';
+export * from './detail';
+export * from './entity';
+export * from './header';
+export * from './history';
+export * from './icons';
+export * from './image';
+export * from './input';
+export * from './list';
+export * from './loader';
+export * from './nerd-view';
+export * from './pin';
+export * from './screens';
+export * from './searchbar';
+export * from './settings';
+export * from './state';
+export * from './text';
+export * from './theme';

package/lib/typescript/ui-components/input/selection-input.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { TouchableOpacityProps } from 'react-native';
+export interface SelectionInputChoice {
+    label: string;
+    /**
+     * If specified used in the input display, otherwise {@link label} used.
+     * The {@link label} is always used for the picker values.
+     */
+    shortLabel?: string;
+    value: string | number;
+}
+export interface SelectionInputProps extends TouchableOpacityProps {
+    error?: string;
+    label: string;
+    /**
+     * Called when selection changes
+     * @return `true` to avoid accessibility auto-focusing, `false` otherwise
+     */
+    onChange?: (value: SelectionInputChoice) => boolean;
+    pickerCancelLabel: string;
+    pickerConfirmLabel: string;
+    pickerTitle?: string;
+    /** {@link SelectionInputChoice.label} of the selected choice */
+    selectedValue?: string | number;
+    values: SelectionInputChoice[];
+}
+/**
+ * Generic selection input component
+ * @see https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=4%3A127&t=B2Y3PtJHH22XDPkx-0
+ */
+declare const SelectionInput: React.ForwardRefExoticComponent<SelectionInputProps & React.RefAttributes<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>>>;
+export default SelectionInput;

package/lib/typescript/ui-components/list/index.d.ts

@@ -0,0 +1,5 @@
+import ListSectionHeader, { ListSectionHeaderProps } from './list-section-header';
+import ListTitleHeader, { ListTitleHeaderProps } from './list-title-header';
+export { ListSectionHeader, ListSectionHeaderProps };
+export { ListTitleHeader, ListTitleHeaderProps };
+export * from './wallet';

package/lib/typescript/ui-components/list/list-page-loading-indicator.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ActivityIndicatorProps } from 'react-native';
+declare const ListPageLoadingIndicator: FC<ActivityIndicatorProps>;
+export default ListPageLoadingIndicator;

package/lib/typescript/ui-components/list/wallet/empty-list.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+type WalletEmptyListProps = {
+    onScanPress: () => void;
+    scanButtonTitle: string;
+    subtitle: string;
+    testID: string;
+    title: string;
+};
+declare const WalletEmptyList: FC<WalletEmptyListProps>;
+export default WalletEmptyList;

package/lib/typescript/ui-components/list/wallet/empty-search-result.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type WalletEmptySearchResultProps = {
+    subtitle: string;
+    title: string;
+};
+declare const WalletEmptySearchResult: FC<WalletEmptySearchResultProps>;
+export default WalletEmptySearchResult;

package/lib/typescript/ui-components/list/wallet/index.d.ts

@@ -0,0 +1,3 @@
+import WalletEmptyList from './empty-list';
+import WalletEmptySearchResult from './empty-search-result';
+export { WalletEmptyList, WalletEmptySearchResult };

package/lib/typescript/ui-components/nerd-view/index.d.ts

@@ -0,0 +1,3 @@
+import type { NerdModeItemProps } from './nerd-mode-item';
+import NerdModeItem, { ActionIcon } from './nerd-mode-item';
+export { ActionIcon, NerdModeItem, NerdModeItemProps };

package/lib/typescript/ui-components/pin/index.d.ts

@@ -0,0 +1,4 @@
+import { Biometry } from './keypad';
+import { PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps } from './pin-code-screen';
+import PinLockModal, { PinLockModalLabels } from './pin-lock';
+export { Biometry, PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps, PinLockModal, PinLockModalLabels };

package/lib/typescript/ui-components/pin/keypad.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+export declare enum Biometry {
+    FaceID = "faceID",
+    Other = "other"
+}
+export interface KeypadProps {
+    testID?: string;
+    biometry?: Biometry | null;
+    onBiometricPress?: () => void;
+    onPressDigit?: (digit: number) => void;
+    onPressDelete?: () => void;
+    style?: StyleProp<ViewStyle>;
+    onDeleteAll?: () => void;
+}
+export declare const Keypad: React.ForwardRefExoticComponent<KeypadProps & React.RefAttributes<React.ForwardRefExoticComponent<import("react-native").TouchableOpacityProps & React.RefAttributes<View>>>>;