@ermis-network/ermis-chat-react 1.0.9 → 2.0.1

package/src/components/Panel.tsx

@@ -1,19 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-export type PanelProps = {
-  /** Whether the panel is visible */
-  isOpen: boolean;
-  /** Called when user clicks the back button */
-  onClose: () => void;
-  /** Panel title shown in the header */
-  title?: string;
-  /** Panel body content */
-  children: React.ReactNode;
-  /** Optional header content (replaces default title + back button) */
-  headerContent?: React.ReactNode;
-  /** Additional CSS class name */
-  className?: string;
-};
+import type { PanelProps } from '../types';
 
 /**
  * Reusable sliding panel component.

package/src/components/PinnedMessages.tsx

@@ -1,7 +1,14 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
-import { isStickerMessage } from '../messageTypeUtils';
+import {
+  ATTACHMENT_TYPES,
+  isImageAttachment,
+  isLinkPreviewAttachment,
+  isStickerMessage,
+  isVideoAttachment,
+  isVoiceRecordingAttachment,
+} from '../messageTypeUtils';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import type { PinnedMessageItemProps, PinnedMessagesProps } from '../types';
@@ -15,6 +22,10 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
   onClickMessage,
   onUnpin,
   AvatarComponent,
+  unpinLabel = 'Unpin message',
+  stickerLabel = 'Sticker',
+  attachmentLabel = 'Attachment',
+  unavailableMessageLabel = 'Message unavailable',
 }) => {
   const { activeChannel } = useChatClient();
   const userName = message.user?.name || message.user_id || 'Unknown';
@@ -28,11 +39,24 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
   let previewText = message.text || '';
   const isSticker = isStickerMessage(message);
 
-  if (!previewText && hasAttachments) {
+  const isUnavailable =
+    !previewText &&
+    ((message as any).content_type === 'mls' ||
+      Boolean((message as any).mls_ciphertext) ||
+      (message as any).e2ee_status === 'failed' ||
+      (message as any).e2ee_status === 'decrypting');
+
+  if (isUnavailable) {
+    previewText = unavailableMessageLabel;
+  } else if (!previewText && hasAttachments) {
     const firstAttach = message.attachments![0];
-    previewText = firstAttach.title || `${firstAttach.type || 'file'}`;
+    previewText =
+      (isLinkPreviewAttachment(firstAttach) && firstAttach.title) ||
+      firstAttach.title ||
+      firstAttach.file_name ||
+      attachmentLabel;
   } else if (isSticker) {
-    previewText = 'Sticker';
+    previewText = stickerLabel;
   }
 
   // Convert @userId → @UserName in preview text
@@ -42,11 +66,13 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
 
   // Attachment icon prefix
   let attachIcon = '';
-  if (hasAttachments) {
-    const type = message.attachments![0].type;
-    if (type === 'image') attachIcon = '📷 ';
-    else if (type === 'video') attachIcon = '🎥 ';
-    else if (type === 'audio') attachIcon = '🎵 ';
+  if (!isUnavailable && hasAttachments) {
+    const firstAttach = message.attachments![0];
+    if (isImageAttachment(firstAttach)) attachIcon = '📷 ';
+    else if (isVideoAttachment(firstAttach)) attachIcon = '🎥 ';
+    else if (isVoiceRecordingAttachment(firstAttach) || firstAttach.type === ATTACHMENT_TYPES.AUDIO) {
+      attachIcon = '🎵 ';
+    }
     else attachIcon = '📄 ';
   } else if (isSticker) {
     attachIcon = '😀 ';
@@ -59,16 +85,16 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
       role="button"
       tabIndex={0}
     >
-      <AvatarComponent image={userAvatar} name={userName} size={28} />
+      <AvatarComponent image={userAvatar} name={userName} size={38} />
       <div className="ermis-pinned-messages__item-content">
         <span className="ermis-pinned-messages__item-user">{userName}</span>
-        <span className="ermis-pinned-messages__item-text">{attachIcon}{previewText || 'Attachment'}</span>
+        <span className="ermis-pinned-messages__item-text">{attachIcon}{previewText || unavailableMessageLabel}</span>
       </div>
       <button
         className="ermis-pinned-messages__unpin-btn"
         onClick={(e) => { e.stopPropagation(); onUnpin?.(message.id); }}
-        title="Unpin message"
-        aria-label="Unpin message"
+        title={unpinLabel}
+        aria-label={unpinLabel}
       >
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
           <line x1="2" y1="2" x2="22" y2="22" />
@@ -89,6 +115,13 @@ export const PinnedMessages: React.FC<PinnedMessagesProps> = React.memo(({
   PinnedMessageItemComponent = DefaultPinnedMessageItem,
   onClickMessage,
   maxCollapsed = 1,
+  pinnedMessagesLabel,
+  seeAllLabel = 'See all',
+  collapseLabel = 'Collapse',
+  unpinLabel = 'Unpin message',
+  stickerLabel = 'Sticker',
+  attachmentLabel = 'Attachment',
+  unavailableMessageLabel = 'Message unavailable',
 }) => {
   const { activeChannel, client, messages } = useChatClient();
   const [expanded, setExpanded] = useState(false);
@@ -134,14 +167,17 @@ export const PinnedMessages: React.FC<PinnedMessagesProps> = React.memo(({
           <path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z" />
         </svg>
         <span className="ermis-pinned-messages__label">
-          {pinnedMessages.length} pinned message{pinnedMessages.length > 1 ? 's' : ''}
+          {typeof pinnedMessagesLabel === 'function'
+            ? pinnedMessagesLabel(pinnedMessages.length)
+            : pinnedMessagesLabel || `${pinnedMessages.length} pinned message${pinnedMessages.length > 1 ? 's' : ''}`
+          }
         </span>
         {hasMore && (
           <button
             className="ermis-pinned-messages__toggle"
             onClick={(e) => { e.stopPropagation(); toggleExpanded(); }}
           >
-            {expanded ? 'Collapse' : 'See all'}
+            {expanded ? collapseLabel : seeAllLabel}
           </button>
         )}
       </div>
@@ -156,6 +192,10 @@ export const PinnedMessages: React.FC<PinnedMessagesProps> = React.memo(({
             onClickMessage={onClickMessage}
             onUnpin={handleUnpin}
             AvatarComponent={AvatarComponent}
+            unpinLabel={unpinLabel}
+            stickerLabel={stickerLabel}
+            attachmentLabel={attachmentLabel}
+            unavailableMessageLabel={unavailableMessageLabel}
           />
         ))}
       </div>

package/src/components/PreviewOverlay.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { PreviewOverlayProps } from '../types';
+
+export const PreviewOverlay: React.FC<PreviewOverlayProps> = ({
+  title = 'You are viewing a public channel.',
+  buttonLabel = 'Join Channel',
+  onJoin,
+  className = '',
+}) => {
+  return (
+    <div className={`ermis-preview-overlay ${className}`}>
+      <span className="ermis-preview-overlay__text">{title}</span>
+      <button
+        className="ermis-preview-overlay__button"
+        onClick={onJoin}
+        type="button"
+      >
+        {buttonLabel}
+      </button>
+    </div>
+  );
+};
+
+PreviewOverlay.displayName = 'PreviewOverlay';

package/src/components/QuotedMessagePreview.tsx

@@ -2,6 +2,14 @@ import React, { useMemo } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
 import type { QuotedMessagePreviewProps } from '../types';
+import {
+  isImageAttachment,
+  isLinkPreviewAttachment,
+  isStickerMessage,
+  isVideoAttachment,
+  isVoiceRecordingAttachment,
+} from '../messageTypeUtils';
+import { isDeletedDisplayMessage } from '../messageTypeUtils';
 
 export type { QuotedMessagePreviewProps } from '../types';
 
@@ -12,10 +20,50 @@ function truncateText(text: string, maxLength: number): string {
   return text.slice(0, maxLength).trimEnd() + '…';
 }
 
+function getAttachmentPreview(
+  attachments: NonNullable<QuotedMessagePreviewProps['quotedMessage']['attachments']>,
+  attachmentLabel: string,
+): string {
+  const firstAttachment = attachments[0];
+  if (!firstAttachment) return attachmentLabel;
+
+  if (isLinkPreviewAttachment(firstAttachment) && firstAttachment.title) {
+    return firstAttachment.title;
+  }
+
+  if (firstAttachment.title || firstAttachment.file_name) {
+    return firstAttachment.title || firstAttachment.file_name || attachmentLabel;
+  }
+
+  if (isImageAttachment(firstAttachment)) return attachmentLabel;
+  if (isVideoAttachment(firstAttachment)) return attachmentLabel;
+  if (isVoiceRecordingAttachment(firstAttachment)) return attachmentLabel;
+
+  return attachmentLabel;
+}
+
+function hasUnavailableContent(quotedMessage: QuotedMessagePreviewProps['quotedMessage']): boolean {
+  const hasText = Boolean(quotedMessage.text?.trim());
+  if (hasText) return false;
+  if (isStickerMessage(quotedMessage)) return false;
+  if (quotedMessage.attachments?.length) return false;
+
+  return (
+    quotedMessage.content_type === 'mls' ||
+    Boolean(quotedMessage.mls_ciphertext) ||
+    quotedMessage.e2ee_status === 'failed' ||
+    quotedMessage.e2ee_status === 'decrypting'
+  );
+}
+
 export const QuotedMessagePreview: React.FC<QuotedMessagePreviewProps> = React.memo(({
   quotedMessage,
   isOwnMessage,
   onClick,
+  attachmentLabel = 'Attachment',
+  unavailableMessageLabel = 'Message unavailable',
+  stickerLabel = 'Sticker',
+  deletedMessageLabel = 'This message was deleted',
 }) => {
   const { activeChannel } = useChatClient();
 
@@ -25,12 +73,53 @@ export const QuotedMessagePreview: React.FC<QuotedMessagePreviewProps> = React.m
 
   const authorName = quotedMessage.user?.name || quotedMessage.user?.id || 'Unknown';
   
-  const rawText = quotedMessage.text || '';
-  const formattedText = useMemo(() => replaceMentionsForPreview(rawText, quotedMessage as any, userMap), [rawText, quotedMessage, userMap]);
-  
-  const previewText = formattedText
-    ? truncateText(formattedText, MAX_PREVIEW_LENGTH)
-    : 'Attachment';
+  const rawText = quotedMessage.text?.trim() || '';
+  const formattedText = useMemo(
+    () => replaceMentionsForPreview(rawText, quotedMessage, userMap),
+    [rawText, quotedMessage, userMap],
+  );
+
+  const preview = useMemo(() => {
+    if (formattedText) {
+      return {
+        text: truncateText(formattedText, MAX_PREVIEW_LENGTH),
+        unavailable: false,
+      };
+    }
+
+    if (isStickerMessage(quotedMessage)) {
+      return {
+        text: stickerLabel,
+        unavailable: false,
+      };
+    }
+
+    if (quotedMessage.attachments?.length) {
+      return {
+        text: getAttachmentPreview(quotedMessage.attachments, attachmentLabel),
+        unavailable: false,
+      };
+    }
+
+    if (isDeletedDisplayMessage(quotedMessage)) {
+      return {
+        text: deletedMessageLabel,
+        unavailable: true,
+      };
+    }
+
+    if (hasUnavailableContent(quotedMessage)) {
+      return {
+        text: unavailableMessageLabel,
+        unavailable: true,
+      };
+    }
+
+    return {
+      text: unavailableMessageLabel,
+      unavailable: true,
+    };
+  }, [attachmentLabel, formattedText, quotedMessage, stickerLabel, unavailableMessageLabel, deletedMessageLabel]);
 
   const handleClick = () => {
     onClick(quotedMessage.id);
@@ -38,7 +127,9 @@ export const QuotedMessagePreview: React.FC<QuotedMessagePreviewProps> = React.m
 
   return (
     <div
-      className={`ermis-quoted-message ${isOwnMessage ? 'ermis-quoted-message--own' : ''}`}
+      className={`ermis-quoted-message ${isOwnMessage ? 'ermis-quoted-message--own' : ''}${
+        preview.unavailable ? ' ermis-quoted-message--unavailable' : ''
+      }`}
       onClick={handleClick}
       role="button"
       tabIndex={0}
@@ -47,7 +138,7 @@ export const QuotedMessagePreview: React.FC<QuotedMessagePreviewProps> = React.m
       }}
     >
       <span className="ermis-quoted-message__author">{authorName}</span>
-      <span className="ermis-quoted-message__text">{previewText}</span>
+      <span className="ermis-quoted-message__text">{preview.text}</span>
     </div>
   );
 });

package/src/components/ReadReceipts.tsx

@@ -41,6 +41,7 @@ export const ReadReceipts: React.FC<ReadReceiptsProps> = React.memo(({
   AvatarComponent = Avatar,
   TooltipComponent = DefaultReadReceiptsTooltip,
   showTooltip = true,
+  isOwnMessage,
 }) => {
   // Only render when there are actual readers (avatar-based display)
   // Sent/Sending/Error status icons are now rendered inline inside the message bubble
@@ -52,7 +53,7 @@ export const ReadReceipts: React.FC<ReadReceiptsProps> = React.memo(({
   const overflow = readers.length - maxAvatars;
 
   return (
-    <div className="ermis-read-receipts">
+    <div className={`ermis-read-receipts${isOwnMessage ? ' ermis-read-receipts--own' : ' ermis-read-receipts--other'}`}>
       <div className="ermis-read-receipts__avatars">
         {visible.map((reader) => (
           <AvatarComponent

package/src/components/RecoveryPin/RecoveryPin.tsx

@@ -0,0 +1,279 @@
+import React, { useMemo, useState } from 'react';
+
+import { useRecoveryPin } from '../../hooks/useRecoveryPin';
+import type { RecoveryPinStatus } from '../../hooks/useRecoveryPin';
+
+export type RecoveryPinSetupProps = {
+  onComplete?: () => void;
+  minDigits?: number;
+};
+
+export type RecoveryPinRestoreProps = {
+  onComplete?: () => void;
+};
+
+export type RecoveryPinChangeProps = {
+  onComplete?: () => void;
+  minDigits?: number;
+};
+
+export type RecoveryStatusProps = {
+  status?: RecoveryPinStatus;
+  hasRecoveryKey?: boolean;
+  className?: string;
+};
+
+export type RecoveryGapProps = {
+  epoch?: number;
+  reason: string;
+  className?: string;
+};
+
+export type RecoveryGateProps = {
+  onSkip?: () => void;
+  className?: string;
+};
+
+export type RecoveryRestoreProgressProps = {
+  restoredEpochs: number;
+  totalEpochs: number;
+  gaps?: Array<{ epoch?: number; reason: string }>;
+  className?: string;
+};
+
+const MIN_PIN_DIGITS = 8;
+
+const pinError = (pin: string, minDigits = MIN_PIN_DIGITS): string | null => {
+  if (!/^\d+$/.test(pin)) return 'PIN must contain digits only.';
+  if (pin.length < minDigits) return `PIN must be at least ${minDigits} digits.`;
+  return null;
+};
+
+const bruteForceLabel = (digits: number): string => {
+  if (digits >= 10) return 'Strong';
+  if (digits >= 8) return 'Medium';
+  return 'Weak';
+};
+
+export const RecoveryPinSetup: React.FC<RecoveryPinSetupProps> = ({
+  onComplete,
+  minDigits = MIN_PIN_DIGITS,
+}) => {
+  const recovery = useRecoveryPin();
+  const [pin, setPin] = useState('');
+  const [confirmPin, setConfirmPin] = useState('');
+  const validation = pin ? pinError(pin, minDigits) : null;
+  const mismatch = confirmPin && pin !== confirmPin ? 'PIN confirmation does not match.' : null;
+  const canSubmit = !!pin && !!confirmPin && !validation && !mismatch && recovery.status !== 'working';
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    await recovery.setupRecoveryPin(pin);
+    onComplete?.();
+  };
+
+  return (
+    <form className="ermis-recovery-pin" onSubmit={submit}>
+      <div className="ermis-recovery-pin__header">
+        <h3>Recovery PIN</h3>
+        <span className="ermis-recovery-pin__badge">{bruteForceLabel(pin.length)}</span>
+      </div>
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="new-password"
+        type="password"
+        value={pin}
+        onChange={(event) => setPin(event.target.value)}
+        placeholder="Enter PIN"
+      />
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="new-password"
+        type="password"
+        value={confirmPin}
+        onChange={(event) => setConfirmPin(event.target.value)}
+        placeholder="Confirm PIN"
+      />
+      {(validation || mismatch || recovery.error) && (
+        <div className="ermis-recovery-pin__error">
+          {validation || mismatch || recovery.error?.message}
+        </div>
+      )}
+      <button className="ermis-recovery-pin__button" type="submit" disabled={!canSubmit}>
+        {recovery.status === 'working' ? 'Saving...' : 'Save PIN'}
+      </button>
+    </form>
+  );
+};
+
+export const RecoveryPinRestore: React.FC<RecoveryPinRestoreProps> = ({ onComplete }) => {
+  const recovery = useRecoveryPin();
+  const [pin, setPin] = useState('');
+  const validation = pin ? pinError(pin) : null;
+  const canSubmit = !!pin && !validation && recovery.status !== 'working';
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    await recovery.unlockRecoveryVault(pin);
+    onComplete?.();
+  };
+
+  return (
+    <form className="ermis-recovery-pin" onSubmit={submit}>
+      <div className="ermis-recovery-pin__header">
+        <h3>Unlock History</h3>
+      </div>
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="current-password"
+        type="password"
+        value={pin}
+        onChange={(event) => setPin(event.target.value)}
+        placeholder="Enter recovery PIN"
+      />
+      {(validation || recovery.error) && (
+        <div className="ermis-recovery-pin__error">{validation || recovery.error?.message}</div>
+      )}
+      <button className="ermis-recovery-pin__button" type="submit" disabled={!canSubmit}>
+        {recovery.status === 'working' ? 'Unlocking...' : 'Unlock'}
+      </button>
+    </form>
+  );
+};
+
+export const RecoveryPinChange: React.FC<RecoveryPinChangeProps> = ({
+  onComplete,
+  minDigits = MIN_PIN_DIGITS,
+}) => {
+  const recovery = useRecoveryPin();
+  const [oldPin, setOldPin] = useState('');
+  const [newPin, setNewPin] = useState('');
+  const validation = newPin ? pinError(newPin, minDigits) : null;
+  const canSubmit = !!oldPin && !!newPin && !validation && recovery.status !== 'working';
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    await recovery.changeRecoveryPin(oldPin, newPin);
+    onComplete?.();
+  };
+
+  return (
+    <form className="ermis-recovery-pin" onSubmit={submit}>
+      <div className="ermis-recovery-pin__header">
+        <h3>Change Recovery PIN</h3>
+        <span className="ermis-recovery-pin__badge">{bruteForceLabel(newPin.length)}</span>
+      </div>
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="current-password"
+        type="password"
+        value={oldPin}
+        onChange={(event) => setOldPin(event.target.value)}
+        placeholder="Current PIN"
+      />
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="new-password"
+        type="password"
+        value={newPin}
+        onChange={(event) => setNewPin(event.target.value)}
+        placeholder="New PIN"
+      />
+      {(validation || recovery.error) && (
+        <div className="ermis-recovery-pin__error">{validation || recovery.error?.message}</div>
+      )}
+      <button className="ermis-recovery-pin__button" type="submit" disabled={!canSubmit}>
+        {recovery.status === 'working' ? 'Changing...' : 'Change PIN'}
+      </button>
+    </form>
+  );
+};
+
+export const RecoveryStatus: React.FC<RecoveryStatusProps> = ({
+  status,
+  hasRecoveryKey,
+  className,
+}) => {
+  const recovery = useRecoveryPin();
+  const resolvedStatus = status || recovery.status;
+  const resolvedHasKey = hasRecoveryKey ?? recovery.hasRecoveryKey;
+  const label = useMemo(() => {
+    if (resolvedStatus === 'working') return 'Recovery syncing';
+    if (resolvedStatus === 'error') return 'Recovery error';
+    if (recovery.recoveryStatus?.hasIncompleteRestore) return 'Recovery pending';
+    if ((recovery.recoveryStatus?.channelsWithPermanentGaps.length || 0) > 0) return 'Recovery has gaps';
+    return resolvedHasKey ? 'Recovery ready' : 'Recovery locked';
+  }, [recovery.recoveryStatus, resolvedHasKey, resolvedStatus]);
+
+  return (
+    <span className={`ermis-recovery-status ermis-recovery-status--${resolvedStatus}${className ? ` ${className}` : ''}`}>
+      {label}
+    </span>
+  );
+};
+
+export const RecoveryGap: React.FC<RecoveryGapProps> = ({ epoch, reason, className }) => (
+  <div className={`ermis-recovery-gap${className ? ` ${className}` : ''}`}>
+    {epoch !== undefined ? `Epoch ${epoch}: ` : ''}{reason}
+  </div>
+);
+
+export const RecoveryGate: React.FC<RecoveryGateProps> = ({ onSkip, className }) => {
+  const recovery = useRecoveryPin();
+  const [skipped, setSkipped] = useState(false);
+  const status = recovery.recoveryStatus;
+  if (skipped || !status) return null;
+
+  const skip = () => {
+    setSkipped(true);
+    onSkip?.();
+  };
+
+  if (!status.hasVault) {
+    return (
+      <div className={`ermis-recovery-gate${className ? ` ${className}` : ''}`} role="dialog" aria-modal="true">
+        <RecoveryPinSetup onComplete={recovery.refresh} />
+        <button className="ermis-recovery-pin__button ermis-recovery-pin__button--secondary" type="button" onClick={skip}>
+          Skip
+        </button>
+      </div>
+    );
+  }
+
+  if (!status.unlocked && status.hasIncompleteRestore) {
+    return (
+      <div className={`ermis-recovery-gate${className ? ` ${className}` : ''}`} role="dialog" aria-modal="true">
+        <RecoveryPinRestore onComplete={recovery.refresh} />
+        <button className="ermis-recovery-pin__button ermis-recovery-pin__button--secondary" type="button" onClick={skip}>
+          Skip
+        </button>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export const RecoveryRestoreProgress: React.FC<RecoveryRestoreProgressProps> = ({
+  restoredEpochs,
+  totalEpochs,
+  gaps = [],
+  className,
+}) => (
+  <div className={`ermis-recovery-progress${className ? ` ${className}` : ''}`}>
+    <div className="ermis-recovery-progress__summary">
+      {restoredEpochs}/{totalEpochs} epochs restored
+    </div>
+    {gaps.map((gap, index) => (
+      <RecoveryGap key={`${gap.epoch ?? 'gap'}-${index}`} epoch={gap.epoch} reason={gap.reason} />
+    ))}
+  </div>
+);

package/src/components/RecoveryPin/index.ts

@@ -0,0 +1,19 @@
+export {
+  RecoveryPinSetup,
+  RecoveryPinRestore,
+  RecoveryPinChange,
+  RecoveryStatus,
+  RecoveryGap,
+  RecoveryGate,
+  RecoveryRestoreProgress,
+} from './RecoveryPin';
+
+export type {
+  RecoveryPinSetupProps,
+  RecoveryPinRestoreProps,
+  RecoveryPinChangeProps,
+  RecoveryStatusProps,
+  RecoveryGapProps,
+  RecoveryGateProps,
+  RecoveryRestoreProgressProps,
+} from './RecoveryPin';