@flytedan/flytebot-design-system 0.40.0 → 0.41.0

package/dist/index.cjs

@@ -102,6 +102,7 @@ __export(index_exports, {
   FormatEta: () => FormatEta,
   FunnelChart: () => FunnelChart,
   Gate: () => Gate,
+  GatePending: () => GatePending,
   IMPORTANCE_LEVELS: () => IMPORTANCE_LEVELS,
   IconButton: () => IconButton,
   ImportanceTag: () => ImportanceTag,
@@ -10614,8 +10615,38 @@ function PermissionDenied({ permission, title, detail, compact: compact3 = false
     }
   );
 }
-function Gate({ perm, anyOf, role, silent = false, fallback, compact: compact3 = false, children }) {
-  const { can: can2, canAny: canAny2, hasRole: hasRole2 } = useSessionContext();
+function GatePending({ compact: compact3 = false, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    "div",
+    {
+      className: ["fd-stack", className].filter(Boolean).join(" "),
+      style: {
+        gap: 10,
+        alignItems: "flex-start",
+        padding: compact3 ? "14px 16px" : "28px 24px",
+        borderRadius: 10,
+        border: "1px dashed var(--border-strong)",
+        background: "var(--surface-2)",
+        maxWidth: 560,
+        textAlign: "left"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "fd-row", style: { gap: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("i", { className: "ph ph-arrows-clockwise", style: { fontSize: 16, color: "var(--text-muted)" }, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: compact3 ? "fd-label-lg" : "fd-h3", children: "Reconnecting\u2026" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "fd-body-sm fd-secondary", style: { margin: 0, textWrap: "pretty" }, children: "Your access can't be verified right now. This will resolve on its own once the connection is back." })
+      ]
+    }
+  );
+}
+function Gate({ perm, anyOf, role, silent = false, fallback, pendingFallback, compact: compact3 = false, children }) {
+  const { can: can2, canAny: canAny2, hasRole: hasRole2, pending } = useSessionContext();
+  if (pending) {
+    if (pendingFallback !== void 0) return pendingFallback;
+    if (silent) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(GatePending, { compact: compact3 });
+  }
   let ok = true;
   if (perm) ok = ok && can2(perm);
   if (anyOf) ok = ok && canAny2(anyOf);
@@ -14107,6 +14138,7 @@ function useDocumentTitle(routeTitle, appName) {
   FormatEta,
   FunnelChart,
   Gate,
+  GatePending,
   IMPORTANCE_LEVELS,
   IconButton,
   ImportanceTag,