@dora-cell/sdk-react 0.1.1-beta.3 → 0.1.1-beta.30

package/dist/index.mjs

@@ -1,7 +1,534 @@
-import { createContext, useState, useRef, useEffect, useContext } from 'react';
+import { forwardRef, createElement, createContext, useState, useRef, useEffect, useContext } from 'react';
 import { DoraCell } from '@dora-cell/sdk';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/shared/src/utils.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+var toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+var hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/Icon.js
+var Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/arrow-down-left.js
+var __iconNode = [
+  ["path", { d: "M17 7 7 17", key: "15tmo1" }],
+  ["path", { d: "M17 17H7V7", key: "1org7z" }]
+];
+var ArrowDownLeft = createLucideIcon("arrow-down-left", __iconNode);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/arrow-up-right.js
+var __iconNode2 = [
+  ["path", { d: "M7 7h10v10", key: "1tivn9" }],
+  ["path", { d: "M7 17 17 7", key: "1vkiza" }]
+];
+var ArrowUpRight = createLucideIcon("arrow-up-right", __iconNode2);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/delete.js
+var __iconNode3 = [
+  [
+    "path",
+    {
+      d: "M10 5a2 2 0 0 0-1.344.519l-6.328 5.74a1 1 0 0 0 0 1.481l6.328 5.741A2 2 0 0 0 10 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z",
+      key: "1yo7s0"
+    }
+  ],
+  ["path", { d: "m12 9 6 6", key: "anjzzh" }],
+  ["path", { d: "m18 9-6 6", key: "1fp51s" }]
+];
+var Delete = createLucideIcon("delete", __iconNode3);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/maximize.js
+var __iconNode4 = [
+  ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
+  ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
+  ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
+  ["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
+];
+var Maximize = createLucideIcon("maximize", __iconNode4);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/mic-off.js
+var __iconNode5 = [
+  ["path", { d: "M12 19v3", key: "npa21l" }],
+  ["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
+  ["path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2", key: "cqa7eg" }],
+  ["path", { d: "M18.89 13.23A7 7 0 0 0 19 12v-2", key: "16hl24" }],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }],
+  ["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }]
+];
+var MicOff = createLucideIcon("mic-off", __iconNode5);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/mic.js
+var __iconNode6 = [
+  ["path", { d: "M12 19v3", key: "npa21l" }],
+  ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
+  ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
+];
+var Mic = createLucideIcon("mic", __iconNode6);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minimize-2.js
+var __iconNode7 = [
+  ["path", { d: "m14 10 7-7", key: "oa77jy" }],
+  ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
+  ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
+  ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
+];
+var Minimize2 = createLucideIcon("minimize-2", __iconNode7);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/phone.js
+var __iconNode8 = [
+  [
+    "path",
+    {
+      d: "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384",
+      key: "9njp5v"
+    }
+  ]
+];
+var Phone = createLucideIcon("phone", __iconNode8);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.js
+var __iconNode9 = [
+  ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
+  ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
+];
+var User = createLucideIcon("user", __iconNode9);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js
+var __iconNode10 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+var X = createLucideIcon("x", __iconNode10);
+function CallInterface({
+  isOpen = false,
+  onOpenChange,
+  onCallEnded,
+  maximizeIcon,
+  minimizeIcon
+}) {
+  const {
+    callStatus,
+    currentCall,
+    callDuration,
+    isMuted,
+    hangup,
+    answerCall,
+    toggleMute,
+    callError
+  } = useCall();
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [wasConnected, setWasConnected] = useState(false);
+  const [closeCountdown, setCloseCountdown] = useState(null);
+  const [connectingCountdown, setConnectingCountdown] = useState(null);
+  const audioRef = useRef(null);
+  const ringtoneRef = useRef(null);
+  const isIncoming = currentCall?.direction === "inbound";
+  const remoteNumber = currentCall?.remoteNumber || "Unknown";
+  const displayName = remoteNumber;
+  useEffect(() => {
+    if (currentCall && audioRef.current) {
+      const stream = currentCall.getRemoteStream();
+      if (stream && audioRef.current.srcObject !== stream) {
+        audioRef.current.srcObject = stream;
+      }
+    }
+  }, [currentCall, callStatus]);
+  useEffect(() => {
+    if (callStatus === "ringing" && isIncoming) {
+      onOpenChange?.(true);
+      ringtoneRef.current?.play().catch(() => {
+      });
+    } else {
+      if (ringtoneRef.current) {
+        ringtoneRef.current.pause();
+        ringtoneRef.current.currentTime = 0;
+      }
+    }
+  }, [callStatus, isIncoming, onOpenChange]);
+  useEffect(() => {
+    if (callStatus === "connecting" || callStatus === "ringing") {
+      setWasConnected(false);
+    }
+    if (callStatus === "ongoing") {
+      setWasConnected(true);
+    }
+  }, [callStatus]);
+  useEffect(() => {
+    if (isOpen && callStatus === "ended") {
+      onCallEnded?.();
+      const closeDelay = wasConnected ? 1500 : 3e3;
+      const start = Date.now();
+      const iv = setInterval(() => {
+        const remaining = Math.max(0, closeDelay - (Date.now() - start));
+        setCloseCountdown(Math.ceil(remaining / 1e3));
+        if (remaining <= 0) {
+          clearInterval(iv);
+          onOpenChange?.(false);
+          setIsMinimized(false);
+        }
+      }, 100);
+      return () => clearInterval(iv);
+    } else {
+      setCloseCountdown(null);
+    }
+  }, [callStatus, isOpen, onOpenChange, wasConnected, onCallEnded]);
+  useEffect(() => {
+    let iv;
+    if (isOpen && callStatus === "connecting" && !isIncoming) {
+      setConnectingCountdown(60);
+      iv = setInterval(() => {
+        setConnectingCountdown((prev) => {
+          if (prev === null || prev <= 0) {
+            clearInterval(iv);
+            if (callStatus === "connecting") hangup();
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1e3);
+    } else {
+      setConnectingCountdown(null);
+    }
+    return () => clearInterval(iv);
+  }, [callStatus, isOpen, isIncoming, hangup]);
+  if (!isOpen && callStatus === "idle") return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": "Call interface",
+      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"}`,
+      children: [
+        /* @__PURE__ */ jsx("audio", { ref: audioRef, autoPlay: true, className: "dora-hidden" }),
+        /* @__PURE__ */ jsx(
+          "audio",
+          {
+            ref: ringtoneRef,
+            src: "https://assets.mixkit.co/active_storage/sfx/2358/2358-preview.mp3",
+            loop: true,
+            preload: "auto",
+            className: "dora-hidden"
+          }
+        ),
+        isMinimized ? /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-w-full dora-h-full", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsMinimized(false),
+              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",
+              "aria-label": "Maximize",
+              children: maximizeIcon || /* @__PURE__ */ jsx(Maximize, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "dora-relative dora-flex dora-items-center", children: [
+            /* @__PURE__ */ 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__ */ jsx("span", { className: "dora-text-xl dora-text-slate-900 dora-font-bold", children: displayName.charAt(0).toUpperCase() }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: hangup,
+                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",
+                "aria-label": "End call",
+                children: /* @__PURE__ */ jsx(Phone, { size: 18, className: "dora-transform dora-rotate-[135deg]" })
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ 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: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsMinimized(true),
+              className: "dora-absolute dora-top-2 dora-right-2 dora-text-slate-500 hover:dora-text-white dora-transition-colors",
+              "aria-label": "Minimize",
+              children: minimizeIcon || /* @__PURE__ */ jsx(Minimize2, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-justify-between dora-gap-2 dora-items-start md:dora-items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-gap-2.5 md:dora-gap-4 dora-min-w-0", children: [
+              /* @__PURE__ */ 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__ */ jsx("span", { className: "dora-text-lg md:dora-text-2xl dora-text-slate-900 dora-font-bold", children: displayName.charAt(0).toUpperCase() }) }),
+              /* @__PURE__ */ jsxs("div", { className: "dora-min-w-0 dora-flex-1", children: [
+                /* @__PURE__ */ 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 }),
+                /* @__PURE__ */ jsxs("p", { className: "dora-text-slate-400 dora-text-xs md:dora-text-sm dora-truncate", children: [
+                  remoteNumber,
+                  " \u2022",
+                  " ",
+                  isMuted ? /* @__PURE__ */ jsx("span", { className: "dora-text-[#F99578]", children: "Call muted" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    (callStatus === "connecting" || callStatus === "ringing") && /* @__PURE__ */ jsx("span", { children: isIncoming ? "Incoming Call..." : callStatus === "connecting" ? "Connecting..." : "Ringing..." }),
+                    callStatus === "ongoing" && /* @__PURE__ */ jsx("span", { children: "On Call" }),
+                    callStatus === "ended" && /* @__PURE__ */ jsx("span", { children: "Call Ended" })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-justify-center dora-gap-1.5 md:dora-gap-3 dora-shrink-0", children: [
+              isIncoming && callStatus === "ringing" && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: answerCall,
+                  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",
+                  "aria-label": "Answer",
+                  children: /* @__PURE__ */ jsx(Phone, { size: 18 })
+                }
+              ),
+              (callStatus === "ongoing" || isIncoming && callStatus === "ringing") && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: toggleMute,
+                  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"}`,
+                  "aria-label": "Toggle mute",
+                  children: isMuted ? /* @__PURE__ */ jsx(MicOff, { size: 18 }) : /* @__PURE__ */ jsx(Mic, { size: 18 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: hangup,
+                  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",
+                  "aria-label": isIncoming && callStatus === "ringing" ? "Decline" : "End call",
+                  children: /* @__PURE__ */ jsx(Phone, { size: 18, className: "dora-transform dora-rotate-[135deg]" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "dora-flex-1 dora-border-t dora-border-[#282828] dora-mt-2 dora-mb-2" }),
+          callError && callStatus === "ended" && /* @__PURE__ */ 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: [
+            /* @__PURE__ */ jsx("p", { className: "dora-text-red-400 dora-text-xs md:dora-text-sm dora-font-medium", children: "Call Failed" }),
+            /* @__PURE__ */ jsx("p", { className: "dora-text-red-300 dora-text-xs dora-mt-0.5 md:dora-mt-1", children: callError }),
+            closeCountdown !== null && /* @__PURE__ */ jsxs("div", { className: "dora-mt-1.5 md:dora-mt-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "dora-w-full dora-bg-red-900/30 dora-rounded-full dora-h-1.5 dora-overflow-hidden", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "dora-bg-red-500 dora-h-full dora-transition-all dora-duration-100",
+                  style: {
+                    width: `${Math.max(
+                      0,
+                      closeCountdown / (wasConnected ? 1 : 5) * 100
+                    )}%`
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("p", { className: "dora-text-xs dora-text-red-300 dora-mt-0.5 md:dora-mt-1 dora-text-center", children: [
+                "Closing in ",
+                closeCountdown,
+                "s"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-justify-between dora-items-center", children: [
+            /* @__PURE__ */ 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: [
+              (callStatus === "connecting" || callStatus === "ringing") && /* @__PURE__ */ jsx("span", { children: isIncoming ? "Incoming call" : "Outgoing call" }),
+              callStatus === "ongoing" && /* @__PURE__ */ jsx("span", { children: "Ongoing" }),
+              callStatus === "ended" && /* @__PURE__ */ jsx("span", { children: "Call ended" }),
+              (callStatus === "connecting" || callStatus === "ringing" || callStatus === "ongoing") && (isIncoming ? /* @__PURE__ */ jsx(ArrowDownLeft, { className: "dora-inline-block dora-ml-1 dora-text-green-400", size: 16 }) : /* @__PURE__ */ jsx(ArrowUpRight, { className: "dora-inline-block dora-ml-1 dora-text-blue-400", size: 16 }))
+            ] }),
+            callStatus === "ongoing" && /* @__PURE__ */ 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__ */ jsx("span", { children: callDuration }) }),
+            callStatus === "ended" && closeCountdown !== null && /* @__PURE__ */ 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__ */ jsxs("span", { children: [
+              "Closing in ",
+              closeCountdown,
+              "s"
+            ] }) }),
+            (connectingCountdown !== null || callStatus === "ringing") && !isIncoming && callStatus !== "ongoing" && callStatus !== "ended" && /* @__PURE__ */ 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: [
+              /* @__PURE__ */ jsx("span", { className: "dora-text-[#F99578] dora-whitespace-nowrap", children: callStatus === "ringing" ? "Ringing..." : "Connecting..." }),
+              callStatus === "connecting" && connectingCountdown && /* @__PURE__ */ jsxs("span", { className: "dora-font-mono dora-ml-1 dora-text-slate-400", children: [
+                Math.floor(connectingCountdown / 60),
+                ":",
+                String(connectingCountdown % 60).padStart(2, "0")
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function Dialpad({
+  onCallInitiated,
+  initialNumber = "",
+  showKeys = true,
+  className = "",
+  availableExtensions = [],
+  selectedExtension,
+  onExtensionChange
+}) {
+  const { call, callStatus } = useCall();
+  const { isConnected } = useConnectionStatus();
+  const [number, setNumber] = useState(initialNumber);
+  const [keysVisible, setKeysVisible] = useState(showKeys);
+  const append = (digit) => setNumber((s) => s + digit);
+  const backspace = () => setNumber((s) => s.slice(0, -1));
+  const handleCall = async () => {
+    if (!number || number.trim() === "") return;
+    try {
+      await call(number, selectedExtension);
+      onCallInitiated?.(number);
+    } catch (e) {
+      console.error("Call failed", e);
+    }
+  };
+  const isCallDisabled = !number || number.trim() === "" || !isConnected || callStatus === "ringing" || callStatus === "ongoing" || callStatus === "connecting";
+  return /* @__PURE__ */ jsxs("div", { className: `dora-space-y-4 ${className}`, children: [
+    availableExtensions.length > 0 && /* @__PURE__ */ 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: [
+      /* @__PURE__ */ jsx("div", { className: "dora-text-xs md:dora-text-sm dora-text-neutral-500 dora-font-normal dora-whitespace-nowrap", children: "Caller ID" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: "dora-bg-transparent dora-text-sm dora-font-medium dora-outline-none",
+          value: selectedExtension,
+          onChange: (e) => onExtensionChange?.(e.target.value),
+          children: availableExtensions.map((ext) => /* @__PURE__ */ jsx("option", { value: ext.value, children: ext.label }, ext.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ 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: [
+      /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-gap-2 md:dora-gap-3", children: [
+        /* @__PURE__ */ 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: [
+          /* @__PURE__ */ jsx(User, { className: "dora-text-gray-400 dora-mr-2", size: 18 }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "tel",
+              placeholder: "Enter number",
+              value: number,
+              onChange: (e) => setNumber(e.target.value),
+              className: "dora-bg-transparent dora-border-none dora-outline-none dora-w-full dora-text-base dora-text-black"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            disabled: isCallDisabled,
+            onClick: handleCall,
+            title: "Place Call",
+            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",
+            children: /* @__PURE__ */ jsx(Phone, { size: 16, fill: "currentColor" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: keysVisible ? /* @__PURE__ */ jsxs("div", { className: "dora-pt-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "dora-flex dora-items-center dora-gap-3 dora-mb-3", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setKeysVisible(false),
+            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",
+            children: [
+              /* @__PURE__ */ jsx(X, { color: "red", size: 16 }),
+              " Close keypad"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "dora-grid dora-grid-cols-3 dora-gap-2 md:dora-gap-3", children: [
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+          "+",
+          "0",
+          "del"
+        ].map((d) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => d === "del" ? backspace() : append(d),
+            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",
+            "aria-label": d === "del" ? "Delete" : `Dial ${d}`,
+            children: d === "del" ? /* @__PURE__ */ jsx(Delete, { size: 18 }) : d
+          },
+          d
+        )) })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "dora-pt-2 md:dora-pt-3", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setKeysVisible(true),
+          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",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "dora-mr-2", children: "\u{1F522}" }),
+            /* @__PURE__ */ jsx("span", { className: "dora-text-xs md:dora-text-sm dora-text-neutral-500 dora-font-normal dora-ml-1.5", children: "Open dialer" })
+          ]
+        }
+      ) }) })
+    ] })
+  ] });
+}
 var DoraCellContext = createContext(void 0);
 function DoraCellProvider({
   config,
@@ -167,15 +694,17 @@ function useDoraCell() {
   return context;
 }
 function useCall() {
-  const { call, hangup, toggleMute, callStatus, callDuration, isMuted, currentCall } = useDoraCell();
+  const { call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall, error } = useDoraCell();
   return {
     call,
     hangup,
     toggleMute,
+    answerCall,
     callStatus,
     callDuration,
     isMuted,
-    currentCall
+    currentCall,
+    callError: error?.message
   };
 }
 function useConnectionStatus() {
@@ -187,7 +716,31 @@ function useConnectionStatus() {
     error
   };
 }
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils.js:
+lucide-react/dist/esm/defaultAttributes.js:
+lucide-react/dist/esm/Icon.js:
+lucide-react/dist/esm/createLucideIcon.js:
+lucide-react/dist/esm/icons/arrow-down-left.js:
+lucide-react/dist/esm/icons/arrow-up-right.js:
+lucide-react/dist/esm/icons/delete.js:
+lucide-react/dist/esm/icons/maximize.js:
+lucide-react/dist/esm/icons/mic-off.js:
+lucide-react/dist/esm/icons/mic.js:
+lucide-react/dist/esm/icons/minimize-2.js:
+lucide-react/dist/esm/icons/phone.js:
+lucide-react/dist/esm/icons/user.js:
+lucide-react/dist/esm/icons/x.js:
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.555.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/
 
-export { DoraCellProvider, useCall, useConnectionStatus, useDoraCell };
+export { CallInterface, Dialpad, DoraCellProvider, useCall, useConnectionStatus, useDoraCell };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map