@flowsterix/react 0.1.0

package/dist/router/tanstackRouterAdapter.cjs

@@ -0,0 +1,202 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/router/tanstackRouterAdapter.tsx
+var tanstackRouterAdapter_exports = {};
+__export(tanstackRouterAdapter_exports, {
+  useTanStackRouterTourAdapter: () => useTanStackRouterTourAdapter
+});
+module.exports = __toCommonJS(tanstackRouterAdapter_exports);
+var import_react_router = require("@tanstack/react-router");
+var import_react = require("react");
+
+// src/utils/dom.ts
+var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+
+// src/router/routeGating.ts
+var DEFAULT_POLL_MS = 150;
+var normalizePathname = (pathname) => {
+  if (typeof pathname !== "string" || pathname.length === 0) {
+    return "/";
+  }
+  return pathname.startsWith("/") ? pathname : `/${pathname}`;
+};
+var normalizePrefixedSegment = (value, prefix) => {
+  if (typeof value !== "string" || value.length === 0) {
+    return "";
+  }
+  return value.startsWith(prefix) ? value : `${prefix}${value}`;
+};
+var getWindowPath = () => {
+  if (!isBrowser) return "/";
+  const { pathname, search, hash } = window.location;
+  return normalizePathname(pathname) + normalizePrefixedSegment(search, "?") + normalizePrefixedSegment(hash, "#");
+};
+var normalizeExternalPath = (path) => {
+  if (path.length === 0) {
+    return "/";
+  }
+  try {
+    const parsed = new URL(path, "http://flowsterix.local");
+    return normalizePathname(parsed.pathname) + normalizePrefixedSegment(parsed.search, "?") + normalizePrefixedSegment(parsed.hash, "#");
+  } catch {
+    const [withoutHash, hash = ""] = path.split("#");
+    const [base, search = ""] = withoutHash.split("?");
+    return normalizePathname(base) + normalizePrefixedSegment(search ? `?${search}` : "", "?") + normalizePrefixedSegment(hash ? `#${hash}` : "", "#");
+  }
+};
+var RouteGatingChannel = class {
+  #listeners = /* @__PURE__ */ new Set();
+  #currentPath = getWindowPath();
+  #teardown = null;
+  #attachDefaultListeners() {
+    if (!isBrowser) return;
+    if (this.#teardown) return;
+    let lastPath = getWindowPath();
+    const emitIfChanged = () => {
+      const nextPath = getWindowPath();
+      if (nextPath === lastPath) return;
+      lastPath = nextPath;
+      this.notify(nextPath);
+    };
+    const handler = () => emitIfChanged();
+    window.addEventListener("popstate", handler);
+    window.addEventListener("hashchange", handler);
+    const pollId = window.setInterval(emitIfChanged, DEFAULT_POLL_MS);
+    this.#teardown = () => {
+      window.removeEventListener("popstate", handler);
+      window.removeEventListener("hashchange", handler);
+      window.clearInterval(pollId);
+      this.#teardown = null;
+    };
+  }
+  #detachDefaultListeners() {
+    if (this.#listeners.size > 0) return;
+    this.#teardown?.();
+    this.#teardown = null;
+  }
+  getCurrentPath() {
+    if (isBrowser) {
+      this.#currentPath = getWindowPath();
+    }
+    return this.#currentPath;
+  }
+  notify(path) {
+    const resolved = typeof path === "string" && path.length > 0 ? normalizeExternalPath(path) : this.getCurrentPath();
+    if (resolved === this.#currentPath) {
+      this.#currentPath = resolved;
+      return;
+    }
+    this.#currentPath = resolved;
+    for (const listener of Array.from(this.#listeners)) {
+      try {
+        listener(resolved);
+      } catch (error) {
+        console.warn("[tour][route-gating] listener error", error);
+      }
+    }
+  }
+  subscribe(listener) {
+    if (this.#listeners.has(listener)) {
+      return () => {
+        this.#listeners.delete(listener);
+        this.#detachDefaultListeners();
+      };
+    }
+    this.#listeners.add(listener);
+    if (this.#listeners.size === 1) {
+      this.#attachDefaultListeners();
+    }
+    const current = this.getCurrentPath();
+    try {
+      listener(current);
+    } catch (error) {
+      console.warn("[tour][route-gating] listener error", error);
+    }
+    return () => {
+      this.#listeners.delete(listener);
+      this.#detachDefaultListeners();
+    };
+  }
+};
+var routeGatingChannel = new RouteGatingChannel();
+var notifyRouteChange = (path) => {
+  routeGatingChannel.notify(path);
+};
+
+// src/router/utils.ts
+var ensurePrefix = (value, prefix) => value.startsWith(prefix) ? value : `${prefix}${value}`;
+var isNonEmptyString = (value) => typeof value === "string" && value.length > 0;
+var toSearchString = (value) => {
+  if (!isNonEmptyString(value)) {
+    if (value instanceof URLSearchParams) {
+      const serialized = value.toString();
+      return serialized.length > 0 ? `?${serialized}` : "";
+    }
+    if (typeof value === "object" && value !== null) {
+      try {
+        const params = new URLSearchParams();
+        for (const [key, raw] of Object.entries(
+          value
+        )) {
+          if (raw === void 0 || raw === null) continue;
+          params.set(key, String(raw));
+        }
+        const serialized = params.toString();
+        return serialized.length > 0 ? `?${serialized}` : "";
+      } catch {
+        return "";
+      }
+    }
+    return "";
+  }
+  if (value === "?") return "";
+  return value.startsWith("?") ? value : ensurePrefix(value, "?");
+};
+var toHashString = (value) => {
+  if (!isNonEmptyString(value)) {
+    return "";
+  }
+  if (value === "#") return "";
+  return value.startsWith("#") ? value : ensurePrefix(value, "#");
+};
+var createPathString = (pathname, search, hash) => {
+  const normalizedPath = isNonEmptyString(pathname) ? pathname.startsWith("/") ? pathname : `/${pathname}` : "/";
+  const searchPart = toSearchString(search);
+  const hashPart = toHashString(hash);
+  return `${normalizedPath}${searchPart}${hashPart}`;
+};
+
+// src/router/tanstackRouterAdapter.tsx
+var useTanStackRouterTourAdapter = () => {
+  const location = (0, import_react_router.useRouterState)({
+    select: (state) => state.location
+  });
+  (0, import_react.useEffect)(() => {
+    const resolvedPathname = typeof location.pathname === "string" && location.pathname.length > 0 ? location.pathname : "/";
+    const resolvedSearch = "searchStr" in location && typeof location.searchStr === "string" ? location.searchStr : typeof location.search === "string" ? location.search : "";
+    const resolvedHash = typeof location.hash === "string" ? location.hash : "";
+    const path = typeof location.href === "string" && location.href.length > 0 ? location.href : createPathString(resolvedPathname, resolvedSearch, resolvedHash);
+    notifyRouteChange(path);
+  }, [location]);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTanStackRouterTourAdapter
+});

