@callpromn/rtc-kit-react 0.0.2

package/LICENSE.txt

@@ -0,0 +1,32 @@
+SOFTWARE LICENSE AGREEMENT
+
+Copyright © 2025 CallPro LLC. All rights reserved.
+
+This Software License Agreement (“Agreement”) is a legal agreement between you (“Licensee”) and CallPro LLC (“Licensor”) for the use of the "rtc-kit-react" software (“Software”). By installing, copying, or otherwise using the Software, you agree to be bound by the terms of this Agreement.
+
+1. Grant of License
+Licensor grants Licensee a non-exclusive, non-transferable, revocable license to use the Software solely for the purpose of developing applications that interact with or make use of the Software’s functionality.
+
+2. Restrictions
+Licensee shall not, directly or indirectly:
+a. Copy, modify, adapt, translate, or create derivative works of the Software.
+b. Reverse-engineer, decompile, disassemble, or otherwise attempt to discover the source code of the Software.
+c. Distribute, sublicense, rent, lease, or sell the Software, in whole or in part, to any third party.
+d. Remove or alter any proprietary notices, labels, or marks from the Software.
+
+3. Ownership
+The Software is licensed, not sold. Licensor retains all rights, title, and interest in and to the Software, including all intellectual property rights therein.
+
+4. Termination
+This Agreement is effective until terminated. Licensor may terminate this Agreement at any time if Licensee breaches any provision. Upon termination, Licensee must cease all use of the Software and destroy all copies in its possession.
+
+5. Disclaimer of Warranty
+The Software is provided “AS IS” without warranty of any kind, whether express, implied, or statutory, including but not limited to warranties of merchantability, fitness for a particular purpose, and non-infringement.
+
+6. Limitation of Liability
+In no event shall Licensor be liable for any indirect, incidental, consequential, special, or punitive damages arising out of or related to the use of the Software.
+
+7. Governing Law
+This Agreement shall be governed by and construed in accordance with the laws of Mongolia, without regard to conflict of law principles.
+
+BY USING THE SOFTWARE, YOU ACKNOWLEDGE THAT YOU HAVE READ THIS AGREEMENT, UNDERSTOOD IT, AND AGREE TO BE BOUND BY ITS TERMS.

package/README.md

