@dora-cell/sdk-react 0.1.1-beta.10

package/dist/index.mjs

@@ -0,0 +1,709 @@
+import { forwardRef, createElement, createContext, useState, useRef, useEffect, useContext } from 'react';
+import { DoraCell } from '@dora-cell/sdk';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/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.4/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.4/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.4/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.4/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.4/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.4/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.4/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.4/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.4/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.4/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.4/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.4/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.4/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
+  } = useCall();
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [localMuted, setLocalMuted] = 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 (!audioRef.current) return;
+  }, [currentCall]);
+  useEffect(() => {
+    if (callStatus === "ringing" && isIncoming) {
+      onOpenChange?.(true);
+      if (ringtoneRef.current) {
+        ringtoneRef.current.play().catch(() => {
+        });
+      }
+    } else {
+      if (ringtoneRef.current) {
+        ringtoneRef.current.pause();
+        ringtoneRef.current.currentTime = 0;
+      }
+    }
+  }, [callStatus, isIncoming, onOpenChange]);
+  useEffect(() => {
+    if (callStatus === "ongoing") {
+      setWasConnected(true);
+    }
+  }, [callStatus]);
+  useEffect(() => {
+    if (isOpen && callStatus === "ended") {
+      onCallEnded?.();
+      const closeDelay = wasConnected ? 1e3 : 5e3;
+      const countdownStart = Date.now();
+      const countdownInterval = setInterval(() => {
+        const elapsed = Date.now() - countdownStart;
+        const remaining = Math.max(0, closeDelay - elapsed);
+        const seconds = Math.ceil(remaining / 1e3);
+        setCloseCountdown(seconds);
+        if (remaining <= 0) {
+          clearInterval(countdownInterval);
+          onOpenChange?.(false);
+        }
+      }, 100);
+      return () => clearInterval(countdownInterval);
+    } else {
+      setCloseCountdown(null);
+    }
+  }, [callStatus, isOpen, onOpenChange, wasConnected, onCallEnded]);
+  useEffect(() => {
+    let interval;
+    const isConnecting = callStatus === "connecting";
+    if (isOpen && isConnecting && !isIncoming) {
+      setConnectingCountdown(60);
+      interval = setInterval(() => {
+        setConnectingCountdown((prev) => {
+          if (prev === null || prev <= 0) {
+            clearInterval(interval);
+            hangup();
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1e3);
+    } else {
+      setConnectingCountdown(null);
+    }
+    return () => clearInterval(interval);
+  }, [callStatus, isOpen, isIncoming, hangup]);
+  if (!isOpen && callStatus === "idle") return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": "Call interface",
+      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"}`,
+      children: [
+        /* @__PURE__ */ jsx("audio", { ref: audioRef, autoPlay: true, className: "hidden" }),
+        /* @__PURE__ */ jsx(
+          "audio",
+          {
+            ref: ringtoneRef,
+            src: "https://assets.mixkit.co/active_storage/sfx/2358/2358-preview.mp3",
+            loop: true,
+            preload: "auto",
+            className: "hidden"
+          }
+        ),
+        isMinimized ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full h-full", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsMinimized(false),
+              className: "w-10 h-10 rounded-full bg-[#2A2A2A] flex items-center justify-center text-slate-400 hover:text-white transition-colors",
+              "aria-label": "Maximize call interface",
+              children: maximizeIcon || /* @__PURE__ */ jsx(Maximize, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-11 h-11 rounded-full bg-white flex items-center justify-center -mr-3", children: /* @__PURE__ */ jsx("span", { className: "text-xl text-slate-900 font-bold", children: displayName.charAt(0).toUpperCase() }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: hangup,
+                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",
+                "aria-label": "End call",
+                children: /* @__PURE__ */ jsx(Phone, { size: 18, className: "transform rotate-135" })
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ 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: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsMinimized(true),
+              className: "absolute top-2 right-2 text-slate-500 hover:text-white transition-colors",
+              "aria-label": "Minimize",
+              children: minimizeIcon || /* @__PURE__ */ jsx(Minimize2, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2 items-start md:items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 md:gap-4 min-w-0", children: [
+              /* @__PURE__ */ 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__ */ jsx("span", { className: "text-lg md:text-2xl text-slate-900 font-bold", children: displayName.charAt(0).toUpperCase() }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-base md:text-xl font-normal text-white truncate", children: isIncoming ? displayName : displayName === "Unknown" ? "Outgoing Call" : displayName }),
+                /* @__PURE__ */ jsxs("p", { className: "text-slate-400 text-xs md:text-sm truncate", children: [
+                  remoteNumber,
+                  " \u2022",
+                  " ",
+                  isMuted ? /* @__PURE__ */ jsx("span", { className: "text-xs text-[#F99578]", children: "Call mute" }) : /* @__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" })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5 md:gap-3 shrink-0", children: [
+              isIncoming && callStatus === "ringing" && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: answerCall,
+                  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",
+                  "aria-label": "Answer call",
+                  children: /* @__PURE__ */ jsx(Phone, { size: 18 })
+                }
+              ),
+              (callStatus === "ongoing" || isIncoming && callStatus === "ringing") && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    toggleMute();
+                    setLocalMuted((s) => !s);
+                  },
+                  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 "}`,
+                  "aria-label": "Toggle mute",
+                  children: isMuted ? /* @__PURE__ */ jsx(MicOff, { size: 18 }) : /* @__PURE__ */ jsx(Mic, { size: 18 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: hangup,
+                  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",
+                  "aria-label": isIncoming && callStatus === "ringing" ? "Decline call" : "End call",
+                  children: /* @__PURE__ */ jsx(Phone, { size: 18, className: "transform rotate-135" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 border border-[#282828]" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-slate-400 text-xs md:text-sm font-light tracking-wide flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { 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: "inline-block ml-1 text-green-400", size: 16 }) : /* @__PURE__ */ jsx(ArrowUpRight, { className: "inline-block ml-1 text-blue-400", size: 16 }))
+            ] }),
+            callStatus === "ongoing" && /* @__PURE__ */ 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__ */ jsxs("span", { children: [
+              " ",
+              callDuration,
+              " "
+            ] }) }),
+            (connectingCountdown !== null || callStatus === "ringing") && !isIncoming && callStatus !== "ongoing" && /* @__PURE__ */ 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: [
+              /* @__PURE__ */ jsx("span", { className: "text-[#F99578] whitespace-nowrap", children: callStatus === "ringing" ? "Ringing..." : "Call connecting..." }),
+              callStatus === "connecting" && connectingCountdown && /* @__PURE__ */ jsxs("span", { className: "font-mono ml-1", 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 [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() === "" || callStatus === "ringing" || callStatus === "ongoing" || callStatus === "connecting";
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
+    availableExtensions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "gap-2 bg-[#F6F7F9] rounded-lg flex items-center justify-between p-2 md:p-2.5 mb-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs md:text-sm text-neutral-500 font-normal whitespace-nowrap", children: "Caller ID" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: "bg-transparent text-sm font-medium 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: "space-y-2 md:space-y-3 bg-[#F6F7F9] p-2 md:p-2.5 rounded-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 md:gap-3", children: [
+        /* @__PURE__ */ 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: [
+          /* @__PURE__ */ jsx(User, { className: "text-gray-400 mr-2", size: 18 }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "tel",
+              placeholder: "Enter number",
+              value: number,
+              onChange: (e) => setNumber(e.target.value),
+              className: "bg-transparent border-none outline-none w-full text-base"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            disabled: isCallDisabled,
+            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",
+            onClick: handleCall,
+            title: "Place Call",
+            children: /* @__PURE__ */ jsx(Phone, { size: 16, fill: "currentColor" })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: keysVisible ? /* @__PURE__ */ jsxs("div", { className: "pt-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 mb-3", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setKeysVisible(false),
+            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",
+            children: [
+              /* @__PURE__ */ jsx(X, { color: "red", size: 16 }),
+              " Close keypad"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ 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(
+          (d) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => d === "del" ? backspace() : append(d),
+              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",
+              "aria-label": d === "del" ? "Delete" : `Dial ${d}`,
+              children: d === "del" ? /* @__PURE__ */ jsx(Delete, { size: 18 }) : d
+            },
+            d
+          )
+        ) })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "pt-2 md:pt-3", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setKeysVisible(true),
+          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",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "mr-2", children: "\u{1F522}" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs md:text-sm text-neutral-500 font-normal ml-1.5", children: "Open dialer" })
+          ]
+        }
+      ) }) })
+    ] })
+  ] });
+}
+var DoraCellContext = createContext(void 0);
+function DoraCellProvider({
+  config,
+  children,
+  autoInitialize = true
+}) {
+  const [sdk] = useState(() => new DoraCell(config));
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState("disconnected");
+  const [currentCall, setCurrentCall] = useState(null);
+  const [callStatus, setCallStatus] = useState("idle");
+  const [callDuration, setCallDuration] = useState("00:00");
+  const [isMuted, setIsMuted] = useState(false);
+  const [error, setError] = useState(null);
+  const durationIntervalRef = useRef(null);
+  useEffect(() => {
+    if (!autoInitialize) return;
+    const initializeSdk = async () => {
+      try {
+        await sdk.initialize();
+        setIsInitialized(true);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to initialize SDK"));
+      }
+    };
+    initializeSdk();
+    return () => {
+      sdk.destroy();
+    };
+  }, [sdk, autoInitialize]);
+  useEffect(() => {
+    if (!sdk) return;
+    const handleConnectionStatus = (state) => {
+      setConnectionStatus(state.status);
+      if (state.error) {
+        setError(new Error(state.error));
+      }
+    };
+    const handleIncomingCall = (call2) => {
+      setCurrentCall(call2);
+      setCallStatus("ringing");
+    };
+    const handleOutgoingCall = (call2) => {
+      setCurrentCall(call2);
+      setCallStatus("connecting");
+    };
+    const handleCallRinging = (call2) => {
+      setCallStatus("ringing");
+    };
+    const handleCallConnected = (call2) => {
+      setCallStatus("ongoing");
+    };
+    const handleCallEnded = (call2) => {
+      setCallStatus("ended");
+      setCurrentCall(null);
+      setIsMuted(false);
+      setTimeout(() => {
+        setCallStatus("idle");
+      }, 3e3);
+    };
+    const handleCallFailed = (call2, errorMsg) => {
+      setError(new Error(errorMsg));
+      setCallStatus("ended");
+      setCurrentCall(null);
+    };
+    const handleError = (err) => {
+      setError(err);
+    };
+    sdk.on("connection:status", handleConnectionStatus);
+    sdk.on("call:incoming", handleIncomingCall);
+    sdk.on("call:outgoing", handleOutgoingCall);
+    sdk.on("call:ringing", handleCallRinging);
+    sdk.on("call:connected", handleCallConnected);
+    sdk.on("call:ended", handleCallEnded);
+    sdk.on("call:failed", handleCallFailed);
+    sdk.on("error", handleError);
+    return () => {
+      sdk.off("connection:status", handleConnectionStatus);
+      sdk.off("call:incoming", handleIncomingCall);
+      sdk.off("call:outgoing", handleOutgoingCall);
+      sdk.off("call:ringing", handleCallRinging);
+      sdk.off("call:connected", handleCallConnected);
+      sdk.off("call:ended", handleCallEnded);
+      sdk.off("call:failed", handleCallFailed);
+      sdk.off("error", handleError);
+    };
+  }, [sdk]);
+  useEffect(() => {
+    if (callStatus === "ongoing" && currentCall) {
+      durationIntervalRef.current = window.setInterval(() => {
+        const duration = currentCall.duration;
+        const mm = String(Math.floor(duration / 60)).padStart(2, "0");
+        const ss = String(duration % 60).padStart(2, "0");
+        setCallDuration(`${mm}:${ss}`);
+      }, 1e3);
+    } else {
+      setCallDuration("00:00");
+      if (durationIntervalRef.current) {
+        clearInterval(durationIntervalRef.current);
+        durationIntervalRef.current = null;
+      }
+    }
+    return () => {
+      if (durationIntervalRef.current) {
+        clearInterval(durationIntervalRef.current);
+      }
+    };
+  }, [callStatus, currentCall]);
+  const call = async (phoneNumber, extension) => {
+    try {
+      setError(null);
+      await sdk.call(phoneNumber, { extension });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to make call"));
+      throw err;
+    }
+  };
+  const hangup = () => {
+    try {
+      sdk.hangup();
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to hang up"));
+    }
+  };
+  const toggleMute = () => {
+    if (!currentCall) return;
+    if (isMuted) {
+      currentCall.unmute();
+      setIsMuted(false);
+    } else {
+      currentCall.mute();
+      setIsMuted(true);
+    }
+  };
+  const answerCall = () => {
+    try {
+      sdk.answerCall();
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to answer call"));
+    }
+  };
+  const contextValue = {
+    sdk,
+    connectionStatus,
+    currentCall,
+    callStatus,
+    callDuration,
+    isMuted,
+    isInitialized,
+    error,
+    call,
+    hangup,
+    toggleMute,
+    answerCall
+  };
+  return /* @__PURE__ */ jsx(DoraCellContext.Provider, { value: contextValue, children });
+}
+function useDoraCell() {
+  const context = useContext(DoraCellContext);
+  if (!context) {
+    throw new Error("useDoraCell must be used within DoraCellProvider");
+  }
+  return context;
+}
+function useCall() {
+  const { call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall } = useDoraCell();
+  return {
+    call,
+    hangup,
+    toggleMute,
+    answerCall,
+    callStatus,
+    callDuration,
+    isMuted,
+    currentCall
+  };
+}
+function useConnectionStatus() {
+  const { connectionStatus, isInitialized, error } = useDoraCell();
+  return {
+    connectionStatus,
+    isInitialized,
+    isConnected: connectionStatus === "registered",
+    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 { CallInterface, Dialpad, DoraCellProvider, useCall, useConnectionStatus, useDoraCell };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map