ssovee-os-web-ui 0.1.32 → 0.1.34

package/dist/index.cjs

@@ -1604,6 +1604,7 @@ var SearchInput = React22__namespace.default.forwardRef(
     className,
     value,
     onChange,
+    style,
     enableKeyboardShortcuts = false,
     isActive = true,
     ...props
@@ -1655,29 +1656,58 @@ var SearchInput = React22__namespace.default.forwardRef(
       outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
     };
     const sizeClasses = {
-      sm: "h-8 px-2 pl-8 text-sm leading-tight",
-      md: "h-10 px-3 pl-10 text-base leading-tight",
-      lg: "h-12 px-4 pl-12 text-lg leading-tight"
+      sm: "h-8 text-sm leading-tight",
+      md: "h-10 text-base leading-tight",
+      lg: "h-12 text-lg leading-tight"
     };
     const iconSizeClasses = {
       sm: "w-4 h-4",
       md: "w-5 h-5",
       lg: "w-6 h-6"
     };
+    const iconPixelSizes = {
+      sm: 16,
+      md: 18,
+      lg: 20
+    };
     const iconPositionClasses = {
-      sm: "left-2",
+      sm: "left-2.5",
       md: "left-3",
       lg: "left-3.5"
     };
+    const inputPaddings = {
+      sm: { left: "2.25rem", right: "0.5rem" },
+      md: { left: "2.75rem", right: "0.75rem" },
+      lg: { left: "3rem", right: "1rem" }
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full min-w-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
-            "pointer-events-none absolute top-1/2 -translate-y-1/2 text-neutral-400",
+            "pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 text-neutral-400",
             iconPositionClasses[size]
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: iconSizeClasses[size] })
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: cn("block shrink-0", iconSizeClasses[size]),
+              width: iconPixelSizes[size],
+              height: iconPixelSizes[size],
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.8",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              focusable: "false",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 20L16.65 16.65" })
+              ]
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1693,9 +1723,13 @@ var SearchInput = React22__namespace.default.forwardRef(
             variantClasses[variant],
             "w-full min-w-0",
             sizeClasses[size],
-            showClearButton && searchValue ? "pr-10" : "",
             className
           ),
+          style: {
+            paddingLeft: inputPaddings[size].left,
+            paddingRight: showClearButton && searchValue ? "2.5rem" : inputPaddings[size].right,
+            ...style
+          },
           ...props
         }
       ),
@@ -3230,16 +3264,60 @@ var soundMap = {
   success: success_tone_default,
   swipe: swipe_tone_default
 };
-var useSound = () => {
-  const playSound = React22.useCallback((type) => {
-    if (typeof window === "undefined" || typeof window.Audio === "undefined") {
-      return;
-    }
-    const soundSrc = soundMap[type];
-    const audio = new window.Audio(soundSrc);
-    audio.play().catch((err) => {
+var pendingPlaybackQueue = [];
+var interactionListenersBound = false;
+var clampVolume = (value) => Math.min(1, Math.max(0, value));
+var isAutoplayRestrictionError = (error) => {
+  if (!error || typeof error !== "object") return false;
+  const maybeError = error;
+  const message = maybeError.message?.toLowerCase() ?? "";
+  return maybeError.name === "NotAllowedError" || message.includes("gesture") || message.includes("user");
+};
+var playNativeAudio = async (type, options) => {
+  if (typeof window === "undefined" || typeof window.Audio === "undefined") {
+    return false;
+  }
+  const soundSrc = soundMap[type];
+  const audio = new window.Audio(soundSrc);
+  audio.preload = "auto";
+  audio.volume = clampVolume(options?.volume ?? 1);
+  if (options?.restart !== false) {
+    audio.currentTime = 0;
+  }
+  try {
+    await audio.play();
+    return true;
+  } catch (err) {
+    if (!isAutoplayRestrictionError(err)) {
       console.error("Sound playback failed:", err);
-    });
+    }
+    return false;
+  }
+};
+var flushPendingQueue = () => {
+  if (pendingPlaybackQueue.length === 0) return;
+  const items = pendingPlaybackQueue;
+  pendingPlaybackQueue = [];
+  items.forEach(({ type, options }) => {
+    void playNativeAudio(type, options);
+  });
+};
+var bindInteractionListeners = () => {
+  if (interactionListenersBound || typeof window === "undefined") return;
+  interactionListenersBound = true;
+  const unlockAndFlush = () => {
+    flushPendingQueue();
+  };
+  window.addEventListener("pointerdown", unlockAndFlush, { passive: true });
+  window.addEventListener("keydown", unlockAndFlush, { passive: true });
+};
+var useSound = () => {
+  const playSound = React22.useCallback(async (type, options) => {
+    bindInteractionListeners();
+    const played = await playNativeAudio(type, options);
+    if (played) return true;
+    pendingPlaybackQueue.push({ type, options });
+    return false;
   }, []);
   return { playSound };
 };