package/dist/router/tanstackRouterAdapter.d.ts

@@ -0,0 +1,2 @@
+export declare const useTanStackRouterTourAdapter: () => void;
+//# sourceMappingURL=tanstackRouterAdapter.d.ts.map

package/dist/router/tanstackRouterAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tanstackRouterAdapter.d.ts","sourceRoot":"","sources":["../../src/router/tanstackRouterAdapter.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,4BAA4B,YAyBxC,CAAA"}

package/dist/router/tanstackRouterAdapter.mjs

@@ -0,0 +1,7 @@
+import {
+  useTanStackRouterTourAdapter
+} from "../chunk-RCASLQRS.mjs";
+import "../chunk-RPA2S5UP.mjs";
+export {
+  useTanStackRouterTourAdapter
+};

package/dist/router/tanstackRouterSync.d.ts

@@ -0,0 +1,20 @@
+type RouterLike = {
+    state: {
+        location: {
+            pathname: string;
+        };
+    };
+    navigate: (opts: {
+        to: string;
+    }) => Promise<unknown>;
+};
+export declare const setTourRouter: (router: RouterLike | null) => void;
+export declare const setTanStackRouter: (router: RouterLike | null) => void;
+export declare const getTourRouter: () => RouterLike | null;
+export declare const getTanStackRouter: () => RouterLike | null;
+export interface TanStackRouterSyncProps {
+    onRouterAvailable?: (router: RouterLike | null) => void;
+}
+export declare const TanStackRouterSync: ({ onRouterAvailable, }: TanStackRouterSyncProps) => null;
+export {};
+//# sourceMappingURL=tanstackRouterSync.d.ts.map

package/dist/router/tanstackRouterSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tanstackRouterSync.d.ts","sourceRoot":"","sources":["../../src/router/tanstackRouterSync.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE;QAAE,QAAQ,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAA;IACzC,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;CACrD,CAAA;AAID,eAAO,MAAM,aAAa,GAAI,QAAQ,UAAU,GAAG,IAAI,SAEtD,CAAA;AAED,eAAO,MAAM,iBAAiB,WAJQ,UAAU,GAAG,IAAI,SAIT,CAAA;AAE9C,eAAO,MAAM,aAAa,QAAO,UAAU,GAAG,IAE7C,CAAA;AAED,eAAO,MAAM,iBAAiB,QAJG,UAAU,GAAG,IAIA,CAAA;AAE9C,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAA;CACxD;AAED,eAAO,MAAM,kBAAkB,GAAI,wBAEhC,uBAAuB,SAiCzB,CAAA"}

package/dist/router/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const createPathString: (pathname: unknown, search?: unknown, hash?: unknown) => string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/router/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/router/utils.ts"],"names":[],"mappings":"AA0CA,eAAO,MAAM,gBAAgB,GAC3B,UAAU,OAAO,EACjB,SAAS,OAAO,EAChB,OAAO,OAAO,KACb,MASF,CAAA"}

package/dist/utils/dom.d.ts

