@nivaro/react 0.3.40 → 0.3.42

package/dist/shared/components/chat/MemberPaging.js

@@ -0,0 +1,70 @@
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { Search as d } from "lucide-react";
+import { useRef as i, useEffect as b } from "react";
+import { cn as f } from "../../lib/utils.js";
+function g(e, r) {
+  const t = e.toLocaleString("en-US");
+  return r ? `${t} ${e === 1 ? "match" : "matches"}` : `${t} ${e === 1 ? "member" : "members"}`;
+}
+function k({
+  value: e,
+  onChange: r,
+  className: t
+}) {
+  return /* @__PURE__ */ u("div", { className: f("relative", t), children: [
+    /* @__PURE__ */ n(d, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-slate-400" }),
+    /* @__PURE__ */ n(
+      "input",
+      {
+        value: e,
+        onChange: (a) => r(a.target.value),
+        placeholder: "Search by name or @handle…",
+        "aria-label": "Search members",
+        className: "h-7 w-full rounded-md border border-slate-200 bg-white pl-7 pr-2 text-[12px] text-slate-800 outline-none placeholder:text-slate-400 focus:border-slate-300 dark:border-white/10 dark:bg-white/5 dark:text-slate-100",
+        "data-chat-member-search": !0
+      }
+    )
+  ] });
+}
+function w({
+  hasMore: e,
+  loading: r,
+  onLoad: t
+}) {
+  const a = i(null), l = i(t);
+  return l.current = t, b(() => {
+    const o = a.current;
+    if (!e || !o || typeof IntersectionObserver > "u") return;
+    const s = new IntersectionObserver((c) => {
+      c.some((m) => m.isIntersecting) && l.current();
+    });
+    return s.observe(o), () => s.disconnect();
+  }, [e]), e ? /* @__PURE__ */ n("div", { ref: a, className: "py-1.5 text-center", children: /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: t,
+      disabled: r,
+      className: "text-[11px] font-medium text-slate-500 hover:text-slate-800 disabled:opacity-60 dark:text-slate-400 dark:hover:text-slate-100",
+      "data-chat-member-more": !0,
+      children: r ? "Loading…" : "Load more"
+    }
+  ) }) : null;
+}
+function y({ online: e }) {
+  return e ? /* @__PURE__ */ n(
+    "span",
+    {
+      className: "h-2 w-2 shrink-0 rounded-full bg-emerald-500 dark:bg-emerald-400",
+      title: "Online",
+      role: "img",
+      "aria-label": "Online"
+    }
+  ) : null;
+}
+export {
+  w as MemberLoadMore,
+  y as MemberOnlineDot,
+  k as MemberSearchBox,
+  g as memberCountLabel
+};