@gohanfromgoku/ui-kit 0.1.2 → 1.0.0

package/dist/components/Button/index.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { memo, forwardRef } from "preact/compat";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { checkProps } from "../../helpers/index";
+import { forwardRef, memo } from "react";
 const defaultProps = {
     onClick: () => { },
     disabled: false,
     className: "",
     type: "button",
 };
-const Button = forwardRef((props, ref) => {
+const Button = memo(forwardRef((props, ref) => {
     const { children, className, onClick, disabled, type, ...rest } = { ...defaultProps, ...props };
     return (_jsx("button", { ref: ref, className: className, disabled: disabled, type: type, onClick: (event) => {
             if (type === "button" || !type) {
@@ -17,5 +17,6 @@ const Button = forwardRef((props, ref) => {
                 onClick(event);
             }
         }, ...rest, children: children }));
-});
-export default memo(Button, checkProps);
+}), checkProps);
+Button.displayName = "Button";
+export default Button;

package/dist/components/Image/index.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { forwardRef, memo } from "preact/compat";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo } from "react";
 import { checkProps } from "../../helpers/index";
 const defaultProps = {
     altImage: null,
@@ -8,12 +8,13 @@ const defaultProps = {
     priority: true,
     onClick: () => { }
 };
-const Image = forwardRef((props, ref) => {
+const Image = memo(forwardRef((props, ref) => {
     const { altImage, className, src, priority, onClick, alt, ...rest } = { ...defaultProps, ...props };
     return (_jsx("img", { src: src, ref: ref, width: "100%", height: "100%", onClick: (event) => { event.preventDefault(); onClick(event); }, draggable: false, onError: async () => {
             if (ref && 'current' in ref && ref.current) {
                 ref.current.src = altImage || "";
             }
         }, alt: alt, className: className, fetchPriority: priority ? "high" : "auto", loading: priority ? "eager" : "lazy", ...rest }));
-});
-export default memo(Image, checkProps);
+}), checkProps);
+Image.displayName = "Image";
+export default Image;

package/dist/components/Input/index.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { memo } from "preact/compat";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo } from "react";
 import { checkProps } from "../../helpers/index";
-import { translate } from "../../translations/index";
+import { useTranslations } from "../../translations/index";
 const defaultProps = {
     onChange: () => { },
     className: "",
@@ -9,8 +9,10 @@ const defaultProps = {
     type: "text",
     name: ""
 };
-const Input = (props) => {
+const Input = memo(forwardRef((props, ref) => {
+    const { translate } = useTranslations();
     const { onChange, className, placeholder, type, name, ...rest } = { ...defaultProps, ...props };
-    return _jsx("input", { className: className, placeholder: translate(placeholder), type: type, name: name, onChange: event => onChange(event.currentTarget.value, event), ...rest });
-};
-export default memo(Input, checkProps);
+    return _jsx("input", { className: className, placeholder: translate(placeholder), type: type, ref: ref, name: name, onChange: event => onChange(event.currentTarget.value, event), ...rest });
+}), checkProps);
+Input.displayName = "Input";
+export default Input;

package/dist/components/Text/index.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { checkProps } from "../../helpers/index";
-import { translate } from "../../translations/index";
-import { forwardRef, memo, useMemo } from "preact/compat";
+import { useTranslations } from "../../translations/index";
+import { forwardRef, memo } from "react";
 const defaultProps = {
     text: "",
     data: {},
@@ -10,12 +10,14 @@ const defaultProps = {
     tag: "span",
     onClick: () => { },
 };
-const Text = forwardRef((props, ref) => {
+const Text = memo(forwardRef((props, ref) => {
+    const { translate } = useTranslations();
     const { text, data, html, className, tag: Tag, onClick, ...rest } = { ...defaultProps, ...props };
-    const translated = useMemo(() => translate(text, data), [text, JSON.stringify(data)]);
+    const translated = translate(text, data);
     if (html) {
         return (_jsx(Tag, { ...rest, ref: ref, dangerouslySetInnerHTML: { __html: translated }, className: className, onClick: (event) => { event.preventDefault(); onClick(event); } }));
     }
     return (_jsx(Tag, { ...rest, ref: ref, className: className, onClick: (event) => { event.preventDefault(); onClick(event); }, children: translated }));
-});
-export default memo(Text, checkProps);
+}), checkProps);
+Text.displayName = "Text";
+export default Text;

package/dist/components/Tooltip/index.js

@@ -1,14 +1,15 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { useEffect, useRef } from "preact/hooks";
-import { memo } from "preact/compat";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { memo } from "react";
 import { checkProps, toast } from "../../helpers/index";
-import { translate } from "../../translations/index";
+import { useTranslations } from "../../translations/index";
 const isTouchDevice = () => typeof window !== "undefined" && "ontouchstart" in window;
 const styles = {
     width: "fit-content",
     height: "fit-content"
 };
-const Tooltip = ({ message, children, className }) => {
+const Tooltip = memo(({ message, children, className }) => {
+    const { translate } = useTranslations();
     const ref = useRef(null);
     const toastRef = useRef(null);
     useEffect(() => {
@@ -48,5 +49,6 @@ const Tooltip = ({ message, children, className }) => {
             else
                 toastRef.current = toast(translate(message), ref.current, 2000);
         }, children: children }));
-};
-export default memo(Tooltip, checkProps);
+}, checkProps);
+Tooltip.displayName = "Tooltip";
+export default Tooltip;

package/dist/hooks/useHandleClickOutside.js

@@ -1,4 +1,4 @@
-import { useEffect } from "preact/compat";
+import { useEffect } from "react";
 const useHandleClickOutside = (ref, cb) => {
     useEffect(() => {
         const handlePointerDown = (event) => {

package/dist/hooks/useQueryParams.js

@@ -1,5 +1,5 @@
-import { signal } from "@preact/signals";
-const queryParamsSignal = signal({});
+import createStore from "../storage/index";
+const { queryParamsSignal } = createStore("queryParamsSignal", { value: {} });
 const getParams = () => {
     const search = window.location.search.slice(1);
     const params = new URLSearchParams(search);
@@ -8,10 +8,8 @@ const getParams = () => {
         obj[key] = value;
     return obj;
 };
-queryParamsSignal.value = getParams();
-window.addEventListener("popstate", () => {
-    queryParamsSignal.value = getParams();
-});
+queryParamsSignal.setState({ value: getParams() });
+window.addEventListener("popstate", () => { queryParamsSignal.setState({ value: getParams() }); });
 export const setQueryParams = (updates, { replace = false, pathname } = {}) => {
     const params = new URLSearchParams();
     Object.entries(updates).forEach(([key, value]) => {
@@ -26,6 +24,6 @@ export const setQueryParams = (updates, { replace = false, pathname } = {}) => {
         window.history.replaceState({}, "", newUrl);
     else
         window.history.pushState({}, "", newUrl);
-    queryParamsSignal.value = getParams();
+    queryParamsSignal.setState({ value: getParams() });
 };
 export { queryParamsSignal as queryParams };

package/dist/hooks/useWindowSize.js

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo, useState } from "preact/hooks";
+import { useLayoutEffect, useMemo, useState } from "react";
 const useWindowSize = () => {
     const [size, setSize] = useState({ height: window.innerHeight, width: window.innerWidth });
     useLayoutEffect(() => {

package/dist/navigation/createBrowserRouter.js

@@ -0,0 +1,76 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } 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 navigate = (to, { queryParams, replace } = {}) => {
+        if (typeof to === "number") {
+            window.history.go(to);
+            return;
+        }
+        const url = generateURLToNavigate(to, queryParams || {});
+        if (window.location.href === url)
+            return;
+        if (replace) {
+            window.history.replaceState({}, "", url);
+        }
+        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;
+    };
+    // Outlet component
+    const Outlet = () => {
+        const [, setRender] = useState(0);
+        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 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);
+            };
+            // Initial update
+            updateLocation();
+            window.addEventListener("popstate", updateLocation);
+            return () => window.removeEventListener("popstate", updateLocation);
+        }, []);
+        const Component = activeRoute.value?.component ?? page404;
+        return _jsx(Component, {});
+    };
+    return {
+        navigate,
+        useLocationDetails,
+        Outlet
+    };
+};
+export default createBrowserRouter;

package/dist/navigation/createMemoryRouter.js

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import {} 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";
+const createMemoryRouter = (routes, { page404 } = { page404: () => _jsx(_Fragment, { children: "Page Not Found" }) }) => {
+    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 { entries } = createStore("entries", { value: ["/"] });
+    const { currentIndex } = createStore("currentIndex", { value: 0 });
+    const navigate = (to, { queryParams } = {}) => {
+        if (typeof to === "number") {
+            const targetIndex = currentIndex.value + to;
+            if (targetIndex < 0 || targetIndex >= entries.value.length)
+                return;
+            const raw = entries.value[targetIndex];
+            const url = raw.startsWith("http") ? new URL(raw).pathname + new URL(raw).search : raw;
+            currentIndex.setState({ value: targetIndex });
+            const active = routes.find(r => isRouteMatching(r.pathname, url)) || { pathname: url, component: page404 };
+            activeRoute.setState(active);
+            const params = extractParamsFromURL(url, active.pathname);
+            const allQueryParams = extractQueryParamsFromURL(url);
+            locationDetails.setState({ params, queryParams: allQueryParams, ...window.location, pathname: active.pathname });
+            return;
+        }
+        const url = generateURLToNavigate(to, queryParams || {});
+        if (activeRoute.pathname === url)
+            return;
+        entries.setState({ value: [...entries.value, url] });
+        const active = routes.find(r => isRouteMatching(r.pathname, to)) || { pathname: to, component: page404 };
+        activeRoute.setState(active);
+        const params = extractParamsFromURL(to, activeRoute.pathname);
+        const allQueryParams = extractQueryParamsFromURL(url);
+        locationDetails.setState({ params, queryParams: allQueryParams, ...window.location, pathname: active.pathname });
+        currentIndex.setState({ value: currentIndex.value + 1 });
+    };
+    const useLocationDetails = () => {
+        return locationDetails;
+    };
+    const Outlet = () => {
+        const Component = activeRoute.component;
+        return _jsx(Component, {});
+    };
+    return {
+        navigate,
+        useLocationDetails,
+        Outlet
+    };
+};
+export default createMemoryRouter;

package/dist/navigation/index.js

@@ -1,4 +1,2 @@
-export { default as Outlet } from "./Outlet";
-export { default as createRoutes } from "./createRoutes";
-export { default as navigate } from "./navigate";
-export { default as useLocationDetails } from "./useLocationDetails";
+export { default as createBrowserRouter } from "./createBrowserRouter";
+export { default as createMemoryRouter } from "./createMemoryRouter";

package/dist/navigation/{extractParamsFromURL.js → support/params.support.js}

@@ -3,8 +3,7 @@
  */
 export const extractParamsFromURL = (url, compareWith) => {
     const params = {};
-    const href = url.startsWith(window.location.origin) ? url.split(window.location.origin)[1] : url;
-    const parts = href.split("?");
+    const parts = url.split("?");
     if (parts.length > 2) {
         throw "Invalid URL";
     }

package/dist/navigation/support/query-params.support.js

@@ -0,0 +1,43 @@
+/**
+ * @internal
+ */
+export const createQueryParamsSearchString = (queryParams) => {
+    const keys = Object.keys(queryParams);
+    if (keys.length > 0) {
+        let search = "?";
+        for (let index = 0; index < keys.length; index++) {
+            const key = keys[index];
+            search = `${search}${key}=${queryParams[key]}`;
+            if (index !== keys.length - 1) {
+                search = search + "&";
+            }
+        }
+        return search;
+    }
+    return "";
+};
+export const extractQueryParamsFromURL = (url) => {
+    const queryObj = {};
+    const parts = url.split("?");
+    if (parts.length > 2) {
+        throw "Invalid URL";
+    }
+    ;
+    if (parts.length === 1) {
+        return queryObj;
+    }
+    ;
+    const search = parts[1];
+    if (search && search.length > 0) {
+        const queries = search.split("&");
+        for (const query of queries) {
+            const queryParts = query.split("=");
+            if (queryParts.length > 2) {
+                throw "Invalid URL";
+            }
+            const [key, value] = queryParts;
+            queryObj[decodeURIComponent(key)] = decodeURIComponent(value ?? "");
+        }
+    }
+    return queryObj;
+};

package/dist/navigation/support/url.support.js

@@ -0,0 +1,20 @@
+import { createQueryParamsSearchString, extractQueryParamsFromURL } from "./query-params.support";
+export const generateURLToNavigate = (pathname, queryParams) => {
+    const queryParamsFromPathname = extractQueryParamsFromURL(pathname);
+    const allQueryParams = createQueryParamsSearchString({ ...queryParamsFromPathname, ...queryParams });
+    const url = pathname.startsWith("/") ? `${window.location.origin}${pathname.split("?")[0]}` : `${window.location.origin}/${pathname.split("?")[0]}`;
+    const path = `${url}${allQueryParams}`;
+    return path;
+};
+export const isRouteMatching = (routePath, comparePath) => {
+    const current = comparePath ?? window.location.pathname;
+    if (routePath === "/" || routePath === "") {
+        const isRoot = current === "/" || current === "/index.html" || current === "";
+        return isRoot;
+    }
+    const routeParts = routePath.split("/").filter(Boolean);
+    const currentParts = current.split("/").filter(Boolean);
+    if (routeParts.length !== currentParts.length)
+        return false;
+    return routeParts.every((part, i) => part.startsWith(":") || part === currentParts[i]);
+};

package/dist/prototypes/copyToClipboard.js

@@ -1,5 +1,6 @@
 import toast from "../helpers/toast";
-const copyToClipboard = async (text = "", message = "Copied") => {
+const copyToClipboard = async function (message = "Copied") {
+    const text = this;
     try {
         if (navigator.clipboard && window.isSecureContext) {
             await navigator.clipboard.writeText(text);

package/dist/prototypes/index.js

@@ -1,6 +1,8 @@
 import copyToClipboard from "./copyToClipboard";
 import maskString from "./maskString";
+import capitalize from "./stringCapitalize";
 if (!String.prototype.copy) {
     String.prototype.copy = copyToClipboard;
     String.prototype.mask = maskString;
+    String.prototype.capitalize = capitalize;
 }

package/dist/prototypes/stringCapitalize.js

@@ -0,0 +1,4 @@
+const capitalize = function () {
+    return (this.charAt(0).toUpperCase() + this.slice(1));
+};
+export default capitalize;

package/dist/storage/index.js

@@ -1,51 +1,36 @@
-import { signal } from "@preact/signals";
-const createStore = (name, initialState, persist = []) => {
-    const state = signal({ ...initialState });
-    try {
-        const stored = localStorage.getItem(name);
-        if (stored) {
-            state.value = { ...state.value, ...JSON.parse(stored) };
-        }
-    }
-    catch {
-        // Catch any Errors
-    }
-    const setState = (values) => {
-        state.value = { ...state.value, ...values };
-        if (persist.length) {
-            const toStore = persist.reduce((acc, key) => {
-                acc[key] = state.value[key];
-                return acc;
-            }, {});
-            localStorage.setItem(name, JSON.stringify(toStore));
-        }
+import "../prototypes";
+import { useSyncExternalStore } from "react";
+export default function createStore(name, initialState) {
+    let state = initialState;
+    const listeners = new Set();
+    const subscribe = (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    };
+    const getSnapshot = () => state;
+    const setState = (partial) => {
+        state = { ...state, ...partial };
+        listeners.forEach(l => l());
     };
     const resetState = () => {
-        state.value = initialState;
-        localStorage.removeItem(name);
+        state = initialState;
+        listeners.forEach(l => l());
     };
-    return Object.assign(new Proxy(initialState, {
-        get(_, prop) {
-            switch (prop) {
-                case "setState":
-                    return setState;
-                case "resetState":
-                    return resetState;
-                default:
-                    return state.value[prop];
-            }
-        },
-        set(_, prop, value) {
-            state.value = { ...state.value, [prop]: value };
-            if (persist.includes(prop)) {
-                const toStore = persist.reduce((acc, key) => {
-                    acc[key] = state.value[key];
-                    return acc;
-                }, {});
-                localStorage.setItem(name, JSON.stringify(toStore));
-            }
-            return true;
+    const useStore = () => useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    const capName = name.capitalize();
+    const exposedState = {};
+    Object.keys(initialState).forEach(key => {
+        Object.defineProperty(exposedState, key, {
+            enumerable: true,
+            get: () => state[key],
+        });
+    });
+    return {
+        [name]: {
+            ...exposedState,
+            setState,
+            resetState
         },
-    }), { __signal: state });
-};
-export default createStore;
+        [`use${capName}State`]: useStore
+    };
+}

package/dist/translations/index.js

@@ -1,34 +1,39 @@
-import { signal, computed } from "@preact/signals";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { objectPath } from "../helpers/index";
-export const languages = signal({});
-export const language = signal(window.localStorage.getItem("language") || "en");
-const translations = computed(() => objectPath(languages.value[language.value]));
-const interpolate = (str, data) => {
-    if (typeof str === "string") {
-        return str.replace(/{{\s*(\w+)\s*}}/g, (_, key) => key in data ? String(data[key]) : `{{${key}}}`);
-    }
-    ;
-    return JSON.stringify(str);
+import { createContext, useContext, useState, useEffect, } from "react";
+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}}}`);
+export const TranslationsProvider = ({ children, languages, }) => {
+    const [language, setLanguage] = useState(() => {
+        if (!isBrowser)
+            return "en";
+        return localStorage.getItem("language") ?? "en";
+    });
+    useEffect(() => { if (isBrowser) {
+        localStorage.setItem("language", language);
+        return () => { localStorage.removeItem("language"); };
+    } }, [language]);
+    return (_jsx(TranslationsContext.Provider, { value: { languages, changeLanguage: setLanguage, language }, children: children }));
 };
-export const initTranslations = async (langs) => {
-    try {
-        languages.value = langs;
-        return true;
-    }
-    catch (e) {
-        console.error(e);
-        return false;
+export const useTranslations = () => {
+    const context = useContext(TranslationsContext);
+    if (!context) {
+        throw new Error("useTranslations must be used inside TranslationsProvider");
     }
-};
-export const translate = (key, data = {}) => {
-    const dictionary = translations.value;
-    if (!dictionary.has(key))
-        return key;
-    const value = dictionary.get(key);
-    return Object.keys(data).length ? interpolate(value, data) : value;
-};
-export const changeLanguage = (lang) => {
-    language.value = lang;
-    window.localStorage.setItem("language", lang);
-    return true;
+    const { languages, language, changeLanguage } = context;
+    const translations = objectPath(languages[language]);
+    const translate = (key, data = {}) => {
+        if (!translations?.has?.(key))
+            return key;
+        const value = translations.get(key);
+        if (typeof value !== "string")
+            return String(value);
+        return Object.keys(data).length ? interpolate(value, data) : value;
+    };
+    return {
+        translate,
+        changeLanguage,
+        language,
+    };
 };

package/package.json

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

package/types/components/Button/index.d.ts

@@ -1,6 +1,6 @@
-import type { ButtonHTMLAttributes } from "preact";
-import { type ReactNode, type Ref } from "preact/compat";
-type ClickEvent = MouseEvent | TouchEvent;
+import type { ButtonHTMLAttributes, MouseEvent, TouchEvent } from "react";
+import { type ReactNode } from "react";
+type ClickEvent = MouseEvent<HTMLButtonElement> | TouchEvent<HTMLButtonElement>;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
     className?: string;
@@ -8,7 +8,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     onClick?: (event: ClickEvent) => void;
     type?: "button" | "submit" | "reset";
 }
-declare const _default: import("preact").FunctionComponent<import("preact/compat").PropsWithoutRef<ButtonProps> & {
-    ref?: Ref<HTMLButtonElement> | undefined;
-}>;
-export default _default;
+declare const Button: import("react").NamedExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/types/components/Image/index.d.ts

@@ -1,5 +1,5 @@
-import type { ImgHTMLAttributes } from "preact";
-type ClickEvent = MouseEvent | TouchEvent;
+import type { ImgHTMLAttributes, MouseEvent, TouchEvent } from "react";
+type ClickEvent = MouseEvent<HTMLImageElement> | TouchEvent<HTMLImageElement>;
 export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     src: string;
     className?: string;
@@ -8,7 +8,5 @@ export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     priority?: true | false;
     onClick?: (event: ClickEvent) => void;
 }
-declare const _default: import("preact").FunctionComponent<import("preact/compat").PropsWithoutRef<ImageProps> & {
-    ref?: import("preact").Ref<HTMLImageElement> | undefined;
-}>;
-export default _default;
+declare const Image: import("react").NamedExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

package/types/components/Input/index.d.ts

@@ -1,10 +1,10 @@
-import type { InputHTMLAttributes, TargetedEvent } from "preact";
+import type { ChangeEvent, InputHTMLAttributes } from "react";
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     placeholder?: string;
     className?: string;
     type?: string;
-    onChange?: (value: string, event: TargetedEvent<HTMLInputElement, Event>) => void;
+    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
     name?: string;
 }
-declare const _default: (props: InputProps) => import("preact").JSX.Element;
-export default _default;
+declare const Input: import("react").NamedExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

package/types/components/Text/index.d.ts

@@ -6,7 +6,5 @@ interface TextProps {
     tag?: any;
     onClick?: (event: any) => void;
 }
-declare const _default: import("preact").FunctionComponent<import("preact/compat").PropsWithoutRef<TextProps> & {
-    ref?: import("preact").Ref<HTMLSpanElement> | undefined;
-}>;
-export default _default;
+declare const Text: import("react").NamedExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
+export default Text;

package/types/components/Tooltip/index.d.ts

@@ -1,7 +1,7 @@
-import { type ReactNode } from "preact/compat";
-declare const _default: ({ message, children, className }: {
+import { type ReactNode } from "react";
+declare const Tooltip: import("react").MemoExoticComponent<({ message, children, className }: {
     message: string;
     children: ReactNode;
     className?: string;
-}) => import("preact").JSX.Element;
-export default _default;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default Tooltip;

package/types/hooks/useHandleClickOutside.d.ts

@@ -1,3 +1,3 @@
-import { type MutableRefObject } from "preact/compat";
-declare const useHandleClickOutside: (ref: MutableRefObject<HTMLElement | null>, cb: () => void) => void;
+import { type RefObject } from "react";
+declare const useHandleClickOutside: (ref: RefObject<HTMLElement>, cb: () => void) => void;
 export default useHandleClickOutside;

package/types/hooks/useQueryParams.d.ts

@@ -3,6 +3,13 @@ type SetQueryParams = (updates: Record<string, any>, options?: {
     replace?: boolean;
     pathname?: string;
 }) => void;
-declare const queryParamsSignal: import("@preact/signals").Signal<QueryParams>;
+declare const queryParamsSignal: {
+    value: QueryParams;
+} & {
+    setState: (partial: Partial<{
+        value: QueryParams;
+    }>) => void;
+    resetState: () => void;
+};
 export declare const setQueryParams: SetQueryParams;
 export { queryParamsSignal as queryParams };

package/types/navigation/createBrowserRouter.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentType } from "react";
+interface Route {
+    pathname: string;
+    component: ComponentType;
+}
+declare const createBrowserRouter: (routes: Route[], { page404 }?: {
+    page404?: ComponentType;
+}) => {
+    navigate: (to: string | number, { queryParams, replace }?: {
+        queryParams?: Record<string, any>;
+        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: {};
+    };
+    Outlet: () => import("react/jsx-runtime").JSX.Element;
+};
+export default createBrowserRouter;

package/types/navigation/createMemoryRouter.d.ts

@@ -0,0 +1,52 @@
+import { type ComponentType } from "react";
+interface Route {
+    pathname: string;
+    component: ComponentType;
+}
+declare const createMemoryRouter: (routes: Route[], { page404 }?: {
+    page404?: ComponentType;
+}) => {
+    navigate: (to: string | number, { queryParams }?: {
+        queryParams?: Record<string, any>;
+    }) => 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;
+};
+export default createMemoryRouter;

package/types/navigation/index.d.ts

@@ -1,4 +1,2 @@
-export { default as Outlet } from "./Outlet";
-export { default as createRoutes } from "./createRoutes";
-export { default as navigate } from "./navigate";
-export { default as useLocationDetails } from "./useLocationDetails";
+export { default as createBrowserRouter } from "./createBrowserRouter";
+export { default as createMemoryRouter } from "./createMemoryRouter";

package/types/navigation/{extractQueryParamsFromURL.d.ts → support/query-params.support.d.ts}

@@ -1,4 +1,5 @@
 /**
  * @internal
  */
+export declare const createQueryParamsSearchString: (queryParams: Record<string, unknown>) => string;
 export declare const extractQueryParamsFromURL: (url: string) => Record<string, any>;

package/types/navigation/support/url.support.d.ts

@@ -0,0 +1,2 @@
+export declare const generateURLToNavigate: (pathname: string, queryParams: Record<string, any>) => string;
+export declare const isRouteMatching: (routePath: string, comparePath?: string) => boolean;

package/types/prototypes/copyToClipboard.d.ts

@@ -1,2 +1,2 @@
-declare const copyToClipboard: (text?: string, message?: string) => Promise<true | undefined>;
+declare const copyToClipboard: (this: string, message?: string) => Promise<true | undefined>;
 export default copyToClipboard;

package/types/prototypes/index.d.ts

@@ -1,7 +1,8 @@
 declare global {
     interface String {
-        copy(text: string, message?: string): void;
+        copy(message?: string): void;
         mask(visibleCharacters?: number, maskWith?: string): string;
+        capitalize(): Capitalize<string>;
     }
 }
 export {};

package/types/prototypes/stringCapitalize.d.ts

@@ -0,0 +1,2 @@
+declare const capitalize: <T extends string>(this: T) => Capitalize<T>;
+export default capitalize;

package/types/storage/index.d.ts

@@ -1,8 +1,5 @@
-type PersistKeys<T> = (keyof T)[];
-declare const createStore: <T extends Record<string, any>>(name: string, initialState: T, persist?: PersistKeys<T>) => T & {
-    setState: (values: Partial<T>) => void;
+import "../prototypes";
+export default function createStore<Name extends string, T extends Record<string, any>>(name: Name, initialState: T): { [K in Name]: T & {
+    setState: (partial: Partial<T>) => void;
     resetState: () => void;
-} & {
-    __signal: import("@preact/signals").Signal<T>;
-};
-export default createStore;
+}; } & { [K in `use${Capitalize<Name>}State`]: () => T; };

package/types/translations/index.d.ts

@@ -1,5 +1,12 @@
-export declare const languages: import("@preact/signals").Signal<Record<string, Record<string, any>>>;
-export declare const language: import("@preact/signals").Signal<string>;
-export declare const initTranslations: (langs: Record<string, Record<string, any>>) => Promise<boolean>;
-export declare const translate: (key: string, data?: Record<string, string | number>) => string;
-export declare const changeLanguage: (lang: string) => boolean;
+import { type ReactNode } from "react";
+type Languages = Record<string, Record<string, any>>;
+export declare const TranslationsProvider: ({ children, languages, }: {
+    children: ReactNode;
+    languages: Languages;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTranslations: () => {
+    translate: (key: string, data?: Record<string, string | number>) => string;
+    changeLanguage: (lang: any) => void;
+    language: any;
+};
+export {};

package/dist/navigation/Outlet.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { activeRoute, location } from "./navigation.store";
-import { Page404 } from "./Page404";
-import { useEffect } from "preact/compat";
-import isRouteMatching from "./isRouteMatching";
-import { computed } from "@preact/signals";
-import { extractParamsFromURL } from "./extractParamsFromURL";
-import { extractQueryParamsFromURL } from "./extractQueryParamsFromURL";
-const Outlet = ({ routes, page404: Page404Page = Page404 }) => {
-    const component = computed(() => activeRoute.value?.component ?? Page404Page);
-    useEffect(() => {
-        const updateLocation = () => {
-            const active = routes.find(r => isRouteMatching(r.pathname)) || { pathname: window.location.href, component: Page404Page };
-            const { pathname: currentpath, href } = window.location;
-            const params = extractParamsFromURL(currentpath, active.pathname);
-            const queryParams = extractQueryParamsFromURL(href);
-            activeRoute.setState({ value: active });
-            location.setState({ value: { params, queryParams, ...window.location } });
-        };
-        updateLocation();
-        window.addEventListener("popstate", updateLocation);
-        return () => window.removeEventListener("popstate", updateLocation);
-    }, [routes]);
-    return _jsx(component.value, {});
-};
-export default Outlet;

package/dist/navigation/Page404.js

@@ -1,2 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
-export const Page404 = () => _jsx(_Fragment, { children: "Page Not Found" });

package/dist/navigation/createRoutes.js

@@ -1,16 +0,0 @@
-import { activeRoute, globalRoutes, location } from "./navigation.store";
-import { extractParamsFromURL } from "./extractParamsFromURL";
-import { extractQueryParamsFromURL } from "./extractQueryParamsFromURL";
-import isRouteMatching from "./isRouteMatching";
-import { Page404 } from "./Page404";
-const createRoutes = (routes) => {
-    globalRoutes.setState({ value: routes });
-    const active = routes.find(r => isRouteMatching(r.pathname)) || { pathname: window.location.href, component: Page404 };
-    const { pathname: currentpath, href } = window.location;
-    const params = extractParamsFromURL(currentpath, active.pathname);
-    const queryParams = extractQueryParamsFromURL(href);
-    activeRoute.setState({ value: active });
-    location.setState({ value: { params, queryParams, ...window.location } });
-    return routes;
-};
-export default createRoutes;

package/dist/navigation/extractQueryParamsFromURL.js

@@ -1,24 +0,0 @@
-/**
- * @internal
- */
-export const extractQueryParamsFromURL = (url) => {
-    const query = {};
-    const href = url.startsWith(window.location.origin) ? url.split(window.location.origin)[1] : url;
-    const parts = href.split("?");
-    if (parts.length > 2) {
-        throw "Invalid URL";
-    }
-    const search = parts[1];
-    if (search && search.length > 0) {
-        const searchSegments = search.split("&");
-        for (const ss of searchSegments) {
-            const ssparts = ss.split("=");
-            if (ssparts.length > 2) {
-                throw "Invalid URL";
-            }
-            const [key, value] = ssparts;
-            query[decodeURIComponent(key)] = decodeURIComponent(value ?? "");
-        }
-    }
-    return query;
-};

package/dist/navigation/isRouteMatching.js

@@ -1,15 +0,0 @@
-/**
- * @internal
- */
-const isRouteMatching = (routePath) => {
-    const current = window.location.pathname;
-    if (routePath === "/" || routePath === "") {
-        return current === "/" || current === "/index.html" || current === "";
-    }
-    const routeParts = routePath.split("/").filter(Boolean);
-    const currentParts = current.split("/").filter(Boolean);
-    if (routeParts.length !== currentParts.length)
-        return false;
-    return routeParts.every((part, i) => part.startsWith(":") || part === currentParts[i]);
-};
-export default isRouteMatching;

package/dist/navigation/navigate.js

@@ -1,41 +0,0 @@
-import { extractQueryParamsFromURL } from "./extractQueryParamsFromURL";
-const createSearch = (queryParams) => {
-    const keys = Object.keys(queryParams);
-    if (keys.length > 0) {
-        let search = "?";
-        for (let index = 0; index < keys.length; index++) {
-            const key = keys[index];
-            search = `${search}${key}=${queryParams[key]}`;
-            if (index !== keys.length - 1) {
-                search = search + "&";
-            }
-        }
-        return search;
-    }
-    return "";
-};
-const generateURLFromParams = (pathname, queryParams) => {
-    const pathnameQueryParams = extractQueryParamsFromURL(pathname);
-    const allQueryParams = { ...pathnameQueryParams, ...queryParams };
-    const url = pathname.startsWith("/") ? `${window.location.origin}${pathname.split("?")[0]}` : `${window.location.origin}/${pathname.split("?")[0]}`;
-    const path = `${url}${createSearch(allQueryParams)}`;
-    return path;
-};
-const navigate = (path, { queryParams = {}, replace = false } = {}) => {
-    if (typeof path === "number") {
-        window.history.go(path);
-        return;
-    }
-    const pathname = generateURLFromParams(path, queryParams);
-    if (window.location.href === pathname) {
-        return;
-    }
-    if (replace) {
-        window.history.replaceState({}, "", pathname);
-    }
-    else {
-        window.history.pushState({}, "", pathname);
-    }
-    window.dispatchEvent(new Event("popstate"));
-};
-export default navigate;

package/dist/navigation/navigation.store.js

@@ -1,4 +0,0 @@
-import createStore from "../storage/index";
-export const location = createStore("location", { value: { params: {}, queryParams: {} } });
-export const activeRoute = createStore("activeRoute", { value: {} });
-export const globalRoutes = createStore("globalRoutes", { value: [] });

package/dist/navigation/useLocationDetails.js

@@ -1,10 +0,0 @@
-import { computed } from "@preact/signals";
-import { globalRoutes, location } from "./navigation.store";
-const useLocationDetails = () => {
-    if (globalRoutes.value.length === 0) {
-        throw "useLocationDetails cannot be used without initializing routes, use createRoutes initialize routes";
-    }
-    const values = computed(() => location.value);
-    return values.value;
-};
-export default useLocationDetails;

package/types/navigation/Outlet.d.ts

@@ -1,7 +0,0 @@
-import type { ComponentType } from "preact";
-import type { Route } from "./createRoutes";
-declare const Outlet: ({ routes, page404: Page404Page }: {
-    routes: Route[];
-    page404?: ComponentType;
-}) => import("preact").JSX.Element;
-export default Outlet;

package/types/navigation/Page404.d.ts

@@ -1 +0,0 @@
-export declare const Page404: () => import("preact").JSX.Element;

package/types/navigation/createRoutes.d.ts

@@ -1,7 +0,0 @@
-import type { ComponentType } from "preact/compat";
-export interface Route {
-    pathname: string;
-    component: ComponentType;
-}
-declare const createRoutes: (routes: Route[]) => Route[];
-export default createRoutes;

package/types/navigation/isRouteMatching.d.ts

@@ -1,5 +0,0 @@
-/**
- * @internal
- */
-declare const isRouteMatching: (routePath: string) => boolean;
-export default isRouteMatching;

package/types/navigation/navigate.d.ts

@@ -1,6 +0,0 @@
-export interface NavigationProps {
-    queryParams?: Record<string, unknown>;
-    replace?: boolean;
-}
-declare const navigate: (path: string | number, { queryParams, replace }?: NavigationProps) => void;
-export default navigate;

package/types/navigation/navigation.store.d.ts

@@ -1,46 +0,0 @@
-import type { Route } from "./createRoutes";
-export declare const location: {
-    value: {
-        params: {};
-        queryParams: {};
-    };
-} & {
-    setState: (values: Partial<{
-        value: {
-            params: {};
-            queryParams: {};
-        };
-    }>) => void;
-    resetState: () => void;
-} & {
-    __signal: import("@preact/signals").Signal<{
-        value: {
-            params: {};
-            queryParams: {};
-        };
-    }>;
-};
-export declare const activeRoute: {
-    value: Route;
-} & {
-    setState: (values: Partial<{
-        value: Route;
-    }>) => void;
-    resetState: () => void;
-} & {
-    __signal: import("@preact/signals").Signal<{
-        value: Route;
-    }>;
-};
-export declare const globalRoutes: {
-    value: Route[];
-} & {
-    setState: (values: Partial<{
-        value: Route[];
-    }>) => void;
-    resetState: () => void;
-} & {
-    __signal: import("@preact/signals").Signal<{
-        value: Route[];
-    }>;
-};

package/types/navigation/useLocationDetails.d.ts

@@ -1,5 +0,0 @@
-declare const useLocationDetails: () => {
-    params: {};
-    queryParams: {};
-};
-export default useLocationDetails;