@voxket-ai/voxket-live 1.0.102 → 1.0.103

package/dist/index.js

@@ -16936,6 +16936,317 @@ div[class*="fixed"][class*="z-[9999]"] {
 .shadow-2xl {
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
+
+/* Global button and interactive element styles */
+.bg-gradient-to-br.from-blue-500.to-purple-600 {
+  background: linear-gradient(to bottom right, #3b82f6, #9333ea);
+}
+
+.bg-gradient-to-br.from-green-500.to-blue-600 {
+  background: linear-gradient(to bottom right, #10b981, #2563eb);
+}
+
+.bg-gradient-to-br.from-purple-500.to-pink-600 {
+  background: linear-gradient(to bottom right, #8b5cf6, #db2777);
+}
+
+.bg-gradient-to-br.from-orange-500.to-red-600 {
+  background: linear-gradient(to bottom right, #f97316, #dc2626);
+}
+
+/* Button hover effects */
+.hover\\:scale-105:hover {
+  transform: scale(1.05);
+}
+
+.hover\\:shadow-lg:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Button states and colors */
+.bg-blue-600 {
+  background-color: #2563eb;
+}
+
+.bg-green-500 {
+  background-color: #10b981;
+}
+
+.bg-purple-600 {
+  background-color: #9333ea;
+}
+
+.bg-orange-500 {
+  background-color: #f97316;
+}
+
+.hover\\:bg-blue-700:hover {
+  background-color: #1d4ed8;
+}
+
+.hover\\:bg-green-600:hover {
+  background-color: #059669;
+}
+
+.hover\\:bg-purple-700:hover {
+  background-color: #7c3aed;
+}
+
+.hover\\:bg-orange-600:hover {
+  background-color: #ea580c;
+}
+
+/* Disabled button states */
+.disabled\\:opacity-50:disabled,
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.disabled\\:cursor-not-allowed:disabled,
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+/* Text colors for buttons */
+.text-gray-800 {
+  color: #1f2937;
+}
+
+/* Transitions */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Bar visualizer styles */
+.bg-blue-400 {
+  background-color: #60a5fa;
+}
+
+.bg-blue-500 {
+  background-color: #3b82f6;
+}
+
+.bg-purple-400 {
+  background-color: #c084fc;
+}
+
+.bg-purple-500 {
+  background-color: #a855f7;
+}
+
+.bg-pink-400 {
+  background-color: #f472b6;
+}
+
+.bg-pink-500 {
+  background-color: #ec4899;
+}
+
+/* Animation classes */
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+
+/* Spacing utilities */
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+/* Font styles */
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+/* Border and radius */
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+/* Focus states */
+.focus\\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\\:ring-2:focus {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+/* Overflow */
+.overflow-hidden {
+  overflow: hidden;
+}
+
+/* Transform */
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+/* Cursor */
+.cursor-pointer {
+  cursor: pointer;
+}
+
+/* Popup Trigger positioning overrides for all contexts */
+.voxket-popup-trigger {
+  position: fixed !important;
+  z-index: 9999 !important;
+}
+
+.voxket-popup-trigger[data-position="bottom-right"] {
+  bottom: 1rem !important;
+  right: 1rem !important;
+  left: auto !important;
+  top: auto !important;
+}
+
+.voxket-popup-trigger[data-position="bottom-left"] {
+  bottom: 1rem !important;
+  left: 1rem !important;
+  right: auto !important;
+  top: auto !important;
+}
+
+.voxket-popup-trigger[data-position="top-right"] {
+  top: 1rem !important;
+  right: 1rem !important;
+  left: auto !important;
+  bottom: auto !important;
+}
+
+.voxket-popup-trigger[data-position="top-left"] {
+  top: 1rem !important;
+  left: 1rem !important;
+  right: auto !important;
+  bottom: auto !important;
+}
 `, t = document.createElement("style");
   t.type = "text/css", t.setAttribute("data-voxket-styles", "true"), t.textContent = e, document.head.appendChild(t), Xa = !0;
 }
@@ -18101,7 +18412,36 @@ function $b({
     se.button,
     {
       onClick: e,
-      className: `fixed ${o[n]} z-50 px-4 py-2 rounded-full shadow-lg ${i.popupTrigger} transition-all duration-200 hover:scale-105`,
+      className: `voxket-popup-trigger fixed ${o[n]} z-[9999] px-4 py-2 rounded-full shadow-lg ${i.popupTrigger} transition-all duration-200 hover:scale-105`,
+      "data-position": n,
+      style: {
+        position: "fixed",
+        zIndex: 9999,
+        ...n === "bottom-right" && {
+          bottom: "1rem",
+          right: "1rem",
+          left: "auto",
+          top: "auto"
+        },
+        ...n === "bottom-left" && {
+          bottom: "1rem",
+          left: "1rem",
+          right: "auto",
+          top: "auto"
+        },
+        ...n === "top-right" && {
+          top: "1rem",
+          right: "1rem",
+          left: "auto",
+          bottom: "auto"
+        },
+        ...n === "top-left" && {
+          top: "1rem",
+          left: "1rem",
+          right: "auto",
+          bottom: "auto"
+        }
+      },
       initial: { scale: 0, opacity: 0 },
       animate: { scale: 1, opacity: 1 },
       exit: { scale: 0, opacity: 0 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voxket-ai/voxket-live",
-  "version": "1.0.102",
+  "version": "1.0.103",
   "description": "A React widget for embedding Voxket-powered audio/video/chat experiences.",
   "type": "module",
   "main": "./dist/index.cjs",