@dora-cell/sdk-react 0.1.1-beta.8 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +66 -295
  2. package/dist/index.d.mts +1 -27
  3. package/dist/index.d.ts +1 -27
  4. package/dist/index.js +156 -119
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +156 -119
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/styles.css +3 -0
  9. package/package.json +18 -7
package/dist/index.js CHANGED
@@ -4,7 +4,7 @@ var react = require('react');
4
4
  var sdk = require('@dora-cell/sdk');
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
 
7
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/shared/src/utils.js
7
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/shared/src/utils.js
8
8
  var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
9
9
  var toCamelCase = (string) => string.replace(
10
10
  /^([A-Z])|[\s-_]+(\w)/g,
@@ -25,7 +25,7 @@ var hasA11yProp = (props) => {
25
25
  }
26
26
  };
27
27
 
28
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/defaultAttributes.js
28
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/defaultAttributes.js
29
29
  var defaultAttributes = {
30
30
  xmlns: "http://www.w3.org/2000/svg",
31
31
  width: 24,
@@ -38,7 +38,7 @@ var defaultAttributes = {
38
38
  strokeLinejoin: "round"
39
39
  };
40
40
 
41
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/Icon.js
41
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/Icon.js
42
42
  var Icon = react.forwardRef(
43
43
  ({
44
44
  color = "currentColor",
@@ -69,7 +69,7 @@ var Icon = react.forwardRef(
69
69
  )
70
70
  );
71
71
 
72
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/createLucideIcon.js
72
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/createLucideIcon.js
73
73
  var createLucideIcon = (iconName, iconNode) => {
74
74
  const Component = react.forwardRef(
75
75
  ({ className, ...props }, ref) => react.createElement(Icon, {
@@ -87,21 +87,21 @@ var createLucideIcon = (iconName, iconNode) => {
87
87
  return Component;
88
88
  };
89
89
 
90
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/arrow-down-left.js
90
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/arrow-down-left.js
91
91
  var __iconNode = [
92
92
  ["path", { d: "M17 7 7 17", key: "15tmo1" }],
93
93
  ["path", { d: "M17 17H7V7", key: "1org7z" }]
94
94
  ];
95
95
  var ArrowDownLeft = createLucideIcon("arrow-down-left", __iconNode);
96
96
 
97
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/arrow-up-right.js
97
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/arrow-up-right.js
98
98
  var __iconNode2 = [
99
99
  ["path", { d: "M7 7h10v10", key: "1tivn9" }],
100
100
  ["path", { d: "M7 17 17 7", key: "1vkiza" }]
101
101
  ];
102
102
  var ArrowUpRight = createLucideIcon("arrow-up-right", __iconNode2);
103
103
 
104
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/delete.js
104
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/delete.js
105
105
  var __iconNode3 = [
106
106
  [
107
107
  "path",
@@ -115,7 +115,7 @@ var __iconNode3 = [
115
115
  ];
116
116
  var Delete = createLucideIcon("delete", __iconNode3);
117
117
 
118
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/maximize.js
118
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/maximize.js
119
119
  var __iconNode4 = [
120
120
  ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
121
121
  ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
@@ -124,7 +124,7 @@ var __iconNode4 = [
124
124
  ];
125
125
  var Maximize = createLucideIcon("maximize", __iconNode4);
126
126
 
127
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/mic-off.js
127
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/mic-off.js
128
128
  var __iconNode5 = [
129
129
  ["path", { d: "M12 19v3", key: "npa21l" }],
130
130
  ["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
@@ -135,7 +135,7 @@ var __iconNode5 = [
135
135
  ];
136
136
  var MicOff = createLucideIcon("mic-off", __iconNode5);
137
137
 
138
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/mic.js
138
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/mic.js
139
139
  var __iconNode6 = [
140
140
  ["path", { d: "M12 19v3", key: "npa21l" }],
141
141
  ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
@@ -143,7 +143,7 @@ var __iconNode6 = [
143
143
  ];
144
144
  var Mic = createLucideIcon("mic", __iconNode6);
145
145
 
146
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/minimize-2.js
146
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minimize-2.js
147
147
  var __iconNode7 = [
148
148
  ["path", { d: "m14 10 7-7", key: "oa77jy" }],
149
149
  ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
@@ -152,7 +152,7 @@ var __iconNode7 = [
152
152
  ];
153
153
  var Minimize2 = createLucideIcon("minimize-2", __iconNode7);
154
154
 
155
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/phone.js
155
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/phone.js
156
156
  var __iconNode8 = [
157
157
  [
158
158
  "path",
@@ -164,14 +164,14 @@ var __iconNode8 = [
164
164
  ];
165
165
  var Phone = createLucideIcon("phone", __iconNode8);
166
166
 
167
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/user.js
167
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.js
168
168
  var __iconNode9 = [
169
169
  ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
170
170
  ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
171
171
  ];
172
172
  var User = createLucideIcon("user", __iconNode9);
173
173
 
174
- // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/x.js
174
+ // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js
175
175
  var __iconNode10 = [
176
176
  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
177
177
  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
@@ -191,10 +191,10 @@ function CallInterface({
191
191
  isMuted,
192
192
  hangup,
193
193
  answerCall,
194
- toggleMute
194
+ toggleMute,
195
+ callError
195
196
  } = useCall();
196
197
  const [isMinimized, setIsMinimized] = react.useState(false);
197
- const [localMuted, setLocalMuted] = react.useState(false);
198
198
  const [wasConnected, setWasConnected] = react.useState(false);
199
199
  const [closeCountdown, setCloseCountdown] = react.useState(null);
200
200
  const [connectingCountdown, setConnectingCountdown] = react.useState(null);
@@ -204,15 +204,18 @@ function CallInterface({
204
204
  const remoteNumber = currentCall?.remoteNumber || "Unknown";
205
205
  const displayName = remoteNumber;
206
206
  react.useEffect(() => {
207
- if (!audioRef.current) return;
208
- }, [currentCall]);
207
+ if (currentCall && audioRef.current) {
208
+ const stream = currentCall.getRemoteStream();
209
+ if (stream && audioRef.current.srcObject !== stream) {
210
+ audioRef.current.srcObject = stream;
211
+ }
212
+ }
213
+ }, [currentCall, callStatus]);
209
214
  react.useEffect(() => {
210
215
  if (callStatus === "ringing" && isIncoming) {
211
216
  onOpenChange?.(true);
212
- if (ringtoneRef.current) {
213
- ringtoneRef.current.play().catch(() => {
214
- });
215
- }
217
+ ringtoneRef.current?.play().catch(() => {
218
+ });
216
219
  } else {
217
220
  if (ringtoneRef.current) {
218
221
  ringtoneRef.current.pause();
@@ -221,6 +224,9 @@ function CallInterface({
221
224
  }
222
225
  }, [callStatus, isIncoming, onOpenChange]);
223
226
  react.useEffect(() => {
227
+ if (callStatus === "connecting" || callStatus === "ringing") {
228
+ setWasConnected(false);
229
+ }
224
230
  if (callStatus === "ongoing") {
225
231
  setWasConnected(true);
226
232
  }
@@ -228,33 +234,31 @@ function CallInterface({
228
234
  react.useEffect(() => {
229
235
  if (isOpen && callStatus === "ended") {
230
236
  onCallEnded?.();
231
- const closeDelay = wasConnected ? 1e3 : 5e3;
232
- const countdownStart = Date.now();
233
- const countdownInterval = setInterval(() => {
234
- const elapsed = Date.now() - countdownStart;
235
- const remaining = Math.max(0, closeDelay - elapsed);
236
- const seconds = Math.ceil(remaining / 1e3);
237
- setCloseCountdown(seconds);
237
+ const closeDelay = wasConnected ? 1500 : 3e3;
238
+ const start = Date.now();
239
+ const iv = setInterval(() => {
240
+ const remaining = Math.max(0, closeDelay - (Date.now() - start));
241
+ setCloseCountdown(Math.ceil(remaining / 1e3));
238
242
  if (remaining <= 0) {
239
- clearInterval(countdownInterval);
243
+ clearInterval(iv);
240
244
  onOpenChange?.(false);
245
+ setIsMinimized(false);
241
246
  }
242
247
  }, 100);
243
- return () => clearInterval(countdownInterval);
248
+ return () => clearInterval(iv);
244
249
  } else {
245
250
  setCloseCountdown(null);
246
251
  }
247
252
  }, [callStatus, isOpen, onOpenChange, wasConnected, onCallEnded]);
248
253
  react.useEffect(() => {
249
- let interval;
250
- const isConnecting = callStatus === "connecting";
251
- if (isOpen && isConnecting && !isIncoming) {
254
+ let iv;
255
+ if (isOpen && callStatus === "connecting" && !isIncoming) {
252
256
  setConnectingCountdown(60);
253
- interval = setInterval(() => {
257
+ iv = setInterval(() => {
254
258
  setConnectingCountdown((prev) => {
255
259
  if (prev === null || prev <= 0) {
256
- clearInterval(interval);
257
- hangup();
260
+ clearInterval(iv);
261
+ if (callStatus === "connecting") hangup();
258
262
  return 0;
259
263
  }
260
264
  return prev - 1;
@@ -263,7 +267,7 @@ function CallInterface({
263
267
  } else {
264
268
  setConnectingCountdown(null);
265
269
  }
266
- return () => clearInterval(interval);
270
+ return () => clearInterval(iv);
267
271
  }, [callStatus, isOpen, isIncoming, hangup]);
268
272
  if (!isOpen && callStatus === "idle") return null;
269
273
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -271,9 +275,9 @@ function CallInterface({
271
275
  {
272
276
  role: "dialog",
273
277
  "aria-label": "Call interface",
274
- className: `fixed top-14 md:top-16 right-0 md:right-4 z-50 transform transition-all duration-300 ease-in-out bg-[#1E1E1E] shadow-xl ${isOpen ? "translate-x-0" : "translate-x-[110%]"} ${isMinimized ? "w-48 h-20 rounded-2xl p-4 flex items-center justify-between" : "w-full sm:w-96 md:max-w-sm max-h-[calc(100vh-3.5rem)] md:max-h-[calc(100vh-4rem)] rounded-none md:rounded-2xl"}`,
278
+ className: `dora-fixed dora-top-14 md:dora-top-16 dora-right-0 md:dora-right-4 dora-z-50 dora-transform dora-transition-all dora-duration-300 dora-ease-in-out dora-bg-[#1E1E1E] dora-shadow-xl ${isOpen ? "dora-translate-x-0" : "dora-translate-x-[110%]"} ${isMinimized ? "dora-w-48 dora-h-20 dora-rounded-2xl dora-p-4 dora-flex dora-items-center dora-justify-between" : "dora-w-full sm:dora-w-96 md:dora-max-w-sm max-h-[calc(100vh-3.5rem)] md:dora-max-h-[calc(100vh-4rem)] dora-rounded-none md:dora-rounded-2xl"}`,
275
279
  children: [
276
- /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, autoPlay: true, className: "hidden" }),
280
+ /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, autoPlay: true, className: "dora-hidden" }),
277
281
  /* @__PURE__ */ jsxRuntime.jsx(
278
282
  "audio",
279
283
  {
@@ -281,75 +285,73 @@ function CallInterface({
281
285
  src: "https://assets.mixkit.co/active_storage/sfx/2358/2358-preview.mp3",
282
286
  loop: true,
283
287
  preload: "auto",
284
- className: "hidden"
288
+ className: "dora-hidden"
285
289
  }
286
290
  ),
287
- isMinimized ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full h-full", children: [
291
+ isMinimized ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-w-full dora-h-full", children: [
288
292
  /* @__PURE__ */ jsxRuntime.jsx(
289
293
  "button",
290
294
  {
291
295
  onClick: () => setIsMinimized(false),
292
- className: "w-10 h-10 rounded-full bg-[#2A2A2A] flex items-center justify-center text-slate-400 hover:text-white transition-colors",
293
- "aria-label": "Maximize call interface",
296
+ className: "dora-w-10 dora-h-10 dora-rounded-full dora-bg-[#2A2A2A] dora-flex dora-items-center dora-justify-center dora-text-slate-400 hover:dora-text-white dora-transition-colors",
297
+ "aria-label": "Maximize",
294
298
  children: maximizeIcon || /* @__PURE__ */ jsxRuntime.jsx(Maximize, { size: 18 })
295
299
  }
296
300
  ),
297
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
298
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-11 h-11 rounded-full bg-white flex items-center justify-center -mr-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl text-slate-900 font-bold", children: displayName.charAt(0).toUpperCase() }) }),
301
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-relative dora-flex dora-items-center", children: [
302
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-w-11 dora-h-11 dora-rounded-full dora-bg-white dora-flex dora-items-center dora-justify-center dora--mr-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-xl dora-text-slate-900 dora-font-bold", children: displayName.charAt(0).toUpperCase() }) }),
299
303
  /* @__PURE__ */ jsxRuntime.jsx(
300
304
  "button",
301
305
  {
302
306
  onClick: hangup,
303
- className: "w-11 h-11 rounded-full bg-red-500 text-white flex items-center justify-center shadow-lg hover:bg-red-600 transition-colors z-10",
307
+ className: "dora-w-11 dora-h-11 dora-rounded-full dora-bg-red-500 dora-text-white dora-flex dora-items-center dora-justify-center dora-shadow-lg hover:dora-bg-red-600 dora-transition-colors dora-z-10",
304
308
  "aria-label": "End call",
305
- children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 18, className: "transform rotate-135" })
309
+ children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 18, className: "dora-transform dora-rotate-[135deg]" })
306
310
  }
307
311
  )
308
312
  ] })
309
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col py-4 md:py-6 gap-2.5 md:gap-3.5 px-3 md:px-5 relative", children: [
313
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-flex-col dora-py-4 md:dora-py-6 dora-gap-2.5 md:dora-gap-3.5 dora-px-3 md:dora-px-5 dora-relative", children: [
310
314
  /* @__PURE__ */ jsxRuntime.jsx(
311
315
  "button",
312
316
  {
313
317
  onClick: () => setIsMinimized(true),
314
- className: "absolute top-2 right-2 text-slate-500 hover:text-white transition-colors",
318
+ className: "dora-absolute dora-top-2 dora-right-2 dora-text-slate-500 hover:dora-text-white dora-transition-colors",
315
319
  "aria-label": "Minimize",
316
320
  children: minimizeIcon || /* @__PURE__ */ jsxRuntime.jsx(Minimize2, { size: 16 })
317
321
  }
318
322
  ),
319
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-2 items-start md:items-center", children: [
320
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 md:gap-4 min-w-0", children: [
321
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 md:w-11 h-9 md:h-11 rounded-full bg-white flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg md:text-2xl text-slate-900 font-bold", children: displayName.charAt(0).toUpperCase() }) }),
322
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
323
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base md:text-xl font-normal text-white truncate", children: isIncoming ? displayName : displayName === "Unknown" ? "Outgoing Call" : displayName }),
324
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-slate-400 text-xs md:text-sm truncate", children: [
323
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-justify-between dora-gap-2 dora-items-start md:dora-items-center", children: [
324
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-gap-2.5 md:dora-gap-4 dora-min-w-0", children: [
325
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-w-9 md:dora-w-11 dora-h-9 md:dora-h-11 dora-rounded-full dora-bg-white dora-flex dora-items-center dora-justify-center dora-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-lg md:dora-text-2xl dora-text-slate-900 dora-font-bold", children: displayName.charAt(0).toUpperCase() }) }),
326
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-min-w-0 dora-flex-1", children: [
327
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "dora-text-base md:dora-text-xl dora-font-normal dora-text-white dora-truncate", children: isIncoming ? displayName : displayName === "Unknown" ? "Outgoing Call" : displayName }),
328
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "dora-text-slate-400 dora-text-xs md:dora-text-sm dora-truncate", children: [
325
329
  remoteNumber,
326
330
  " \u2022",
327
331
  " ",
328
- isMuted ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[#F99578]", children: "Call mute" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
332
+ isMuted ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-[#F99578]", children: "Call muted" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
329
333
  (callStatus === "connecting" || callStatus === "ringing") && /* @__PURE__ */ jsxRuntime.jsx("span", { children: isIncoming ? "Incoming Call..." : callStatus === "connecting" ? "Connecting..." : "Ringing..." }),
330
- callStatus === "ongoing" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "On Call" })
334
+ callStatus === "ongoing" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "On Call" }),
335
+ callStatus === "ended" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Call Ended" })
331
336
  ] })
332
337
  ] })
333
338
  ] })
334
339
  ] }),
335
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1.5 md:gap-3 shrink-0", children: [
340
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-justify-center dora-gap-1.5 md:dora-gap-3 dora-shrink-0", children: [
336
341
  isIncoming && callStatus === "ringing" && /* @__PURE__ */ jsxRuntime.jsx(
337
342
  "button",
338
343
  {
339
344
  onClick: answerCall,
340
- className: "rounded-full bg-green-500 text-white hover:bg-green-600 transition-colors w-8 md:w-9 h-8 md:h-9 flex items-center justify-center shrink-0",
341
- "aria-label": "Answer call",
345
+ className: "dora-rounded-full dora-bg-green-500 dora-text-white hover:dora-bg-green-600 dora-transition-colors dora-w-8 md:dora-w-9 dora-h-8 md:dora-h-9 dora-flex dora-items-center dora-justify-center dora-shrink-0",
346
+ "aria-label": "Answer",
342
347
  children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 18 })
343
348
  }
344
349
  ),
345
350
  (callStatus === "ongoing" || isIncoming && callStatus === "ringing") && /* @__PURE__ */ jsxRuntime.jsx(
346
351
  "button",
347
352
  {
348
- onClick: () => {
349
- toggleMute();
350
- setLocalMuted((s) => !s);
351
- },
352
- className: `rounded-full transition-colors w-8 md:w-9 h-8 md:h-9 flex items-center justify-center shrink-0 bg-slate-700 hover:bg-slate-600 ${isMuted ? "text-white " : " text-slate-400 "}`,
353
+ onClick: toggleMute,
354
+ className: `dora-rounded-full dora-transition-colors dora-w-8 md:dora-w-9 dora-h-8 md:dora-h-9 dora-flex dora-items-center dora-justify-center dora-shrink-0 ${isMuted ? "dora-bg-slate-700 hover:dora-bg-slate-600 dora-text-white" : "dora-bg-[#2A2A2A] hover:dora-bg-[#333333] dora-text-slate-400"}`,
353
355
  "aria-label": "Toggle mute",
354
356
  children: isMuted ? /* @__PURE__ */ jsxRuntime.jsx(MicOff, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(Mic, { size: 18 })
355
357
  }
@@ -358,31 +360,53 @@ function CallInterface({
358
360
  "button",
359
361
  {
360
362
  onClick: hangup,
361
- className: "rounded-full bg-red-600 text-white hover:bg-red-700 transition-colors w-8 md:w-9 h-8 md:h-9 flex items-center justify-center shrink-0",
362
- "aria-label": isIncoming && callStatus === "ringing" ? "Decline call" : "End call",
363
- children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 18, className: "transform rotate-135" })
363
+ className: "dora-rounded-full dora-bg-red-600 dora-text-white hover:dora-bg-red-700 dora-transition-colors dora-w-8 md:dora-w-9 dora-h-8 md:dora-h-9 dora-flex dora-items-center dora-justify-center dora-shrink-0",
364
+ "aria-label": isIncoming && callStatus === "ringing" ? "Decline" : "End call",
365
+ children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 18, className: "dora-transform dora-rotate-[135deg]" })
364
366
  }
365
367
  )
366
368
  ] })
367
369
  ] }),
368
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 border border-[#282828]" }),
369
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
370
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-slate-400 text-xs md:text-sm font-light tracking-wide flex items-center gap-1", children: [
371
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
372
- (callStatus === "connecting" || callStatus === "ringing") && /* @__PURE__ */ jsxRuntime.jsx("span", { children: isIncoming ? "Incoming call" : "Outgoing call" }),
373
- callStatus === "ongoing" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Ongoing" }),
374
- callStatus === "ended" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Call ended" })
375
- ] }),
376
- (callStatus === "connecting" || callStatus === "ringing" || callStatus === "ongoing") && (isIncoming ? /* @__PURE__ */ jsxRuntime.jsx(ArrowDownLeft, { className: "inline-block ml-1 text-green-400", size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowUpRight, { className: "inline-block ml-1 text-blue-400", size: 16 }))
370
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-flex-1 dora-border-t dora-border-[#282828] dora-mt-2 dora-mb-2" }),
371
+ callError && callStatus === "ended" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-bg-red-900/20 dora-border dora-border-red-500/30 dora-rounded-lg dora-p-2 md:dora-p-3 dora-mb-2 md:dora-mb-3", children: [
372
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "dora-text-red-400 dora-text-xs md:dora-text-sm dora-font-medium", children: "Call Failed" }),
373
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "dora-text-red-300 dora-text-xs dora-mt-0.5 md:dora-mt-1", children: callError }),
374
+ closeCountdown !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-mt-1.5 md:dora-mt-2", children: [
375
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-w-full dora-bg-red-900/30 dora-rounded-full dora-h-1.5 dora-overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
376
+ "div",
377
+ {
378
+ className: "dora-bg-red-500 dora-h-full dora-transition-all dora-duration-100",
379
+ style: {
380
+ width: `${Math.max(
381
+ 0,
382
+ closeCountdown / (wasConnected ? 1 : 5) * 100
383
+ )}%`
384
+ }
385
+ }
386
+ ) }),
387
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "dora-text-xs dora-text-red-300 dora-mt-0.5 md:dora-mt-1 dora-text-center", children: [
388
+ "Closing in ",
389
+ closeCountdown,
390
+ "s"
391
+ ] })
392
+ ] })
393
+ ] }),
394
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-justify-between dora-items-center", children: [
395
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-text-slate-400 dora-text-xs md:dora-text-sm dora-font-light dora-tracking-wide dora-flex dora-items-center dora-gap-1", children: [
396
+ (callStatus === "connecting" || callStatus === "ringing") && /* @__PURE__ */ jsxRuntime.jsx("span", { children: isIncoming ? "Incoming call" : "Outgoing call" }),
397
+ callStatus === "ongoing" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Ongoing" }),
398
+ callStatus === "ended" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Call ended" }),
399
+ (callStatus === "connecting" || callStatus === "ringing" || callStatus === "ongoing") && (isIncoming ? /* @__PURE__ */ jsxRuntime.jsx(ArrowDownLeft, { className: "dora-inline-block dora-ml-1 dora-text-green-400", size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowUpRight, { className: "dora-inline-block dora-ml-1 dora-text-blue-400", size: 16 }))
377
400
  ] }),
