@gohanfromgoku/ui-kit 1.0.0 → 1.0.1

package/dist/navigation/createBrowserRouter.js

@@ -1,18 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import createStore from "../storage/index";
 import { generateURLToNavigate, isRouteMatching } from "./support/url.support";
 import { extractParamsFromURL } from "./support/params.support";
 import { extractQueryParamsFromURL } from "./support/query-params.support";
-// Initialize stores
-const { locationDetails } = createStore("locationDetails", {
-    value: { params: {}, queryParams: {}, ...window.location }
-});
-const { activeRoute } = createStore("activeRoute", {
-    value: {}
-});
 const createBrowserRouter = (routes, { page404 } = { page404: () => _jsx(_Fragment, { children: "Page Not Found" }) }) => {
-    // Navigate function
+    const getLatestLocationDetails = () => {
+        const { hash, href, origin, pathname, port, protocol, search } = window.location;
+        return { hash, href, origin, pathname, port, protocol, search };
+    };
+    const { locationDetails, useLocationDetailsState } = createStore("locationDetails", { params: {}, queryParams: {}, ...getLatestLocationDetails() });
+    const { activeRoute, useActiveRouteState } = createStore("activeRoute", routes.find(r => isRouteMatching(r.pathname)) || { pathname: window.location.pathname, component: page404 });
     const navigate = (to, { queryParams, replace } = {}) => {
         if (typeof to === "number") {
             window.history.go(to);
@@ -27,44 +25,28 @@ const createBrowserRouter = (routes, { page404 } = { page404: () => _jsx(_Fragme
         else {
             window.history.pushState({}, "", url);
         }
-        // Trigger update
         window.dispatchEvent(new Event("popstate"));
     };
-    // Hook to get current location details
     const useLocationDetails = () => {
         if (routes.length === 0) {
             throw new Error("useLocationDetails cannot be used without initializing routes. Use createBrowserRouter with routes.");
         }
-        const [state, setState] = useState(locationDetails.value);
-        useEffect(() => {
-            const update = () => setState(locationDetails.value);
-            window.addEventListener("popstate", update);
-            return () => window.removeEventListener("popstate", update);
-        }, []);
-        return state;
+        return useLocationDetailsState();
     };
-    // Outlet component
     const Outlet = () => {
-        const [, setRender] = useState(0);
+        const { component } = useActiveRouteState();
         useEffect(() => {
             const updateLocation = () => {
-                // Find active route
-                const active = routes.find(r => isRouteMatching(r.pathname)) ||
-                    { pathname: window.location.pathname, component: page404 };
-                activeRoute.setState({ value: active });
-                // Update location details
+                const active = routes.find(r => isRouteMatching(r.pathname)) || { pathname: window.location.pathname, component: page404 };
                 const params = extractParamsFromURL(window.location.pathname, active.pathname);
                 const queryParams = extractQueryParamsFromURL(window.location.href);
-                locationDetails.setState({ value: { params, queryParams, ...window.location } });
-                // Force re-render
-                setRender(r => r + 1);
+                activeRoute.setState(active);
+                locationDetails.setState({ params, queryParams, ...getLatestLocationDetails() });
             };
-            // Initial update
-            updateLocation();
             window.addEventListener("popstate", updateLocation);
             return () => window.removeEventListener("popstate", updateLocation);
         }, []);
-        const Component = activeRoute.value?.component ?? page404;
+        const Component = component ?? page404;
         return _jsx(Component, {});
     };
     return {

package/dist/navigation/createMemoryRouter.js

@@ -5,12 +5,16 @@ import { generateURLToNavigate, isRouteMatching } from "./support/url.support";
 import { extractParamsFromURL } from "./support/params.support";
 import { extractQueryParamsFromURL } from "./support/query-params.support";
 const createMemoryRouter = (routes, { page404 } = { page404: () => _jsx(_Fragment, { children: "Page Not Found" }) }) => {
+    const getLatestLocationDetails = () => {
+        const { hash, href, origin, port, protocol, search } = window.location;
+        return { hash, href, origin, port, protocol, search };
+    };
     if (routes.length === 0) {
         throw "Atleast one route should present";
     }
     ;
-    const { activeRoute } = createStore("activeRoute", routes.find(() => isRouteMatching("/")) || { pathname: "/", component: page404 });
-    const { locationDetails } = createStore("locationDetails", { params: {}, queryParams: {}, ...window.location, pathname: activeRoute.pathname });
+    const { activeRoute, useActiveRouteState } = createStore("activeRoute", routes.find(() => isRouteMatching("/")) || { pathname: "/", component: page404 });
+    const { locationDetails, useLocationDetailsState } = createStore("locationDetails", { params: {}, queryParams: {}, ...getLatestLocationDetails(), pathname: activeRoute.pathname });
     const { entries } = createStore("entries", { value: ["/"] });
     const { currentIndex } = createStore("currentIndex", { value: 0 });
     const navigate = (to, { queryParams } = {}) => {
@@ -25,7 +29,7 @@ const createMemoryRouter = (routes, { page404 } = { page404: () => _jsx(_Fragmen
             activeRoute.setState(active);
             const params = extractParamsFromURL(url, active.pathname);
             const allQueryParams = extractQueryParamsFromURL(url);
-            locationDetails.setState({ params, queryParams: allQueryParams, ...window.location, pathname: active.pathname });
+            locationDetails.setState({ params, queryParams: allQueryParams, ...getLatestLocationDetails(), pathname: active.pathname });
             return;
         }
         const url = generateURLToNavigate(to, queryParams || {});
@@ -36,19 +40,16 @@ const createMemoryRouter = (routes, { page404 } = { page404: () => _jsx(_Fragmen
         activeRoute.setState(active);
         const params = extractParamsFromURL(to, activeRoute.pathname);
         const allQueryParams = extractQueryParamsFromURL(url);
-        locationDetails.setState({ params, queryParams: allQueryParams, ...window.location, pathname: active.pathname });
+        locationDetails.setState({ params, queryParams: allQueryParams, ...getLatestLocationDetails(), pathname: active.pathname });
         currentIndex.setState({ value: currentIndex.value + 1 });
     };
-    const useLocationDetails = () => {
-        return locationDetails;
-    };
     const Outlet = () => {
-        const Component = activeRoute.component;
+        const { component: Component } = useActiveRouteState();
         return _jsx(Component, {});
     };
     return {
         navigate,
-        useLocationDetails,
+        useLocationDetails: useLocationDetailsState,
         Outlet
     };
 };

package/dist/translations/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { objectPath } from "../helpers/index";
 import { createContext, useContext, useState, useEffect, } from "react";
+import { objectPath } from "../helpers/index";
 const TranslationsContext = createContext(null);
 const isBrowser = typeof window !== "undefined";
 const interpolate = (str, data) => str.replace(/{{\s*(\w+)\s*}}/g, (_, key) => key in data ? String(data[key]) : `{{${key}}}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gohanfromgoku/ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "ui-kit is a TypeScript based UI component library designed for building modern web applications with ease and efficiency.",
   "sideEffects": false,
   "scripts": {
@@ -26,10 +26,10 @@
   "author": "GohanfromGoku",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^19.2.3"
+    "react": ">=18"
   },
   "devDependencies": {
-    "@types/react": "^19.2.8",
+    "@types/react": ">=18",
     "react": "^19.2.3",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.3"

package/types/navigation/createBrowserRouter.d.ts

@@ -11,20 +11,13 @@ declare const createBrowserRouter: (routes: Route[], { page404 }?: {
         replace?: boolean;
     }) => void;
     useLocationDetails: () => {
-        ancestorOrigins: DOMStringList;
         hash: string;
-        host: string;
-        hostname: string;
         href: string;
-        toString(): string;
         origin: string;
         pathname: string;
         port: string;
         protocol: string;
         search: string;
-        assign(url: string | URL): void;
-        reload(): void;
-        replace(url: string | URL): void;
         params: {};
         queryParams: {};
     };

package/types/navigation/createMemoryRouter.d.ts

@@ -11,41 +11,14 @@ declare const createMemoryRouter: (routes: Route[], { page404 }?: {
     }) => void;
     useLocationDetails: () => {
         pathname: string;
-        ancestorOrigins: DOMStringList;
         hash: string;
-        host: string;
-        hostname: string;
         href: string;
-        toString(): string;
         origin: string;
         port: string;
         protocol: string;
         search: string;
-        assign(url: string | URL): void;
-        reload(): void;
-        replace(url: string | URL): void;
         params: {};
         queryParams: {};
-    } & {
-        setState: (partial: Partial<{
-            pathname: string;
-            ancestorOrigins: DOMStringList;
-            hash: string;
-            host: string;
-            hostname: string;
-            href: string;
-            toString(): string;
-            origin: string;
-            port: string;
-            protocol: string;
-            search: string;
-            assign(url: string | URL): void;
-            reload(): void;
-            replace(url: string | URL): void;
-            params: {};
-            queryParams: {};
-        }>) => void;
-        resetState: () => void;
     };
     Outlet: () => import("react/jsx-runtime").JSX.Element;
 };