@@ -0,0 +1,22 @@
+export declare const isBrowser: boolean;
+type RectInit = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export type ClientRectLike = RectInit & {
+    right: number;
+    bottom: number;
+};
+export declare const createRect: ({ top, left, width, height, }: RectInit) => ClientRectLike;
+export declare const toClientRect: (rect: DOMRect | DOMRectReadOnly) => ClientRectLike;
+export declare const getViewportRect: () => ClientRectLike;
+export declare const expandRect: (rect: ClientRectLike, padding: number) => ClientRectLike;
+export declare const isRectInViewport: (rect: ClientRectLike, margin?: number) => boolean;
+export declare const getClientRect: (element: Element) => ClientRectLike;
+export declare const getScrollParents: (element: Element) => Array<Element>;
+export declare const portalHost: () => HTMLElement | null;
+export declare const supportsMasking: () => boolean;
+export {};
+//# sourceMappingURL=dom.d.ts.map

package/dist/utils/dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,SAC4C,CAAA;AAElE,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,+BAKxB,QAAQ,KAAG,cAOZ,CAAA;AAEF,eAAO,MAAM,YAAY,GAAI,MAAM,OAAO,GAAG,eAAe,KAAG,cAM3D,CAAA;AAEJ,eAAO,MAAM,eAAe,QAAO,cAgBlC,CAAA;AAED,eAAO,MAAM,UAAU,GACrB,MAAM,cAAc,EACpB,SAAS,MAAM,KACd,cAeF,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,MAAM,cAAc,EAAE,eAAU,YAUhE,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,OAAO,KAAG,cACF,CAAA;AAe/C,eAAO,MAAM,gBAAgB,GAAI,SAAS,OAAO,KAAG,KAAK,CAAC,OAAO,CA4BhE,CAAA;AAED,eAAO,MAAM,UAAU,0BAA2C,CAAA;AA4BlE,eAAO,MAAM,eAAe,eAM3B,CAAA"}

package/dist/utils/focus.d.ts

@@ -0,0 +1,4 @@
+export declare const isFocusableElement: (element: Element | null) => element is HTMLElement;
+export declare const getFocusableIn: (root: Element | Document | null) => Array<HTMLElement>;
+export declare const focusElement: (element: HTMLElement | null | undefined, options?: FocusOptions) => void;
+//# sourceMappingURL=focus.d.ts.map

package/dist/utils/focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../src/utils/focus.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,kBAAkB,GAC7B,SAAS,OAAO,GAAG,IAAI,KACtB,OAAO,IAAI,WAsBb,CAAA;AAED,eAAO,MAAM,cAAc,GACzB,MAAM,OAAO,GAAG,QAAQ,GAAG,IAAI,KAC9B,KAAK,CAAC,WAAW,CAkBnB,CAAA;AAED,eAAO,MAAM,YAAY,GACvB,SAAS,WAAW,GAAG,IAAI,GAAG,SAAS,EACvC,UAAU,YAAY,SAQvB,CAAA"}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@flowsterix/react",
+  "version": "0.1.0",
+  "description": "React bindings for Flowsterix - guided tours and onboarding flows",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kvngrf/flowsterix.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "tour",
+    "onboarding",
+    "walkthrough",
+    "guide",
+    "flow",
+    "react"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    },
+    "./router": {
+      "types": "./dist/router/index.d.ts",
+      "import": "./dist/router/index.mjs",
+      "require": "./dist/router/index.cjs",
+      "default": "./dist/router/index.mjs"
+    },
+    "./router/tanstack": {
+      "types": "./dist/router/tanstackRouterAdapter.d.ts",
+      "import": "./dist/router/tanstackRouterAdapter.mjs",
+      "require": "./dist/router/tanstackRouterAdapter.cjs",
+      "default": "./dist/router/tanstackRouterAdapter.mjs"
+    },
+    "./router/react-router": {
+      "types": "./dist/router/reactRouterAdapter.d.ts",
+      "import": "./dist/router/reactRouterAdapter.mjs",
+      "require": "./dist/router/reactRouterAdapter.cjs",
+      "default": "./dist/router/reactRouterAdapter.mjs"
+    },
+    "./router/next-app": {
+      "types": "./dist/router/nextAppRouterAdapter.d.ts",
+      "import": "./dist/router/nextAppRouterAdapter.mjs",
+      "require": "./dist/router/nextAppRouterAdapter.cjs",
+      "default": "./dist/router/nextAppRouterAdapter.mjs"
+    },
+    "./router/next-pages": {
+      "types": "./dist/router/nextPagesRouterAdapter.d.ts",
+      "import": "./dist/router/nextPagesRouterAdapter.mjs",
+      "require": "./dist/router/nextPagesRouterAdapter.cjs",
+      "default": "./dist/router/nextPagesRouterAdapter.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "@flowsterix/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "motion": ">=11",
+    "@tanstack/react-router": ">=1",
+    "next": ">=13",
+    "react-router-dom": ">=6"
+  },
+  "peerDependenciesMeta": {
+    "motion": {
+      "optional": false
+    },
+    "@tanstack/react-router": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup --config tsup.config.ts --format esm,cjs --clean && tsc --build tsconfig.json --force",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest run"
+  }
+}