378
- callStatus === "ongoing" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#272727] h-6 md:h-7.5 rounded-full px-3 md:px-4.5 text-white font-normal text-xs md:text-sm flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
379
- " ",
380
- callDuration,
381
- " "
401
+ callStatus === "ongoing" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-bg-[#272727] dora-h-6 md:dora-h-7 dora-rounded-full dora-px-3 md:dora-px-4 dora-text-white dora-font-normal dora-text-xs md:dora-text-sm dora-flex dora-items-center dora-justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: callDuration }) }),
402
+ callStatus === "ended" && closeCountdown !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-bg-[#272727] dora-h-6 md:dora-h-7 dora-rounded-full dora-px-3 md:dora-px-4 dora-text-slate-400 dora-font-normal dora-text-xs dora-flex dora-items-center dora-justify-center dora-gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
403
+ "Closing in ",
404
+ closeCountdown,
405
+ "s"
382
406
  ] }) }),
383
- (connectingCountdown !== null || callStatus === "ringing") && !isIncoming && callStatus !== "ongoing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[#272727] h-8 rounded-full px-3 md:px-4 text-white font-normal text-xs md:text-sm flex items-center justify-center gap-2", children: [
384
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[#F99578] whitespace-nowrap", children: callStatus === "ringing" ? "Ringing..." : "Call connecting..." }),
385
- callStatus === "connecting" && connectingCountdown && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono ml-1", children: [
407
+ (connectingCountdown !== null || callStatus === "ringing") && !isIncoming && callStatus !== "ongoing" && callStatus !== "ended" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-bg-[#272727] dora-h-8 dora-rounded-full dora-px-3 md:dora-px-4 dora-text-white dora-font-normal dora-text-xs md:dora-text-sm dora-flex dora-items-center dora-justify-center dora-gap-2", children: [
408
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-[#F99578] dora-whitespace-nowrap", children: callStatus === "ringing" ? "Ringing..." : "Connecting..." }),
409
+ callStatus === "connecting" && connectingCountdown && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dora-font-mono dora-ml-1 dora-text-slate-400", children: [
386
410
  Math.floor(connectingCountdown / 60),
387
411
  ":",
388
412
  String(connectingCountdown % 60).padStart(2, "0")
@@ -404,6 +428,7 @@ function Dialpad({
404
428
  onExtensionChange
405
429
  }) {
406
430
  const { call, callStatus } = useCall();
431
+ const { isConnected } = useConnectionStatus();
407
432
  const [number, setNumber] = react.useState(initialNumber);
408
433
  const [keysVisible, setKeysVisible] = react.useState(showKeys);
409
434
  const append = (digit) => setNumber((s) => s + digit);
@@ -417,24 +442,24 @@ function Dialpad({
417
442
  console.error("Call failed", e);
418
443
  }
419
444
  };
420
- const isCallDisabled = !number || number.trim() === "" || callStatus === "ringing" || callStatus === "ongoing" || callStatus === "connecting";
421
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-4 ${className}`, children: [
422
- availableExtensions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-2 bg-[#F6F7F9] rounded-lg flex items-center justify-between p-2 md:p-2.5 mb-4", children: [
423
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm text-neutral-500 font-normal whitespace-nowrap", children: "Caller ID" }),
445
+ const isCallDisabled = !number || number.trim() === "" || !isConnected || callStatus === "ringing" || callStatus === "ongoing" || callStatus === "connecting";
446
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `dora-space-y-4 ${className}`, children: [
447
+ availableExtensions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-gap-2 dora-bg-[#F6F7F9] dora-rounded-lg dora-flex dora-items-center dora-justify-between dora-p-2 md:dora-p-2.5 dora-mb-4", children: [
448
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-text-xs md:dora-text-sm dora-text-neutral-500 dora-font-normal dora-whitespace-nowrap", children: "Caller ID" }),
424
449
  /* @__PURE__ */ jsxRuntime.jsx(
425
450
  "select",
426
451
  {
427
- className: "bg-transparent text-sm font-medium outline-none",
452
+ className: "dora-bg-transparent dora-text-sm dora-font-medium dora-outline-none",
428
453
  value: selectedExtension,
429
454
  onChange: (e) => onExtensionChange?.(e.target.value),
430
455
  children: availableExtensions.map((ext) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: ext.value, children: ext.label }, ext.value))
431
456
  }
432
457
  )
433
458
  ] }),
434
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 md:space-y-3 bg-[#F6F7F9] p-2 md:p-2.5 rounded-lg", children: [
435
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 md:gap-3", children: [
436
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex items-center bg-white rounded-md px-3 h-10 border border-transparent focus-within:border-green-500 transition-colors", children: [
437
- /* @__PURE__ */ jsxRuntime.jsx(User, { className: "text-gray-400 mr-2", size: 18 }),
459
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-space-y-2 md:dora-space-y-3 dora-bg-[#F6F7F9] dora-p-2 md:dora-p-2.5 dora-rounded-lg", children: [
460
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-gap-2 md:dora-gap-3", children: [
461
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex-1 dora-min-w-0 dora-flex dora-items-center dora-bg-white dora-rounded-md dora-px-3 dora-h-10 dora-border dora-border-transparent focus-within:dora-border-green-500 dora-transition-colors", children: [
462
+ /* @__PURE__ */ jsxRuntime.jsx(User, { className: "dora-text-gray-400 dora-mr-2", size: 18 }),
438
463
  /* @__PURE__ */ jsxRuntime.jsx(
439
464
  "input",
440
465
  {
@@ -442,53 +467,64 @@ function Dialpad({
442
467
  placeholder: "Enter number",
443
468
  value: number,
444
469
  onChange: (e) => setNumber(e.target.value),
445
- className: "bg-transparent border-none outline-none w-full text-base"
470
+ className: "dora-bg-transparent dora-border-none dora-outline-none dora-w-full dora-text-base dora-text-black"
446
471
  }
447
472
  )
448
473
  ] }),
449
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
474
+ /* @__PURE__ */ jsxRuntime.jsx(
450
475
  "button",
451
476
  {
452
477
  disabled: isCallDisabled,
453
- className: "bg-green-500 text-white hover:bg-green-600 rounded-lg h-9 md:h-10 w-9 md:w-11 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
454
478
  onClick: handleCall,
455
479
  title: "Place Call",
480
+ className: "dora-bg-green-500 dora-text-white hover:dora-bg-green-600 dora-rounded-lg dora-h-9 md:dora-h-10 dora-w-9 md:dora-w-11 dora-flex dora-items-center dora-justify-center disabled:dora-opacity-50 disabled:dora-cursor-not-allowed dora-transition-colors",
456
481
  children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 16, fill: "currentColor" })
457
482
  }
458
- ) })
483
+ )
459
484
  ] }),
460
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: keysVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3", children: [
461
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
485
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: keysVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-pt-3", children: [
486
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-flex dora-items-center dora-gap-3 dora-mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
462
487
  "button",
463
488
  {
464
489
  onClick: () => setKeysVisible(false),
465
- className: "px-2 md:px-2.5 h-8 bg-white rounded-full shadow text-neutral-500 flex items-center gap-1.5 md:gap-2 text-xs md:text-sm font-normal hover:bg-gray-50 transition-colors",
490
+ className: "dora-px-2 md:dora-px-2.5 dora-h-8 dora-bg-white dora-rounded-full dora-shadow dora-text-neutral-500 dora-flex dora-items-center dora-gap-1.5 md:dora-gap-2 dora-text-xs md:dora-text-sm dora-font-normal hover:dora-bg-gray-50 dora-transition-colors",
466
491
  children: [
467
492
  /* @__PURE__ */ jsxRuntime.jsx(X, { color: "red", size: 16 }),
468
493
  " Close keypad"
469
494
  ]
470
495
  }
471
496
  ) }),
472
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2 md:gap-3", children: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "+", "0", "del"].map(
473
- (d) => /* @__PURE__ */ jsxRuntime.jsx(
474
- "button",
475
- {
476
- onClick: () => d === "del" ? backspace() : append(d),
477
- className: "h-10 md:h-12 bg-white rounded-xl shadow flex items-center justify-center text-base md:text-lg font-medium hover:bg-gray-50 active:bg-gray-100 transition-colors",
478
- "aria-label": d === "del" ? "Delete" : `Dial ${d}`,
479
- children: d === "del" ? /* @__PURE__ */ jsxRuntime.jsx(Delete, { size: 18 }) : d
480
- },
481
- d
482
- )
483
- ) })
484
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2 md:pt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
497
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-grid dora-grid-cols-3 dora-gap-2 md:dora-gap-3", children: [
498
+ "1",
499
+ "2",
500
+ "3",
501
+ "4",
502
+ "5",
503
+ "6",
504
+ "7",
505
+ "8",
506
+ "9",
507
+ "+",
508
+ "0",
509
+ "del"
510
+ ].map((d) => /* @__PURE__ */ jsxRuntime.jsx(
511
+ "button",
512
+ {
513
+ onClick: () => d === "del" ? backspace() : append(d),
514
+ className: "dora-h-10 md:dora-h-12 dora-bg-white dora-rounded-xl dora-shadow dora-flex dora-items-center dora-justify-center dora-text-base md:dora-text-lg dora-font-medium dora-text-slate-900 hover:dora-bg-gray-50 active:dora-bg-gray-100 dora-transition-colors",
515
+ "aria-label": d === "del" ? "Delete" : `Dial ${d}`,
516
+ children: d === "del" ? /* @__PURE__ */ jsxRuntime.jsx(Delete, { size: 18 }) : d
517
+ },
518
+ d
519
+ )) })
520
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-pt-2 md:dora-pt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
485
521
  "button",
486
522
  {
487
523
  onClick: () => setKeysVisible(true),
488
- className: "rounded-full bg-[#EDEEF1] h-9 md:h-10 flex justify-center items-center px-3 md:px-4 w-full text-xs md:text-sm hover:bg-[#E3E4E8] transition-colors",
524
+ className: "dora-rounded-full dora-bg-[#EDEEF1] dora-h-9 md:dora-h-10 dora-flex dora-justify-center dora-items-center dora-px-3 md:dora-px-4 dora-w-full dora-text-xs md:dora-text-sm hover:dora-bg-[#E3E4E8] dora-transition-colors",
489
525
  children: [
490
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: "\u{1F522}" }),
491
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs md:text-sm text-neutral-500 font-normal ml-1.5", children: "Open dialer" })
526
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-mr-2", children: "\u{1F522}" }),
527
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-xs md:dora-text-sm dora-text-neutral-500 dora-font-normal dora-ml-1.5", children: "Open dialer" })
492
528
  ]
493
529
  }
494
530
  ) }) })
@@ -660,7 +696,7 @@ function useDoraCell() {
660
696
  return context;
661
697
  }
662
698
  function useCall() {
663
- const { call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall } = useDoraCell();
699
+ const { call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall, error } = useDoraCell();
664
700
  return {
665
701
  call,
666
702
  hangup,
@@ -669,7 +705,8 @@ function useCall() {
669
705
  callStatus,
670
706
  callDuration,
671
707
  isMuted,
672
- currentCall
708
+ currentCall,
709
+ callError: error?.message
673
710
  };
674
711
  }
675
712
  function useConnectionStatus() {