@@ -0,0 +1,655 @@
+# RTC Kit UI React
+
+[![npm](https://badge.fury.io/js/@callpromn%2Frtc-kit-react.svg)](https://www.npmjs.com/package/@callpromn/rtc-kit-react)
+[![npm downloads](https://img.shields.io/npm/dm/@callpromn/rtc-kit-react.svg)](https://www.npmjs.com/package/@callpromn/rtc-kit-react)
+[![License](https://img.shields.io/npm/l/@callpromn/rtc-kit-react.svg)](https://www.npmjs.com/package/@callpromn/rtc-kit-react?activeTab=code)
+
+RTC Kit UI-ийн React компонентууд - TypeScript дэмжлэг болон интеграцлагдсан дуудлагын удирдлагатай "real-time communication" програм бүтээхэд зориулсан React сан юм.
+
+## Онцлогууд
+
+⚛️ **React-Анхдагч дизайн** - Hooks болон context бүхий React компонентууд  
+🔄 **Интеграцлагдсан дуудлагын удирдлага** - Дуудлагын төлөвийн зориулсан Built-in context provider  
+🎨 **Загвар дэмжлэг** - Тохируулга бүхий Light болон Dark mode  
+🔧 **Бүрэн TypeScript** - Complete type safety and IntelliSense  
+🪝 **React Hooks** - Дуудлагын төлөв удирдахад зориулсан тусгай hooks  
+🚀 **Гүйцэтгэл оновчтой** - Үр ашигтай дахин рендер болон санах ойн ашиглалт  
+
+## Суулгах - Installation
+
+```bash
+npm install @callpromn/rtc-kit-react
+```
+
+**Peer Dependencies:**
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0  
+- `rtc-sdk` >= 1.0.0
+
+## Quick start
+
+### 1. ClientProvider тохируулах
+
+Дуудлагын удирдлагыг идэвхжүүлэхийн тулд өөрийн project-ийг `ClientProvider`-аар wrap хийх ёстой:
+
+```tsx
+import React from 'react';
+import { ClientProvider } from '@callpromn/rtc-kit-react';
+
+const config = {
+    socketUrl: 'wss://your-rtc-server.com',
+    socketToken: 'your-socket-token',
+    phoneNumber: 'your-company-number',
+    socketConnectionOptions: undefined,
+    outboundRoom: 'out-bound-room-name',
+    inboundRoom: 'in-bound-room-name',
+};
+
+function App() {
+  return (
+    <ClientProvider config={config}>
+      <YourAppComponents />
+    </ClientProvider>
+  );
+}
+
+export default App;
+```
+
+### 2. RTC Компонентуудыг ашиглах
+
+```tsx
+import React, { useState } from 'react';
+import { 
+  CallButton, 
+  Numpad, 
+  NumberField, 
+  NumberDeleteButton,
+  useClientContext 
+} from '@callpromn/rtc-kit-react';
+
+function Dialer() {
+  const { isOutboundCall, isCallActive, toPhoneNumber, setToPhoneNumber } = useClientContext();
+
+  return (
+    <div className="dialer">
+      {/* Дугаар харуулах */}
+      <NumberField 
+        phoneNumber={toPhoneNumber}
+        theme="dark"
+      />
+      
+      {/* Тоон самбар */}
+      <Numpad
+        phoneNumber={toPhoneNumber}
+        onNumberClick={setToPhoneNumber}
+        maxLength={15}
+        theme="dark"
+      />
+      
+      {/* Удирдлага */}
+      <div className="controls">
+        <NumberDeleteButton
+          phoneNumber={toPhoneNumber}
+          onClick={() => setToPhoneNumber(prev => prev.slice(0, -1))}
+          theme="dark"
+        />
+        
+        <CallButton
+          toPhoneNumber={toPhoneNumber}
+          disabled={!toPhoneNumber || isCallActive}
+          theme="dark"
+          onClick={() => console.log(`${toPhoneNumber} руу дуудаж байна`)}
+        />
+      </div>
+      
+      {/* Дуудлагын төлөв */}
+      {isOutboundCall && <p>Дуудаж байна...</p>}
+      {isCallActive && <p>Дуудлага идэвхтэй</p>}
+    </div>
+  );
+}
+```
+
+## Компонентууд
+
+### 🔗 ClientProvider
+
+Дуудлагын төлөв удирдлага болон RTC клиент.
+
+```tsx
+import { ClientProvider } from '@callpromn/rtc-kit-react';
+
+const config = {
+    socketUrl: 'wss://your-rtc-server.com',
+    socketToken: 'your-socket-token',
+    phoneNumber: 'your-company-number',
+    socketConnectionOptions: undefined,
+    outboundRoom: 'out-bound-room-name',
+    inboundRoom: 'in-bound-room-name',
+};
+
+<ClientProvider config={config}>
+  {children}
+</ClientProvider>
+```
+
+**Props:**
+- `config: CallClientConfig` - RTC клиентийн тохиргоо
+
+---
+
+### 🪝 useClientContext Hook
+
+Аппын бүх хэсэгт дуудлагын төлөв болон аргуудад хандах.
+
+```tsx
+import { useClientContext } from '@callpromn/rtc-kit-react';
+
+function CallStatus() {
+  const {
+    isIncomingCall,
+    isOutboundCall, 
+    isCallActive,
+    isConnected,
+    inboundUserData,
+    createCall,
+    acceptCall,
+    declineCall,
+    endCall,
+    toggleMic,
+    isMicOn
+  } = useClientContext();
+
+  return (
+    <div>
+      <p>Холбогдсон: {isConnected ? 'Тийм' : 'Үгүй'}</p>
+      <p>Дуудлага идэвхтэй: {isCallActive ? 'Тийм' : 'Үгүй'}</p>
+      {isIncomingCall && (
+        <div>
+          <p>Ирж буй дуудлага: {inboundUserData?.phoneNumber}</p>
+          <button onClick={acceptCall}>Хүлээн авах</button>
+          <button onClick={declineCall}>Татгалзах</button>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+**Буцаах утгууд:**
+- `isIncomingCall: boolean` - Ирж буй дуудлагын төлөв
+- `isOutboundCall: boolean` - Гарч буй дуудлагын төлөв  
+- `isCallActive: boolean` - Идэвхтэй дуудлагын төлөв
+- `isConnected: boolean` - Холболтын төлөв
+- `inboundUserData: object` - Ирж буй дуудагчийн өгөгдөл
+- `createCall(phoneNumber: string)` - Дуудлага эхлүүлэх
+- `acceptCall()` - Ирж буй дуудлагыг хүлээн авах
+- `declineCall()` - Ирж буй дуудлагыг татгалзах  
+- `endCall()` - Идэвхтэй дуудлагыг дуусгах
+- `toggleMic()` - Микрофоныг асаах/унтраах
+- `isMicOn: boolean` - Микрофоны төлөв
+
+---
+
+### 📞 CallButton
+
+Гадагшаа дуудлага хийх.
+
+```tsx
+import { CallButton } from '@callpromn/rtc-kit-react';
+
+<CallButton
+  toPhoneNumber="+1234567890"
+  disabled={false}
+  theme="dark"
+  onClick={(event) => console.log('Тусгай дарах боловсруулагч')}
+  style={{ borderRadius: '8px' }}
+/>
+```
+
+**Props:**
+- `toPhoneNumber?: string` - Залгах утасны дугаар
+- `disabled?: boolean` - Товчлуурыг идэвхгүй болгох
+- `theme?: 'light' | 'dark'` - Dark болон Light mode
+- `onClick?: (event) => void` - onClick функц
+- `style?: React.CSSProperties` - Inline styling загвар
+
+---
+
+### ✅ AcceptButton
+
+Ирж буй дуудлагыг хүлээн авах.
+
+```tsx
+import { AcceptButton } from '@callpromn/rtc-kit-react';
+
+<AcceptButton
+  disabled={!isIncomingCall}
+  theme="dark"
+  onClick={() => console.log('Дуудлага хүлээн авлаа')}
+/>
+```
+
+---
+
+### ❌ DeclineButton
+
+Ирж буй дуудлагыг таслах.
+
+```tsx
+import { DeclineButton } from '@callpromn/rtc-kit-react';
+
+<DeclineButton
+  disabled={!isIncomingCall}
+  theme="dark"
+  onClick={() => console.log('Дуудлагыг татгалзав')}
+/>
+```
+
+---
+
+### 📞 EndButton
+
+Идэвхтэй дуудлагыг дуусгах.
+
+```tsx
+import { EndButton } from '@callpromn/rtc-kit-react';
+
+<EndButton
+  disabled={!isCallActive}
+  theme="dark"
+  onClick={() => console.log('Дуудлагыг дуусгав')}
+/>
+```
+
+---
+
+### 🎙️ MicButton
+
+Дуудлагын үеэр микрофоныг асаах/унтраах.
+
+```tsx
+import { MicButton } from '@callpromn/rtc-kit-react';
+
+<MicButton
+  disabled={!isCallActive}
+  theme="dark"
+  onClick={() => console.log('Микрофоныг эргүүлэв')}
+/>
+```
+
+---
+
+### 🔢 Numpad
+
+Утасны дугаар оруулахад зориулсан интерактив тоон самбар.
+
+```tsx
+import { Numpad } from '@callpromn/rtc-kit-react';
+import { useClientContext } from '@callpromn/rtc-kit-react';
+
+const { toPhoneNumber, setToPhoneNumber } = useClientContext();
+
+<Numpad
+  phoneNumber={toPhoneNumber}
+  onNumberClick={setToPhoneNumber}
+  maxLength={15}
+  theme="dark"
+  style={{ margin: '20px' }}
+/>
+```
+
+**Props:**
+- `phoneNumber: string` - Залгах утасны дугаар
+- `onNumberClick: (value: string) => void` - onNumberClick функц
+- `maxLength?: number` - Оронын хамгийн их тоо (анхдагч: 8)
+- `theme?: 'light' | 'dark'` - Харагдах загвар
+- `style?: React.CSSProperties` - Inline styling загвар
+
+---
+
+### 📱 NumberField
+
+Залгах утасны дугаарыг харуулах.
+
+```tsx
+import { NumberField } from '@callpromn/rtc-kit-react';
+
+<NumberField
+  phoneNumber="1234567890"
+  theme="dark"
+/>
+```
+
+**Props:**
+- `phoneNumber: string` - Залгах утасны дугаар
+- `theme?: 'light' | 'dark'` - Dark болон Light mode
+- `style?: React.CSSProperties` - Inline styling загвар
+
+---
+
+### ⌫ NumberDeleteButton
+
+Дугаар устгах товчлуур.
+
+```tsx
+import { NumberDeleteButton } from '@callpromn/rtc-kit-react';
+
+<NumberDeleteButton
+  phoneNumber={phoneNumber}
+  onClick={() => setPhoneNumber(prev => prev.slice(0, -1))}
+  theme="dark"
+/>
+```
+
+**Props:**
+- `phoneNumber: string` - Залгах утасны дугаар
+- `onClick: () => void` - onClick функц
+- `theme?: 'light' | 'dark'` - Dark болон Light mode
+- `style?: React.CSSProperties` - Inline styling загвар
+
+## Бүрэн жишээ
+
+### Бүрэн функцтэй диалер компонент
+
+```tsx
+import React, { useState } from 'react';
+import {
+  ClientProvider,
+  CallButton,
+  AcceptButton,
+  DeclineButton,
+  EndButton,
+  MicButton,
+  Numpad,
+  NumberField,
+  NumberDeleteButton,
+  useClientContext
+} from '@callpromn/rtc-kit-react';
+import { CallClientConfig } from 'rtc-sdk';
+
+const config: CallClientConfig = {
+  apiUrl: 'wss://your-rtc-server.com',
+  apiKey: 'your-api-key',
+  userId: 'user123'
+};
+
+function DialerApp() {
+  return (
+    <ClientProvider config={config}>
+      <MainDialer />
+    </ClientProvider>
+  );
+}
+
+function MainDialer() {
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const {
+    isIncomingCall,
+    isOutboundCall,
+    isCallActive,
+    isConnected,
+    inboundUserData,
+    isMicOn
+  } = useClientContext();
+
+  const handleDeleteNumber = () => {
+    setPhoneNumber(prev => prev.slice(0, -1));
+  };
+
+  const clearNumber = () => {
+    setPhoneNumber('');
+  };
+
+  return (
+    <div className="dialer-app">
+      {/* Холболтын төлөв */}
+      <div className="status-bar">
+        <span>Төлөв: {isConnected ? '🟢 Холбогдсон' : '🔴 Салсан'}</span>
+      </div>
+
+      {/* Ирж буй дуудлагын UI */}
+      {isIncomingCall && (
+        <div className="incoming-call">
+          <h2>Ирж буй дуудлага</h2>
+          <p>Хэнээс: {inboundUserData?.phoneNumber || 'Үл мэдэгдэх'}</p>
+          <div className="call-actions">
+            <AcceptButton theme="dark" />
+            <DeclineButton theme="dark" />
+          </div>
+        </div>
+      )}
+
+      {/* Идэвхтэй дуудлагын UI */}
+      {isCallActive && (
+        <div className="active-call">
+          <h2>Дуудлага идэвхтэй</h2>
+          <div className="call-controls">
+            <MicButton theme="dark" />
+            <EndButton theme="dark" />
+          </div>
+          <p>Микрофон: {isMicOn ? '🎤 Асаалттай' : '🎤 Унтраалттай'}</p>
+        </div>
+      )}
+
+      {/* Диалерын UI (дуудлагагүй үед) */}
+      {!isCallActive && !isIncomingCall && (
+        <div className="dialer">
+          <NumberField 
+            phoneNumber={phoneNumber}
+            theme="dark"
+            className="number-display"
+          />
+          
+          <Numpad
+            phoneNumber={phoneNumber}
+            onNumberClick={setPhoneNumber}
+            maxLength={15}
+            theme="dark"
+          />
+          
+          <div className="dialer-actions">
+            <NumberDeleteButton
+              phoneNumber={phoneNumber}
+              onClick={handleDeleteNumber}
+              theme="dark"
+            />
+            
+            <CallButton
+              toPhoneNumber={phoneNumber}
+              disabled={!phoneNumber || !isConnected}
+              theme="dark"
+            />
+            
+            <button onClick={clearNumber} className="clear-btn">
+              Арилгах
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Гарч буй дуудлагын төлөв */}
+      {isOutboundCall && (
+        <div className="outbound-call">
+          <p>📞 {phoneNumber} руу дуудаж байна...</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DialerApp;
+```
+
+### Компонент загварын жишээнүүд
+
+```tsx
+// CallButton with custom styles
+<CallButton
+  toPhoneNumber={phoneNumber}
+  style={{
+    backgroundColor: '#007bff',
+    width: '80px',
+    height: '80px',
+    borderRadius: '50%',
+    boxShadow: '0 4px 20px rgba(0, 123, 255, 0.4)',
+    border: 'none',
+    transition: 'all 0.3s ease'
+  }}
+  theme="dark"
+/>
+
+// Numpad with glass effect styling
+<Numpad
+  phoneNumber={phoneNumber}
+  onNumberClick={setPhoneNumber}
+  style={{
+    background: 'rgba(255, 255, 255, 0.1)',
+    backdropFilter: 'blur(20px)',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    borderRadius: '20px',
+    padding: '25px',
+    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)'
+  }}
+  theme="dark"
+/>
+
+// NumberField with modern input styling
+<NumberField
+  phoneNumber={phoneNumber}
+  style={{
+    background: 'rgba(255, 255, 255, 0.05)',
+    border: '2px solid #007bff',
+    borderRadius: '12px',
+    padding: '16px 20px',
+    fontSize: '24px',
+    fontWeight: '600',
+    color: '#007bff',
+    textAlign: 'center',
+    minHeight: '60px',
+    backdropFilter: 'blur(10px)'
+  }}
+  theme="dark"
+/>
+
+// Button group with consistent styling
+<div style={{ display: 'flex', gap: '15px', justifyContent: 'center' }}>
+  <AcceptButton
+    style={{
+      background: '#28a745',
+      width: '70px',
+      height: '70px',
+      borderRadius: '50%',
+      boxShadow: '0 6px 20px rgba(40, 167, 69, 0.4)',
+      transition: 'all 0.3s ease'
+    }}
+    theme="dark"
+  />
+  <DeclineButton
+    style={{
+      background: '#dc3545',
+      width: '70px',
+      height: '70px',
+      borderRadius: '50%',
+      boxShadow: '0 6px 20px rgba(220, 53, 69, 0.4)',
+      transition: 'all 0.3s ease'
+    }}
+    theme="dark"
+  />
+  <EndButton
+    style={{
+      background: '#6c757d',
+      width: '70px',
+      height: '70px',
+      borderRadius: '50%',
+      boxShadow: '0 6px 20px rgba(108, 117, 125, 0.4)',
+      transition: 'all 0.3s ease'
+    }}
+    theme="dark"
+  />
+</div>
+```
+
+## TypeScript дэмжлэг
+
+Бүрэн TypeScript type тодорхойлолт багтсан:
+
+```tsx
+import type {
+  CallClient,
+  BaseButtonProps,
+  CallButtonProps,
+  AcceptButtonProps,
+  DeclineButtonProps,
+  EndButtonProps,
+  MicButtonProps,
+  NumpadProps,
+  NumberFieldProps,
+  NumberDeleteButtonProps,
+  ClientProviderProps
+} from '@callpromn/rtc-kit-react';
+```
+
+## Next.js интеграци
+
+```tsx
+// components/ClientWrapper.tsx
+'use client';
+
+import { ClientProvider } from '@callpromn/rtc-kit-react';
+
+const config = {
+    socketUrl: 'wss://your-rtc-server.com',
+    socketToken: 'your-socket-token',
+    phoneNumber: 'your-company-number',
+    socketConnectionOptions: undefined,
+    outboundRoom: 'out-bound-room-name',
+    inboundRoom: 'in-bound-room-name',
+};
+
+export function ClientWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <ClientProvider config={config}>
+      {children}
+    </ClientProvider>
+  );
+}
+```
+
+```tsx
+// app/page.tsx
+import { ClientWrapper } from '@/components/ClientWrapper';
+import { Dialer } from '@/components/Dialer';
+
+export default function Home() {
+  return (
+    <ClientWrapper>
+      <Dialer />
+    </ClientWrapper>
+  );
+}
+```
+
+## Шаардлага
+
+- React 18+
+- TypeScript 4.5+ (санал болгох)
+- Web Components дэмжлэг бүхий modern browser
+
+## Холбогдох сангууд - Related Packages
+
+- [`rtc-kit`](https://www.npmjs.com/package/@callpromn/rtc-kit) - Vanilla Web Components
+
+## Лиценз - License
+
+Энэ төсөл нь CallPro LLC-ийн өмчийн програм хангамж юм. Дэлгэрэнгүй мэдээллийг [LICENSE.txt](https://www.npmjs.com/package/@callpromn/rtc-kit-react?activeTab=code)-ээс үзнэ үү.
+
+## Дэмжлэг
+
+- 📧 И-мэйл: dev@callpro.mn
+- 📖 Баримт бичиг - documentation: [https://docs.callpro.mn](https://docs.callpro.mn)
+
+---
+
+Made with ❤️ by [CallPro LLC](https://callpro.mn)

package/dist/index.d.mts

@@ -0,0 +1,146 @@
+import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CallClientConfig } from '@callpromn/rtc-sdk';
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'call-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                'to-phone-number'?: string;
+                disabled?: boolean;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'accept-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                disabled?: boolean;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'decline-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                disabled?: boolean;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'endcall-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                disabled?: boolean;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'mic-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                disabled?: boolean;
+                'mic-on'?: string;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'rtc-numpad': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                'phone-number'?: string;
+                'max-length'?: string;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'rtc-number-field': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                'phone-number'?: string;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'rtc-number-delete-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                'phone-number'?: string;
+                visible?: string;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+        }
+    }
+}
+
+interface CallClient {
+    acceptCall(): Promise<void>;
+    createCall(phoneNumber: string): Promise<void>;
+    declineCall(): Promise<void>;
+    endCall(): Promise<void>;
+    toggleMic(): Promise<void>;
+}
+interface BaseButtonProps {
+    className?: string;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    theme?: 'light' | 'dark';
+}
+interface CallButtonProps extends BaseButtonProps {
+    toPhoneNumber?: string;
+}
+type MicButtonProps = BaseButtonProps;
+type AcceptButtonProps = BaseButtonProps;
+type DeclineButtonProps = BaseButtonProps;
+type EndButtonProps = BaseButtonProps;
+interface NumpadProps$1 {
+    phoneNumber: string;
+    onNumberClick: React.Dispatch<React.SetStateAction<string>>;
+    maxLength?: number;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+interface NumberFieldProps$1 {
+    phoneNumber: string;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+interface NumberDeleteButtonProps$1 {
+    phoneNumber: string;
+    onClick: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+interface ClientProviderProps {
+    children: React.ReactNode;
+}
+
+declare const AcceptButton: React$1.FC<AcceptButtonProps>;
+
+declare const CallButton: React$1.FC<CallButtonProps>;
+
+declare const DeclineButton: React$1.FC<DeclineButtonProps>;
+
+declare const EndButton: React$1.FC<EndButtonProps>;
+
+declare const MicButton: React$1.FC<MicButtonProps>;
+
+interface NumpadProps {
+    phoneNumber: string;
+    onNumberClick: React.Dispatch<React.SetStateAction<string>>;
+    maxLength?: number;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+declare const Numpad: React.FC<NumpadProps>;
+
+interface NumberFieldProps {
+    phoneNumber: string;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+declare const NumberField: React.FC<NumberFieldProps>;
+
+interface NumberDeleteButtonProps {
+    phoneNumber: string;
+    onClick: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+declare const NumberDeleteButton: React.FC<NumberDeleteButtonProps>;
+
+declare const ClientProvider: ({ children, config, }: {
+    children: React.ReactNode;
+    config: CallClientConfig;
+}) => react_jsx_runtime.JSX.Element;
+declare const useClientContext: () => any;
+
+export { AcceptButton, type AcceptButtonProps, type BaseButtonProps, CallButton, type CallButtonProps, type CallClient, ClientProvider, type ClientProviderProps, DeclineButton, type DeclineButtonProps, EndButton, type EndButtonProps, MicButton, type MicButtonProps, NumberDeleteButton, type NumberDeleteButtonProps$1 as NumberDeleteButtonProps, NumberField, type NumberFieldProps$1 as NumberFieldProps, Numpad, type NumpadProps$1 as NumpadProps, useClientContext };

package/dist/index.d.ts

@@ -0,0 +1,146 @@
+import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CallClientConfig } from '@callpromn/rtc-sdk';
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'call-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                'to-phone-number'?: string;
+                disabled?: boolean;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'accept-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                disabled?: boolean;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'decline-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                disabled?: boolean;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'endcall-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                disabled?: boolean;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'mic-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                disabled?: boolean;
+                'mic-on'?: string;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'rtc-numpad': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                'phone-number'?: string;
+                'max-length'?: string;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'rtc-number-field': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                'phone-number'?: string;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+            'rtc-number-delete-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                'phone-number'?: string;
+                visible?: string;
+                style?: React.CSSProperties;
+                theme?: 'light' | 'dark';
+            };
+        }
+    }
+}
+
+interface CallClient {
+    acceptCall(): Promise<void>;
+    createCall(phoneNumber: string): Promise<void>;
+    declineCall(): Promise<void>;
+    endCall(): Promise<void>;
+    toggleMic(): Promise<void>;
+}
+interface BaseButtonProps {
+    className?: string;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    theme?: 'light' | 'dark';
+}
+interface CallButtonProps extends BaseButtonProps {
+    toPhoneNumber?: string;
+}
+type MicButtonProps = BaseButtonProps;
+type AcceptButtonProps = BaseButtonProps;
+type DeclineButtonProps = BaseButtonProps;
+type EndButtonProps = BaseButtonProps;
+interface NumpadProps$1 {
+    phoneNumber: string;
+    onNumberClick: React.Dispatch<React.SetStateAction<string>>;
+    maxLength?: number;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+interface NumberFieldProps$1 {
+    phoneNumber: string;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+interface NumberDeleteButtonProps$1 {
+    phoneNumber: string;
+    onClick: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+interface ClientProviderProps {
+    children: React.ReactNode;
+}
+
+declare const AcceptButton: React$1.FC<AcceptButtonProps>;
+
+declare const CallButton: React$1.FC<CallButtonProps>;
+
+declare const DeclineButton: React$1.FC<DeclineButtonProps>;
+
+declare const EndButton: React$1.FC<EndButtonProps>;
+
+declare const MicButton: React$1.FC<MicButtonProps>;
+
+interface NumpadProps {
+    phoneNumber: string;
+    onNumberClick: React.Dispatch<React.SetStateAction<string>>;
+    maxLength?: number;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+declare const Numpad: React.FC<NumpadProps>;
+
+interface NumberFieldProps {
+    phoneNumber: string;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+declare const NumberField: React.FC<NumberFieldProps>;
+
+interface NumberDeleteButtonProps {
+    phoneNumber: string;
+    onClick: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+    theme?: 'light' | 'dark';
+}
+declare const NumberDeleteButton: React.FC<NumberDeleteButtonProps>;
+
+declare const ClientProvider: ({ children, config, }: {
+    children: React.ReactNode;
+    config: CallClientConfig;
+}) => react_jsx_runtime.JSX.Element;
+declare const useClientContext: () => any;
+
+export { AcceptButton, type AcceptButtonProps, type BaseButtonProps, CallButton, type CallButtonProps, type CallClient, ClientProvider, type ClientProviderProps, DeclineButton, type DeclineButtonProps, EndButton, type EndButtonProps, MicButton, type MicButtonProps, NumberDeleteButton, type NumberDeleteButtonProps$1 as NumberDeleteButtonProps, NumberField, type NumberFieldProps$1 as NumberFieldProps, Numpad, type NumpadProps$1 as NumpadProps, useClientContext };

package/dist/index.js

@@ -0,0 +1,2 @@
+'use strict';var rtcSdk=require('@callpromn/rtc-sdk'),react=require('react'),jsxRuntime=require('react/jsx-runtime');var P=react.createContext(null),q=({children:t,config:a})=>{let o=rtcSdk.CallClient(),e=react.useRef(null),[c,l]=react.useState(null),[s,n]=react.useState(false),[i,r]=react.useState(false),[m,C]=react.useState(false),[p,d]=react.useState(false),[h,S]=react.useState(""),[v,D]=react.useState(true);react.useEffect(()=>{w();},[]);let w=async()=>{try{e.current=await o.createClient(a),e.current.on("call_init",async f=>{if(f==="incoming"){let U=await e.current.getInboundUserData();l(U),n(!0);}}),e.current.on("hangup",()=>{console.log("\u{1F4DE} [CallClientProvider] \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u0433 \u0442\u0430\u0441\u0430\u043B\u043B\u0430\u0430."),n(!1),r(!1),d(!1);}),e.current.on("busy",()=>{console.log("\u{1F4DE} [CallClientProvider] \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u0433 \u0430\u0432\u0430\u0445\u044B\u0433 \u0442\u0430\u0442\u0433\u0430\u043B\u0437\u043B\u0430\u0430."),n(!1),r(!1),d(!1);}),e.current.on("answered",()=>{console.log("\u{1F4DE} [CallClientProvider] \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u0433 \u0445\u04AF\u043B\u044D\u044D\u0436 \u0430\u0432\u043B\u0430\u0430."),n(!1),r(!1),d(!0);}),e.current.on("bye",()=>{console.log("\u{1F4DE} [CallClientProvider] \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u0433 \u0442\u0430\u0441\u0430\u043B\u043B\u0430\u0430."),n(!1),r(!1),d(!1);}),C(e.current.isConnected()),console.log("\u2705 \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u043D \u043A\u043B\u0438\u0435\u043D\u0442 \u0430\u043C\u0436\u0438\u043B\u0442\u0442\u0430\u0439 \u0445\u043E\u043B\u0431\u043E\u0433\u0434\u043E\u0436 \u0431\u044D\u043B\u044D\u043D \u0431\u043E\u043B\u043B\u043E\u043E.");}catch(f){console.error("\u274C \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u043D \u043A\u043B\u0438\u0435\u043D\u0442 \u04AF\u04AF\u0441\u0433\u044D\u0445\u044D\u0434 \u0430\u043B\u0434\u0430\u0430 \u0433\u0430\u0440\u043B\u0430\u0430:",f);}},x=async()=>{e.current&&(await e.current.declineCall(),n(false));},F=async()=>{e.current&&(await e.current.acceptCall(),n(false),r(false),d(true));},A=async f=>{e.current&&(await e.current.createCall(f),r(true));},I=async()=>{e.current&&(await e.current.endCall(),d(false),r(false));},O=async()=>{e.current&&await e.current.toggleMic();},W=()=>{C(false),setTimeout(()=>{if(e.current){let f=e.current.isConnected();return C(f),console.log(`\u{1F50C} \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u043D \u0441\u0435\u0440\u0432\u0435\u0440: ${f?"\u0425\u043E\u043B\u0431\u043E\u0433\u0434\u0441\u043E\u043D":"\u0425\u043E\u043B\u0431\u043E\u0433\u0434\u043E\u043E\u0433\u04AF\u0439"}`),f}return  false},1e3);};return jsxRuntime.jsx(P.Provider,{value:{isIncomingCall:s,isOutboundCall:i,isConnected:m,isCallActive:p,checkConnectionStatus:W,inboundUserData:c,declineCall:x,acceptCall:F,createCall:A,endCall:I,toggleMic:O,toPhoneNumber:h,setToPhoneNumber:S,isMicOn:v,setIsMicOn:D},children:t})},u=()=>{let t=react.useContext(P);if(!t)throw new Error("useClientContext-\u0433 \u0437\u04E9\u0432\u0445\u04E9\u043D ClientProvider-\u0438\u0439\u043D \u0434\u043E\u0442\u043E\u0440 \u0430\u0448\u0438\u0433\u043B\u0430\u0445 \u0451\u0441\u0442\u043E\u0439!");return t};var G=({className:t="",disabled:a,onClick:o,style:e,theme:c="dark",...l})=>{let{acceptCall:s}=u();return jsxRuntime.jsx("accept-button",{disabled:a,className:t,onClick:async i=>{try{await s(),o&&o(i);}catch(r){console.error("Failed to accept call:",r);}},style:e,theme:c,...l})},R=G;var Q=({toPhoneNumber:t="",className:a="",disabled:o,onClick:e,style:c,theme:l="dark",...s})=>{let{createCall:n}=u();return jsxRuntime.jsx("call-button",{"to-phone-number":t,disabled:o,className:a,onClick:async r=>{try{t&&await n(t),e&&e(r);}catch(m){console.error("Failed to create call:",m);}},style:c,theme:l,...s})},g=Q;var Z=({className:t="",disabled:a,onClick:o,style:e,...c})=>{let{declineCall:l}=u();return jsxRuntime.jsx("decline-button",{disabled:a,className:t,onClick:async n=>{try{await l(),o&&o(n);}catch(i){console.error("Failed to decline call:",i);}},style:e,...c})},M=Z;var ee=({className:t="",disabled:a,onClick:o,style:e,...c})=>{let{endCall:l}=u();return jsxRuntime.jsx("endcall-button",{disabled:a,className:t,onClick:async n=>{try{await l(),o&&o(n);}catch(i){console.error("Failed to end call:",i);}},style:e,...c})},E=ee;var ne=({className:t="",disabled:a,onClick:o,style:e,...c})=>{let{toggleMic:l,isMicOn:s,setIsMicOn:n}=u();return jsxRuntime.jsx("mic-button",{disabled:a,"mic-on":s?"":void 0,className:t,onClick:async r=>{try{await l(),n(!s),o&&o(r);}catch(m){console.error("Failed to toggle mic:",m);}},style:e,...c})},B=ne;var se=({phoneNumber:t,onNumberClick:a,maxLength:o=8,style:e,className:c,theme:l="dark"})=>{let s=react.useRef(null),[n,i]=react.useState(false);return react.useEffect(()=>{typeof window<"u"&&import('@callpromn/rtc-kit').then(()=>{customElements.get("rtc-numpad")?i(true):customElements.whenDefined("rtc-numpad").then(()=>{i(true);});}).catch(console.error);},[]),react.useEffect(()=>{let r=s.current;if(!r||!n)return;let m=C=>{let p=C;if(p.detail){let{value:d}=p.detail;a(h=>h.length<o?h+d:h);}};return r.addEventListener("number-click",m),()=>{r.removeEventListener("number-click",m);}},[a,o,n]),react.useEffect(()=>{if(s.current&&n){let r=s.current;r.setPhoneNumber&&r.setPhoneNumber(t);}},[t,n]),n?jsxRuntime.jsx("rtc-numpad",{ref:s,"phone-number":t,"max-length":o.toString(),style:e,className:c,theme:l}):null},T=se;var ue=({phoneNumber:t,style:a,className:o,theme:e="dark"})=>{let c=react.useRef(null),[l,s]=react.useState(false);return react.useEffect(()=>{typeof window<"u"&&import('@callpromn/rtc-kit').then(()=>{customElements.get("rtc-number-field")?s(true):customElements.whenDefined("rtc-number-field").then(()=>{s(true);});}).catch(console.error);},[]),react.useEffect(()=>{if(c.current&&l){let n=c.current;n.setPhoneNumber&&n.setPhoneNumber(t);}},[t,l]),l?jsxRuntime.jsx("rtc-number-field",{ref:c,"phone-number":t,style:a,className:o,theme:e}):null},N=ue;var pe=({phoneNumber:t,onClick:a,style:o,className:e,theme:c="dark"})=>{let{toPhoneNumber:l,setToPhoneNumber:s}=u(),n=react.useRef(null),[i,r]=react.useState(false),m=t.length>0;react.useEffect(()=>{typeof window<"u"&&import('@callpromn/rtc-kit').then(()=>{customElements.get("rtc-number-delete-button")?r(true):customElements.whenDefined("rtc-number-delete-button").then(()=>{r(true);});}).catch(console.error);},[]);let C=async p=>{try{l&&s(l.slice(0,-1)),a&&a();}catch(d){console.error("Failed to create call:",d);}};return react.useEffect(()=>{if(n.current&&i){let p=n.current;p.setPhoneNumber&&p.setPhoneNumber(t);}},[t,i]),!i||!m?null:jsxRuntime.jsx("rtc-number-delete-button",{ref:n,"phone-number":t,visible:m.toString(),style:o,className:e,theme:c,onClick:C})},k=pe;exports.AcceptButton=R;exports.CallButton=g;exports.ClientProvider=q;exports.DeclineButton=M;exports.EndButton=E;exports.MicButton=B;exports.NumberDeleteButton=k;exports.NumberField=N;exports.Numpad=T;exports.useClientContext=u;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context/ClientProvider.tsx","../src/components/AcceptButton.tsx","../src/components/CallButton.tsx","../src/components/DeclineButton.tsx","../src/components/EndButton.tsx","../src/components/MicButton.tsx","../src/components/Numpad.tsx","../src/components/NumberField.tsx","../src/components/NumberDeleteButton.tsx"],"names":["ClientContext","createContext","ClientProvider","children","config","callClient","CallClient","callClientInstance","useRef","inboundUserData","setInboundUserData","useState","isIncomingCall","setIsIncomingCall","isOutboundCall","setIsOutboundCall","isConnected","setIsConnected","isCallActive","setIsCallActive","toPhoneNumber","setToPhoneNumber","isMicOn","setIsMicOn","useEffect","createCallClient","data","error","declineCall","acceptCall","createCall","endCall","toggleMic","checkConnectionStatus","connected","jsx","useClientContext","context","useContext","AcceptButton","className","disabled","onClick","style","theme","props","event","AcceptButton_default","CallButton","CallButton_default","DeclineButton","DeclineButton_default","EndButton","EndButton_default","MicButton","MicButton_default","Numpad","phoneNumber","onNumberClick","maxLength","numpadRef","isWebComponentReady","setIsWebComponentReady","numpadElement","handleNumberClick","customEvent","value","prev","webComponent","Numpad_default","NumberField","numberFieldRef","NumberField_default","NumberDeleteButton","deleteButtonRef","isVisible","handleClick","NumberDeleteButton_default"],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\nimport { CallClientConfig, CallClient } from '@callpromn/rtc-sdk';\nimport { createContext, useContext, useEffect, useRef, useState } from 'react';\n\nconst ClientContext = createContext<any>(null);\n\nconst ClientProvider = ({\n  children,\n  config,\n}: {\n  children: React.ReactNode;\n  config: CallClientConfig;\n}) => {\n  const callClient = CallClient();\n  const callClientInstance = useRef<any>(null);\n\n  const [inboundUserData, setInboundUserData] = useState<any>(null);\n  const [isIncomingCall, setIsIncomingCall] = useState(false);\n  const [isOutboundCall, setIsOutboundCall] = useState(false);\n  const [isConnected, setIsConnected] = useState(false);\n  const [isCallActive, setIsCallActive] = useState(false);\n  const [toPhoneNumber, setToPhoneNumber] = useState('');\n  const [isMicOn, setIsMicOn] = useState(true);\n\n  useEffect(() => {\n    createCallClient();\n  }, []);\n\n  const createCallClient = async () => {\n    try {\n      callClientInstance.current = await callClient.createClient(config);\n\n      callClientInstance.current.on('call_init', async (data: any) => {\n        if (data === 'incoming') {\n          const inboundUserData =\n            await callClientInstance.current.getInboundUserData();\n          setInboundUserData(inboundUserData);\n          setIsIncomingCall(true);\n        }\n      });\n\n      callClientInstance.current.on('hangup', () => {\n        console.log('📞 [CallClientProvider] Дуудлагыг тасаллаа.');\n        setIsIncomingCall(false);\n        setIsOutboundCall(false);\n        setIsCallActive(false);\n      });\n\n      callClientInstance.current.on('busy', () => {\n        console.log('📞 [CallClientProvider] Дуудлагыг авахыг татгалзлаа.');\n        setIsIncomingCall(false);\n        setIsOutboundCall(false);\n        setIsCallActive(false);\n      });\n\n      callClientInstance.current.on('answered', () => {\n        console.log('📞 [CallClientProvider] Дуудлагыг хүлээж авлаа.');\n        setIsIncomingCall(false);\n        setIsOutboundCall(false);\n        setIsCallActive(true);\n      });\n\n      callClientInstance.current.on('bye', () => {\n        console.log('📞 [CallClientProvider] Дуудлагыг тасаллаа.');\n        setIsIncomingCall(false);\n        setIsOutboundCall(false);\n        setIsCallActive(false);\n      });\n\n      // Socket-ын холболтын төлөвийг шалгах\n      setIsConnected(callClientInstance.current.isConnected());\n      console.log('✅ Дуудлагын клиент амжилттай холбогдож бэлэн боллоо.');\n    } catch (error) {\n      console.error('❌ Дуудлагын клиент үүсгэхэд алдаа гарлаа:', error);\n    }\n  };\n\n  const declineCall = async () => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.declineCall();\n      setIsIncomingCall(false);\n    }\n  };\n\n  const acceptCall = async () => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.acceptCall();\n      setIsIncomingCall(false);\n      setIsOutboundCall(false);\n      setIsCallActive(true);\n    }\n  };\n\n  const createCall = async (toPhoneNumber: string) => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.createCall(toPhoneNumber);\n      setIsOutboundCall(true);\n    }\n  };\n\n  const endCall = async () => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.endCall();\n      setIsCallActive(false);\n      setIsOutboundCall(false);\n    }\n  };\n\n  const toggleMic = async () => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.toggleMic();\n    }\n  };\n\n  const checkConnectionStatus = () => {\n    setIsConnected(false);\n    setTimeout(() => {\n      if (callClientInstance.current) {\n        const connected = callClientInstance.current.isConnected();\n        setIsConnected(connected);\n        console.log(\n          `🔌 Дуудлагын сервер: ${connected ? 'Холбогдсон' : 'Холбогдоогүй'}`\n        );\n        return connected;\n      }\n      return false;\n    }, 1000);\n  };\n\n  return (\n    <ClientContext.Provider\n      value={{\n        isIncomingCall,\n        isOutboundCall,\n        isConnected,\n        isCallActive,\n        checkConnectionStatus,\n        inboundUserData,\n        declineCall,\n        acceptCall,\n        createCall,\n        endCall,\n        toggleMic,\n        toPhoneNumber,\n        setToPhoneNumber,\n        isMicOn,\n        setIsMicOn,\n      }}\n    >\n      {children}\n    </ClientContext.Provider>\n  );\n};\n\nconst useClientContext = () => {\n  const context = useContext(ClientContext);\n  if (!context) {\n    throw new Error(\n      'useClientContext-г зөвхөн ClientProvider-ийн дотор ашиглах ёстой!'\n    );\n  }\n  return context;\n};\n\nexport { ClientProvider, useClientContext };\n","import React from 'react';\nimport '../types/web-components';\nimport { AcceptButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst AcceptButton: React.FC<AcceptButtonProps> = ({\n  className = '',\n  disabled,\n  onClick,\n  style,\n  theme = 'dark',\n  ...props\n}) => {\n  const { acceptCall } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      await acceptCall();\n\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to accept call:', error);\n    }\n  };\n\n  return (\n    <accept-button\n      disabled={disabled}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      theme={theme}\n      {...props}\n    />\n  );\n};\n\nexport default AcceptButton;\n","import React from 'react';\nimport '../types/web-components';\nimport { CallButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst CallButton: React.FC<CallButtonProps> = ({\n  toPhoneNumber = '',\n  className = '',\n  disabled,\n  onClick,\n  style,\n  theme = 'dark',\n  ...props\n}) => {\n  const { createCall } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      if (toPhoneNumber) await createCall(toPhoneNumber);\n\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to create call:', error);\n    }\n  };\n\n  return (\n    <call-button\n      to-phone-number={toPhoneNumber}\n      disabled={disabled}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      theme={theme}\n      {...props}\n    />\n  );\n};\n\nexport default CallButton;\n","import React from 'react';\nimport '../types/web-components';\nimport { DeclineButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst DeclineButton: React.FC<DeclineButtonProps> = ({\n  className = '',\n  disabled,\n  onClick,\n  style,\n  ...props\n}) => {\n  const { declineCall } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      await declineCall();\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to decline call:', error);\n    }\n  };\n\n  return (\n    <decline-button\n      disabled={disabled}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      {...props}\n    />\n  );\n};\n\nexport default DeclineButton;\n","import React from 'react';\nimport '../types/web-components';\nimport { EndButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst EndButton: React.FC<EndButtonProps> = ({\n  className = '',\n  disabled,\n  onClick,\n  style,\n  ...props\n}) => {\n  const { endCall } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      await endCall();\n\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to end call:', error);\n    }\n  };\n\n  return (\n    <endcall-button\n      disabled={disabled}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      {...props}\n    />\n  );\n};\n\nexport default EndButton;\n","import React from 'react';\nimport '../types/web-components';\nimport { MicButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst MicButton: React.FC<MicButtonProps> = ({\n  className = '',\n  disabled,\n  onClick,\n  style,\n  ...props\n}) => {\n  const { toggleMic, isMicOn, setIsMicOn } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      await toggleMic();\n      setIsMicOn(!isMicOn);\n\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to toggle mic:', error);\n    }\n  };\n\n  return (\n    <mic-button\n      disabled={disabled}\n      mic-on={isMicOn ? '' : undefined}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      {...props}\n    />\n  );\n};\n\nexport default MicButton;\n","'use client';\n\nimport '../types/web-components';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface NumpadProps {\n  phoneNumber: string;\n  onNumberClick: React.Dispatch<React.SetStateAction<string>>;\n  maxLength?: number;\n  style?: React.CSSProperties;\n  className?: string;\n  theme?: 'light' | 'dark';\n}\n\nconst Numpad: React.FC<NumpadProps> = ({\n  phoneNumber,\n  onNumberClick,\n  maxLength = 8,\n  style,\n  className,\n  theme = 'dark',\n}) => {\n  const numpadRef = useRef<HTMLElement>(null);\n  const [isWebComponentReady, setIsWebComponentReady] = useState(false);\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      import('@callpromn/rtc-kit')\n        .then(() => {\n          // Wait for the web component to be defined\n          if (customElements.get('rtc-numpad')) {\n            setIsWebComponentReady(true);\n          } else {\n            customElements.whenDefined('rtc-numpad').then(() => {\n              setIsWebComponentReady(true);\n            });\n          }\n        })\n        .catch(console.error);\n    }\n  }, []);\n\n  useEffect(() => {\n    const numpadElement = numpadRef.current;\n    if (!numpadElement || !isWebComponentReady) return;\n\n    const handleNumberClick = (event: Event) => {\n      const customEvent = event as CustomEvent<{\n        value: string;\n        phoneNumber: string;\n      }>;\n      if (customEvent.detail) {\n        const { value } = customEvent.detail;\n        onNumberClick((prev: string) => {\n          if (prev.length < maxLength) {\n            return prev + value;\n          }\n          return prev;\n        });\n      }\n    };\n\n    numpadElement.addEventListener('number-click', handleNumberClick);\n\n    return () => {\n      numpadElement.removeEventListener('number-click', handleNumberClick);\n    };\n  }, [onNumberClick, maxLength, isWebComponentReady]);\n\n  // Sync phoneNumber prop with web component attribute\n  useEffect(() => {\n    if (numpadRef.current && isWebComponentReady) {\n      const webComponent = numpadRef.current as any;\n      if (webComponent.setPhoneNumber) {\n        webComponent.setPhoneNumber(phoneNumber);\n      }\n    }\n  }, [phoneNumber, isWebComponentReady]);\n\n  if (!isWebComponentReady) {\n    // Loading fallback while web component loads\n    return null;\n  }\n\n  return (\n    <rtc-numpad\n      ref={numpadRef}\n      phone-number={phoneNumber}\n      max-length={maxLength.toString()}\n      style={style}\n      className={className}\n      theme={theme}\n    />\n  );\n};\n\nexport default Numpad;\n","'use client';\n\nimport '../types/web-components';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface NumberFieldProps {\n  phoneNumber: string;\n  style?: React.CSSProperties;\n  className?: string;\n  theme?: 'light' | 'dark';\n}\n\nconst NumberField: React.FC<NumberFieldProps> = ({\n  phoneNumber,\n  style,\n  className,\n  theme = 'dark',\n}) => {\n  const numberFieldRef = useRef<HTMLElement>(null);\n  const [isWebComponentReady, setIsWebComponentReady] = useState(false);\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      import('@callpromn/rtc-kit')\n        .then(() => {\n          // Wait for the web component to be defined\n          if (customElements.get('rtc-number-field')) {\n            setIsWebComponentReady(true);\n          } else {\n            customElements.whenDefined('rtc-number-field').then(() => {\n              setIsWebComponentReady(true);\n            });\n          }\n        })\n        .catch(console.error);\n    }\n  }, []);\n\n  // Sync phoneNumber prop with web component attribute\n  useEffect(() => {\n    if (numberFieldRef.current && isWebComponentReady) {\n      const webComponent = numberFieldRef.current as any;\n      if (webComponent.setPhoneNumber) {\n        webComponent.setPhoneNumber(phoneNumber);\n      }\n    }\n  }, [phoneNumber, isWebComponentReady]);\n\n  if (!isWebComponentReady) {\n    // Loading fallback while web component loads\n    return null;\n  }\n\n  return (\n    <rtc-number-field\n      ref={numberFieldRef}\n      phone-number={phoneNumber}\n      style={style}\n      className={className}\n      theme={theme}\n    />\n  );\n};\n\nexport default NumberField;\n","'use client';\n\nimport '../types/web-components';\nimport { useEffect, useRef, useState } from 'react';\nimport { useClientContext } from '../context/ClientProvider';\n\ninterface NumberDeleteButtonProps {\n  phoneNumber: string;\n  onClick: () => void;\n  style?: React.CSSProperties;\n  className?: string;\n  theme?: 'light' | 'dark';\n}\n\nconst NumberDeleteButton: React.FC<NumberDeleteButtonProps> = ({\n  phoneNumber,\n  onClick,\n  style,\n  className,\n  theme = 'dark',\n}) => {\n  const { toPhoneNumber, setToPhoneNumber } = useClientContext();\n  const deleteButtonRef = useRef<HTMLElement>(null);\n  const [isWebComponentReady, setIsWebComponentReady] = useState(false);\n  const isVisible = phoneNumber.length > 0;\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      import('@callpromn/rtc-kit')\n        .then(() => {\n          // Wait for the web component to be defined\n          if (customElements.get('rtc-number-delete-button')) {\n            setIsWebComponentReady(true);\n          } else {\n            customElements.whenDefined('rtc-number-delete-button').then(() => {\n              setIsWebComponentReady(true);\n            });\n          }\n        })\n        .catch(console.error);\n    }\n  }, []);\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      if (toPhoneNumber) setToPhoneNumber(toPhoneNumber.slice(0, -1));\n      if (onClick) onClick();\n    } catch (error) {\n      console.error('Failed to create call:', error);\n    }\n  };\n\n  // Sync phoneNumber prop with web component attribute\n  useEffect(() => {\n    if (deleteButtonRef.current && isWebComponentReady) {\n      const webComponent = deleteButtonRef.current as any;\n      if (webComponent.setPhoneNumber) {\n        webComponent.setPhoneNumber(phoneNumber);\n      }\n    }\n  }, [phoneNumber, isWebComponentReady]);\n\n  if (!isWebComponentReady || !isVisible) {\n    return null;\n  }\n\n  return (\n    <rtc-number-delete-button\n      ref={deleteButtonRef}\n      phone-number={phoneNumber}\n      visible={isVisible.toString()}\n      style={style}\n      className={className}\n      theme={theme}\n      onClick={handleClick}\n    />\n  );\n};\n\nexport default NumberDeleteButton;\n"]}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import {CallClient}from'@callpromn/rtc-sdk';import {createContext,useRef,useState,useEffect,useContext}from'react';import {jsx}from'react/jsx-runtime';var P=createContext(null),q=({children:t,config:a})=>{let o=CallClient(),e=useRef(null),[c,l]=useState(null),[s,n]=useState(false),[i,r]=useState(false),[m,C]=useState(false),[p,d]=useState(false),[h,S]=useState(""),[v,D]=useState(true);useEffect(()=>{w();},[]);let w=async()=>{try{e.current=await o.createClient(a),e.current.on("call_init",async f=>{if(f==="incoming"){let U=await e.current.getInboundUserData();l(U),n(!0);}}),e.current.on("hangup",()=>{console.log("\u{1F4DE} [CallClientProvider] \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u0433 \u0442\u0430\u0441\u0430\u043B\u043B\u0430\u0430."),n(!1),r(!1),d(!1);}),e.current.on("busy",()=>{console.log("\u{1F4DE} [CallClientProvider] \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u0433 \u0430\u0432\u0430\u0445\u044B\u0433 \u0442\u0430\u0442\u0433\u0430\u043B\u0437\u043B\u0430\u0430."),n(!1),r(!1),d(!1);}),e.current.on("answered",()=>{console.log("\u{1F4DE} [CallClientProvider] \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u0433 \u0445\u04AF\u043B\u044D\u044D\u0436 \u0430\u0432\u043B\u0430\u0430."),n(!1),r(!1),d(!0);}),e.current.on("bye",()=>{console.log("\u{1F4DE} [CallClientProvider] \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u0433 \u0442\u0430\u0441\u0430\u043B\u043B\u0430\u0430."),n(!1),r(!1),d(!1);}),C(e.current.isConnected()),console.log("\u2705 \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u043D \u043A\u043B\u0438\u0435\u043D\u0442 \u0430\u043C\u0436\u0438\u043B\u0442\u0442\u0430\u0439 \u0445\u043E\u043B\u0431\u043E\u0433\u0434\u043E\u0436 \u0431\u044D\u043B\u044D\u043D \u0431\u043E\u043B\u043B\u043E\u043E.");}catch(f){console.error("\u274C \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u043D \u043A\u043B\u0438\u0435\u043D\u0442 \u04AF\u04AF\u0441\u0433\u044D\u0445\u044D\u0434 \u0430\u043B\u0434\u0430\u0430 \u0433\u0430\u0440\u043B\u0430\u0430:",f);}},x=async()=>{e.current&&(await e.current.declineCall(),n(false));},F=async()=>{e.current&&(await e.current.acceptCall(),n(false),r(false),d(true));},A=async f=>{e.current&&(await e.current.createCall(f),r(true));},I=async()=>{e.current&&(await e.current.endCall(),d(false),r(false));},O=async()=>{e.current&&await e.current.toggleMic();},W=()=>{C(false),setTimeout(()=>{if(e.current){let f=e.current.isConnected();return C(f),console.log(`\u{1F50C} \u0414\u0443\u0443\u0434\u043B\u0430\u0433\u044B\u043D \u0441\u0435\u0440\u0432\u0435\u0440: ${f?"\u0425\u043E\u043B\u0431\u043E\u0433\u0434\u0441\u043E\u043D":"\u0425\u043E\u043B\u0431\u043E\u0433\u0434\u043E\u043E\u0433\u04AF\u0439"}`),f}return  false},1e3);};return jsx(P.Provider,{value:{isIncomingCall:s,isOutboundCall:i,isConnected:m,isCallActive:p,checkConnectionStatus:W,inboundUserData:c,declineCall:x,acceptCall:F,createCall:A,endCall:I,toggleMic:O,toPhoneNumber:h,setToPhoneNumber:S,isMicOn:v,setIsMicOn:D},children:t})},u=()=>{let t=useContext(P);if(!t)throw new Error("useClientContext-\u0433 \u0437\u04E9\u0432\u0445\u04E9\u043D ClientProvider-\u0438\u0439\u043D \u0434\u043E\u0442\u043E\u0440 \u0430\u0448\u0438\u0433\u043B\u0430\u0445 \u0451\u0441\u0442\u043E\u0439!");return t};var G=({className:t="",disabled:a,onClick:o,style:e,theme:c="dark",...l})=>{let{acceptCall:s}=u();return jsx("accept-button",{disabled:a,className:t,onClick:async i=>{try{await s(),o&&o(i);}catch(r){console.error("Failed to accept call:",r);}},style:e,theme:c,...l})},R=G;var Q=({toPhoneNumber:t="",className:a="",disabled:o,onClick:e,style:c,theme:l="dark",...s})=>{let{createCall:n}=u();return jsx("call-button",{"to-phone-number":t,disabled:o,className:a,onClick:async r=>{try{t&&await n(t),e&&e(r);}catch(m){console.error("Failed to create call:",m);}},style:c,theme:l,...s})},g=Q;var Z=({className:t="",disabled:a,onClick:o,style:e,...c})=>{let{declineCall:l}=u();return jsx("decline-button",{disabled:a,className:t,onClick:async n=>{try{await l(),o&&o(n);}catch(i){console.error("Failed to decline call:",i);}},style:e,...c})},M=Z;var ee=({className:t="",disabled:a,onClick:o,style:e,...c})=>{let{endCall:l}=u();return jsx("endcall-button",{disabled:a,className:t,onClick:async n=>{try{await l(),o&&o(n);}catch(i){console.error("Failed to end call:",i);}},style:e,...c})},E=ee;var ne=({className:t="",disabled:a,onClick:o,style:e,...c})=>{let{toggleMic:l,isMicOn:s,setIsMicOn:n}=u();return jsx("mic-button",{disabled:a,"mic-on":s?"":void 0,className:t,onClick:async r=>{try{await l(),n(!s),o&&o(r);}catch(m){console.error("Failed to toggle mic:",m);}},style:e,...c})},B=ne;var se=({phoneNumber:t,onNumberClick:a,maxLength:o=8,style:e,className:c,theme:l="dark"})=>{let s=useRef(null),[n,i]=useState(false);return useEffect(()=>{typeof window<"u"&&import('@callpromn/rtc-kit').then(()=>{customElements.get("rtc-numpad")?i(true):customElements.whenDefined("rtc-numpad").then(()=>{i(true);});}).catch(console.error);},[]),useEffect(()=>{let r=s.current;if(!r||!n)return;let m=C=>{let p=C;if(p.detail){let{value:d}=p.detail;a(h=>h.length<o?h+d:h);}};return r.addEventListener("number-click",m),()=>{r.removeEventListener("number-click",m);}},[a,o,n]),useEffect(()=>{if(s.current&&n){let r=s.current;r.setPhoneNumber&&r.setPhoneNumber(t);}},[t,n]),n?jsx("rtc-numpad",{ref:s,"phone-number":t,"max-length":o.toString(),style:e,className:c,theme:l}):null},T=se;var ue=({phoneNumber:t,style:a,className:o,theme:e="dark"})=>{let c=useRef(null),[l,s]=useState(false);return useEffect(()=>{typeof window<"u"&&import('@callpromn/rtc-kit').then(()=>{customElements.get("rtc-number-field")?s(true):customElements.whenDefined("rtc-number-field").then(()=>{s(true);});}).catch(console.error);},[]),useEffect(()=>{if(c.current&&l){let n=c.current;n.setPhoneNumber&&n.setPhoneNumber(t);}},[t,l]),l?jsx("rtc-number-field",{ref:c,"phone-number":t,style:a,className:o,theme:e}):null},N=ue;var pe=({phoneNumber:t,onClick:a,style:o,className:e,theme:c="dark"})=>{let{toPhoneNumber:l,setToPhoneNumber:s}=u(),n=useRef(null),[i,r]=useState(false),m=t.length>0;useEffect(()=>{typeof window<"u"&&import('@callpromn/rtc-kit').then(()=>{customElements.get("rtc-number-delete-button")?r(true):customElements.whenDefined("rtc-number-delete-button").then(()=>{r(true);});}).catch(console.error);},[]);let C=async p=>{try{l&&s(l.slice(0,-1)),a&&a();}catch(d){console.error("Failed to create call:",d);}};return useEffect(()=>{if(n.current&&i){let p=n.current;p.setPhoneNumber&&p.setPhoneNumber(t);}},[t,i]),!i||!m?null:jsx("rtc-number-delete-button",{ref:n,"phone-number":t,visible:m.toString(),style:o,className:e,theme:c,onClick:C})},k=pe;export{R as AcceptButton,g as CallButton,q as ClientProvider,M as DeclineButton,E as EndButton,B as MicButton,k as NumberDeleteButton,N as NumberField,T as Numpad,u as useClientContext};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context/ClientProvider.tsx","../src/components/AcceptButton.tsx","../src/components/CallButton.tsx","../src/components/DeclineButton.tsx","../src/components/EndButton.tsx","../src/components/MicButton.tsx","../src/components/Numpad.tsx","../src/components/NumberField.tsx","../src/components/NumberDeleteButton.tsx"],"names":["ClientContext","createContext","ClientProvider","children","config","callClient","CallClient","callClientInstance","useRef","inboundUserData","setInboundUserData","useState","isIncomingCall","setIsIncomingCall","isOutboundCall","setIsOutboundCall","isConnected","setIsConnected","isCallActive","setIsCallActive","toPhoneNumber","setToPhoneNumber","isMicOn","setIsMicOn","useEffect","createCallClient","data","error","declineCall","acceptCall","createCall","endCall","toggleMic","checkConnectionStatus","connected","jsx","useClientContext","context","useContext","AcceptButton","className","disabled","onClick","style","theme","props","event","AcceptButton_default","CallButton","CallButton_default","DeclineButton","DeclineButton_default","EndButton","EndButton_default","MicButton","MicButton_default","Numpad","phoneNumber","onNumberClick","maxLength","numpadRef","isWebComponentReady","setIsWebComponentReady","numpadElement","handleNumberClick","customEvent","value","prev","webComponent","Numpad_default","NumberField","numberFieldRef","NumberField_default","NumberDeleteButton","deleteButtonRef","isVisible","handleClick","NumberDeleteButton_default"],"mappings":"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","file":"index.mjs","sourcesContent":["'use client';\n\nimport { CallClientConfig, CallClient } from '@callpromn/rtc-sdk';\nimport { createContext, useContext, useEffect, useRef, useState } from 'react';\n\nconst ClientContext = createContext<any>(null);\n\nconst ClientProvider = ({\n  children,\n  config,\n}: {\n  children: React.ReactNode;\n  config: CallClientConfig;\n}) => {\n  const callClient = CallClient();\n  const callClientInstance = useRef<any>(null);\n\n  const [inboundUserData, setInboundUserData] = useState<any>(null);\n  const [isIncomingCall, setIsIncomingCall] = useState(false);\n  const [isOutboundCall, setIsOutboundCall] = useState(false);\n  const [isConnected, setIsConnected] = useState(false);\n  const [isCallActive, setIsCallActive] = useState(false);\n  const [toPhoneNumber, setToPhoneNumber] = useState('');\n  const [isMicOn, setIsMicOn] = useState(true);\n\n  useEffect(() => {\n    createCallClient();\n  }, []);\n\n  const createCallClient = async () => {\n    try {\n      callClientInstance.current = await callClient.createClient(config);\n\n      callClientInstance.current.on('call_init', async (data: any) => {\n        if (data === 'incoming') {\n          const inboundUserData =\n            await callClientInstance.current.getInboundUserData();\n          setInboundUserData(inboundUserData);\n          setIsIncomingCall(true);\n        }\n      });\n\n      callClientInstance.current.on('hangup', () => {\n        console.log('📞 [CallClientProvider] Дуудлагыг тасаллаа.');\n        setIsIncomingCall(false);\n        setIsOutboundCall(false);\n        setIsCallActive(false);\n      });\n\n      callClientInstance.current.on('busy', () => {\n        console.log('📞 [CallClientProvider] Дуудлагыг авахыг татгалзлаа.');\n        setIsIncomingCall(false);\n        setIsOutboundCall(false);\n        setIsCallActive(false);\n      });\n\n      callClientInstance.current.on('answered', () => {\n        console.log('📞 [CallClientProvider] Дуудлагыг хүлээж авлаа.');\n        setIsIncomingCall(false);\n        setIsOutboundCall(false);\n        setIsCallActive(true);\n      });\n\n      callClientInstance.current.on('bye', () => {\n        console.log('📞 [CallClientProvider] Дуудлагыг тасаллаа.');\n        setIsIncomingCall(false);\n        setIsOutboundCall(false);\n        setIsCallActive(false);\n      });\n\n      // Socket-ын холболтын төлөвийг шалгах\n      setIsConnected(callClientInstance.current.isConnected());\n      console.log('✅ Дуудлагын клиент амжилттай холбогдож бэлэн боллоо.');\n    } catch (error) {\n      console.error('❌ Дуудлагын клиент үүсгэхэд алдаа гарлаа:', error);\n    }\n  };\n\n  const declineCall = async () => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.declineCall();\n      setIsIncomingCall(false);\n    }\n  };\n\n  const acceptCall = async () => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.acceptCall();\n      setIsIncomingCall(false);\n      setIsOutboundCall(false);\n      setIsCallActive(true);\n    }\n  };\n\n  const createCall = async (toPhoneNumber: string) => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.createCall(toPhoneNumber);\n      setIsOutboundCall(true);\n    }\n  };\n\n  const endCall = async () => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.endCall();\n      setIsCallActive(false);\n      setIsOutboundCall(false);\n    }\n  };\n\n  const toggleMic = async () => {\n    if (callClientInstance.current) {\n      await callClientInstance.current.toggleMic();\n    }\n  };\n\n  const checkConnectionStatus = () => {\n    setIsConnected(false);\n    setTimeout(() => {\n      if (callClientInstance.current) {\n        const connected = callClientInstance.current.isConnected();\n        setIsConnected(connected);\n        console.log(\n          `🔌 Дуудлагын сервер: ${connected ? 'Холбогдсон' : 'Холбогдоогүй'}`\n        );\n        return connected;\n      }\n      return false;\n    }, 1000);\n  };\n\n  return (\n    <ClientContext.Provider\n      value={{\n        isIncomingCall,\n        isOutboundCall,\n        isConnected,\n        isCallActive,\n        checkConnectionStatus,\n        inboundUserData,\n        declineCall,\n        acceptCall,\n        createCall,\n        endCall,\n        toggleMic,\n        toPhoneNumber,\n        setToPhoneNumber,\n        isMicOn,\n        setIsMicOn,\n      }}\n    >\n      {children}\n    </ClientContext.Provider>\n  );\n};\n\nconst useClientContext = () => {\n  const context = useContext(ClientContext);\n  if (!context) {\n    throw new Error(\n      'useClientContext-г зөвхөн ClientProvider-ийн дотор ашиглах ёстой!'\n    );\n  }\n  return context;\n};\n\nexport { ClientProvider, useClientContext };\n","import React from 'react';\nimport '../types/web-components';\nimport { AcceptButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst AcceptButton: React.FC<AcceptButtonProps> = ({\n  className = '',\n  disabled,\n  onClick,\n  style,\n  theme = 'dark',\n  ...props\n}) => {\n  const { acceptCall } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      await acceptCall();\n\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to accept call:', error);\n    }\n  };\n\n  return (\n    <accept-button\n      disabled={disabled}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      theme={theme}\n      {...props}\n    />\n  );\n};\n\nexport default AcceptButton;\n","import React from 'react';\nimport '../types/web-components';\nimport { CallButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst CallButton: React.FC<CallButtonProps> = ({\n  toPhoneNumber = '',\n  className = '',\n  disabled,\n  onClick,\n  style,\n  theme = 'dark',\n  ...props\n}) => {\n  const { createCall } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      if (toPhoneNumber) await createCall(toPhoneNumber);\n\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to create call:', error);\n    }\n  };\n\n  return (\n    <call-button\n      to-phone-number={toPhoneNumber}\n      disabled={disabled}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      theme={theme}\n      {...props}\n    />\n  );\n};\n\nexport default CallButton;\n","import React from 'react';\nimport '../types/web-components';\nimport { DeclineButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst DeclineButton: React.FC<DeclineButtonProps> = ({\n  className = '',\n  disabled,\n  onClick,\n  style,\n  ...props\n}) => {\n  const { declineCall } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      await declineCall();\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to decline call:', error);\n    }\n  };\n\n  return (\n    <decline-button\n      disabled={disabled}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      {...props}\n    />\n  );\n};\n\nexport default DeclineButton;\n","import React from 'react';\nimport '../types/web-components';\nimport { EndButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst EndButton: React.FC<EndButtonProps> = ({\n  className = '',\n  disabled,\n  onClick,\n  style,\n  ...props\n}) => {\n  const { endCall } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      await endCall();\n\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to end call:', error);\n    }\n  };\n\n  return (\n    <endcall-button\n      disabled={disabled}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      {...props}\n    />\n  );\n};\n\nexport default EndButton;\n","import React from 'react';\nimport '../types/web-components';\nimport { MicButtonProps } from '../types';\nimport { useClientContext } from '../context/ClientProvider';\n\nconst MicButton: React.FC<MicButtonProps> = ({\n  className = '',\n  disabled,\n  onClick,\n  style,\n  ...props\n}) => {\n  const { toggleMic, isMicOn, setIsMicOn } = useClientContext();\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      await toggleMic();\n      setIsMicOn(!isMicOn);\n\n      if (onClick) onClick(event as any);\n    } catch (error) {\n      console.error('Failed to toggle mic:', error);\n    }\n  };\n\n  return (\n    <mic-button\n      disabled={disabled}\n      mic-on={isMicOn ? '' : undefined}\n      className={className}\n      onClick={handleClick}\n      style={style}\n      {...props}\n    />\n  );\n};\n\nexport default MicButton;\n","'use client';\n\nimport '../types/web-components';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface NumpadProps {\n  phoneNumber: string;\n  onNumberClick: React.Dispatch<React.SetStateAction<string>>;\n  maxLength?: number;\n  style?: React.CSSProperties;\n  className?: string;\n  theme?: 'light' | 'dark';\n}\n\nconst Numpad: React.FC<NumpadProps> = ({\n  phoneNumber,\n  onNumberClick,\n  maxLength = 8,\n  style,\n  className,\n  theme = 'dark',\n}) => {\n  const numpadRef = useRef<HTMLElement>(null);\n  const [isWebComponentReady, setIsWebComponentReady] = useState(false);\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      import('@callpromn/rtc-kit')\n        .then(() => {\n          // Wait for the web component to be defined\n          if (customElements.get('rtc-numpad')) {\n            setIsWebComponentReady(true);\n          } else {\n            customElements.whenDefined('rtc-numpad').then(() => {\n              setIsWebComponentReady(true);\n            });\n          }\n        })\n        .catch(console.error);\n    }\n  }, []);\n\n  useEffect(() => {\n    const numpadElement = numpadRef.current;\n    if (!numpadElement || !isWebComponentReady) return;\n\n    const handleNumberClick = (event: Event) => {\n      const customEvent = event as CustomEvent<{\n        value: string;\n        phoneNumber: string;\n      }>;\n      if (customEvent.detail) {\n        const { value } = customEvent.detail;\n        onNumberClick((prev: string) => {\n          if (prev.length < maxLength) {\n            return prev + value;\n          }\n          return prev;\n        });\n      }\n    };\n\n    numpadElement.addEventListener('number-click', handleNumberClick);\n\n    return () => {\n      numpadElement.removeEventListener('number-click', handleNumberClick);\n    };\n  }, [onNumberClick, maxLength, isWebComponentReady]);\n\n  // Sync phoneNumber prop with web component attribute\n  useEffect(() => {\n    if (numpadRef.current && isWebComponentReady) {\n      const webComponent = numpadRef.current as any;\n      if (webComponent.setPhoneNumber) {\n        webComponent.setPhoneNumber(phoneNumber);\n      }\n    }\n  }, [phoneNumber, isWebComponentReady]);\n\n  if (!isWebComponentReady) {\n    // Loading fallback while web component loads\n    return null;\n  }\n\n  return (\n    <rtc-numpad\n      ref={numpadRef}\n      phone-number={phoneNumber}\n      max-length={maxLength.toString()}\n      style={style}\n      className={className}\n      theme={theme}\n    />\n  );\n};\n\nexport default Numpad;\n","'use client';\n\nimport '../types/web-components';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface NumberFieldProps {\n  phoneNumber: string;\n  style?: React.CSSProperties;\n  className?: string;\n  theme?: 'light' | 'dark';\n}\n\nconst NumberField: React.FC<NumberFieldProps> = ({\n  phoneNumber,\n  style,\n  className,\n  theme = 'dark',\n}) => {\n  const numberFieldRef = useRef<HTMLElement>(null);\n  const [isWebComponentReady, setIsWebComponentReady] = useState(false);\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      import('@callpromn/rtc-kit')\n        .then(() => {\n          // Wait for the web component to be defined\n          if (customElements.get('rtc-number-field')) {\n            setIsWebComponentReady(true);\n          } else {\n            customElements.whenDefined('rtc-number-field').then(() => {\n              setIsWebComponentReady(true);\n            });\n          }\n        })\n        .catch(console.error);\n    }\n  }, []);\n\n  // Sync phoneNumber prop with web component attribute\n  useEffect(() => {\n    if (numberFieldRef.current && isWebComponentReady) {\n      const webComponent = numberFieldRef.current as any;\n      if (webComponent.setPhoneNumber) {\n        webComponent.setPhoneNumber(phoneNumber);\n      }\n    }\n  }, [phoneNumber, isWebComponentReady]);\n\n  if (!isWebComponentReady) {\n    // Loading fallback while web component loads\n    return null;\n  }\n\n  return (\n    <rtc-number-field\n      ref={numberFieldRef}\n      phone-number={phoneNumber}\n      style={style}\n      className={className}\n      theme={theme}\n    />\n  );\n};\n\nexport default NumberField;\n","'use client';\n\nimport '../types/web-components';\nimport { useEffect, useRef, useState } from 'react';\nimport { useClientContext } from '../context/ClientProvider';\n\ninterface NumberDeleteButtonProps {\n  phoneNumber: string;\n  onClick: () => void;\n  style?: React.CSSProperties;\n  className?: string;\n  theme?: 'light' | 'dark';\n}\n\nconst NumberDeleteButton: React.FC<NumberDeleteButtonProps> = ({\n  phoneNumber,\n  onClick,\n  style,\n  className,\n  theme = 'dark',\n}) => {\n  const { toPhoneNumber, setToPhoneNumber } = useClientContext();\n  const deleteButtonRef = useRef<HTMLElement>(null);\n  const [isWebComponentReady, setIsWebComponentReady] = useState(false);\n  const isVisible = phoneNumber.length > 0;\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      import('@callpromn/rtc-kit')\n        .then(() => {\n          // Wait for the web component to be defined\n          if (customElements.get('rtc-number-delete-button')) {\n            setIsWebComponentReady(true);\n          } else {\n            customElements.whenDefined('rtc-number-delete-button').then(() => {\n              setIsWebComponentReady(true);\n            });\n          }\n        })\n        .catch(console.error);\n    }\n  }, []);\n\n  const handleClick = async (event: React.MouseEvent) => {\n    try {\n      if (toPhoneNumber) setToPhoneNumber(toPhoneNumber.slice(0, -1));\n      if (onClick) onClick();\n    } catch (error) {\n      console.error('Failed to create call:', error);\n    }\n  };\n\n  // Sync phoneNumber prop with web component attribute\n  useEffect(() => {\n    if (deleteButtonRef.current && isWebComponentReady) {\n      const webComponent = deleteButtonRef.current as any;\n      if (webComponent.setPhoneNumber) {\n        webComponent.setPhoneNumber(phoneNumber);\n      }\n    }\n  }, [phoneNumber, isWebComponentReady]);\n\n  if (!isWebComponentReady || !isVisible) {\n    return null;\n  }\n\n  return (\n    <rtc-number-delete-button\n      ref={deleteButtonRef}\n      phone-number={phoneNumber}\n      visible={isVisible.toString()}\n      style={style}\n      className={className}\n      theme={theme}\n      onClick={handleClick}\n    />\n  );\n};\n\nexport default NumberDeleteButton;\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@callpromn/rtc-kit-react",
+  "version": "0.0.2",
+  "description": "RTC Kit React UI components - CallPro LLC",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "npm run build",
+    "pk": "sudo npm run build && sudo npm link",
+    "clean": "rimraf dist"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "rtc",
+    "calling",
+    "voip",
+    "callpro"
+  ],
+  "author": "CallPro LLC",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "rimraf": "^6.0.1"
+  },
+  "dependencies": {
+    "@callpromn/rtc-kit": "0.0.3",
+    "@callpromn/rtc-sdk": "0.0.3"
+  }
+}