@mateosuarezdev/react-ui 1.0.0

package/LICENSE.md

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Mateo Suárez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# React UI
+
+# WIP

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),o=require("react"),h=require("react-dom"),a=o.createContext(null),P=({children:e,value:r})=>f.jsx(a.Provider,{value:r,children:e}),K=()=>{const e=o.useContext(a);if(!e)throw new Error("useAliveScope must be wrapped within AliveScopeProvider");return e},S=({children:e})=>{const[r,l]=o.useState({}),n=o.useRef({}),c=o.useRef({}),p=(t,u,s)=>{if(!r[t]){const i=document.createElement("div");return t&&(i.id=t),s&&(i.className=s),l(v=>({...v,[t]:{children:u,element:i}})),n.current[t]=[],c.current[t]=[],n.current&&n.current[t]&&n.current[t].forEach(v=>v(t)),i}return n.current&&n.current[t]&&n.current[t].forEach(i=>i(t)),r[t].element},m=t=>{l(u=>{const s={...u};return delete s[t],s}),c.current&&c.current[t]&&c.current[t].forEach(u=>u(t))};return f.jsxs(P,{value:{getPortalElement:p,dropPortalElement:m},children:[e,Object.entries(r).map(([t,{children:u,element:s}])=>f.jsx(j,{id:t,onMountCallbacks:n,onDropCallbacks:c,children:u,element:s},t))]})},A=o.createContext(null),x=({children:e,value:r})=>f.jsx(A.Provider,{value:r,children:e}),j=o.memo(({id:e,onMountCallbacks:r,onDropCallbacks:l,children:n,element:c})=>{const p=(t,u={runOnFirstMount:!1})=>{o.useEffect(()=>{const s=()=>{if(document.getElementById(e))t(e);else{const v=new MutationObserver((b,E)=>{document.getElementById(e)&&(t(e),E.disconnect())});return v.observe(document.body,{childList:!0,subtree:!0}),()=>v.disconnect()}};return u?.runOnFirstMount&&s(),r.current[e].push(s),()=>{r.current[e]=r.current[e].filter(i=>i!==s)}},[])},m=t=>{o.useEffect(()=>(l.current[e].push(t),()=>{l.current[e]=l.current[e].filter(u=>u!==t)}),[])};return f.jsx(x,{value:{keepAliveId:e,onKeepAliveMount:p,onKeepAliveDrop:m},children:h.createPortal(n,c,e)})}),w=()=>{const e=o.useContext(A);if(!e)throw new Error("useKeepAlive must be used within KeepAliveProvider");return e},C=({aliveKey:e,children:r,enabled:l=!0,...n})=>{const c=o.useRef(null),{getPortalElement:p}=K();return o.useEffect(()=>{const m=p(e,r,n.className);return l&&c.current&&c.current.replaceWith(m),()=>{}},[e,r,l,n]),f.jsx("div",{...n,ref:c})};exports.AliveScope=S;exports.KeepAlive=C;exports.KeepAliveContext=A;exports.KeepAliveProvider=x;exports.useKeepAlive=w;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/components/keep-alive.tsx"],"sourcesContent":["import {\n  createContext,\n  memo,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\n//============================\n// #region AliveScope\n//============================\ntype AliveScopeContextType = {\n  getPortalElement: (\n    id: string,\n    children: React.ReactNode,\n    className?: string\n  ) => HTMLElement;\n  dropPortalElement: (id: string) => void;\n};\n\nconst AliveScopeContext = createContext<AliveScopeContextType | null>(null);\n\nconst AliveScopeProvider = ({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: AliveScopeContextType;\n}) => {\n  return (\n    <AliveScopeContext.Provider value={value}>\n      {children}\n    </AliveScopeContext.Provider>\n  );\n};\n\nconst useAliveScope = () => {\n  const context = useContext(AliveScopeContext);\n\n  if (!context)\n    throw new Error(\"useAliveScope must be wrapped within AliveScopeProvider\");\n\n  return context;\n};\n\ntype AliveScopeProps = {\n  children?: React.ReactNode;\n};\n\nconst AliveScope: React.FC<AliveScopeProps> = ({ children }) => {\n  const [nodes, setNodes] = useState<{\n    [id: string]: { children: React.ReactNode; element: HTMLElement };\n  }>({});\n\n  const onMountCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n    {}\n  );\n  const onDropCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n    {}\n  );\n\n  const getPortalElement = (\n    id: string,\n    children: React.ReactNode,\n    className?: string\n  ) => {\n    if (!nodes[id]) {\n      const element = document.createElement(\"div\");\n      if (id) {\n        element.id = id;\n      }\n      if (className) {\n        element.className = className;\n      }\n      setNodes((prevNodes) => ({\n        ...prevNodes,\n        [id]: { children, element },\n      }));\n      onMountCallbacks.current[id] = [];\n      onDropCallbacks.current[id] = [];\n      if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n        onMountCallbacks.current[id].forEach((callback) => callback(id));\n      }\n      return element;\n    }\n    if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n      onMountCallbacks.current[id].forEach((callback) => callback(id));\n    }\n    return nodes[id].element;\n  };\n\n  const dropPortalElement = (id: string) => {\n    setNodes((prevNodes) => {\n      const copy = { ...prevNodes };\n      delete copy[id];\n      return copy;\n    });\n    //console.log(\"dropped\", id);\n    if (onDropCallbacks.current && onDropCallbacks.current[id]) {\n      onDropCallbacks.current[id].forEach((callback) => callback(id));\n    }\n  };\n\n  return (\n    <AliveScopeProvider\n      value={{\n        getPortalElement,\n        dropPortalElement,\n      }}\n    >\n      {children}\n      {Object.entries(nodes).map(([id, { children, element }]) => (\n        <Component\n          key={id}\n          id={id}\n          onMountCallbacks={onMountCallbacks}\n          onDropCallbacks={onDropCallbacks}\n          children={children}\n          element={element}\n        />\n      ))}\n    </AliveScopeProvider>\n  );\n};\n//============================\n// #endregion AliveScope\n//============================\n\n//============================\n// #region KeepAlive\n//============================\ntype KeepAliveContextType = {\n  keepAliveId: string;\n  onKeepAliveMount: (\n    callback: (id: string) => void,\n    options?: { runOnFirstMount?: boolean }\n  ) => void;\n  onKeepAliveDrop: (callback: (id: string) => void) => void;\n};\n\nexport const KeepAliveContext = createContext<KeepAliveContextType | null>(\n  null\n);\n\nexport const KeepAliveProvider = ({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: KeepAliveContextType;\n}) => {\n  return (\n    <KeepAliveContext.Provider value={value}>\n      {children}\n    </KeepAliveContext.Provider>\n  );\n};\n\nconst Component = memo<{\n  id: string;\n  onMountCallbacks: React.MutableRefObject<{\n    [id: string]: ((id: string) => void)[];\n  }>;\n  onDropCallbacks: React.MutableRefObject<{\n    [id: string]: ((id: string) => void)[];\n  }>;\n  children: React.ReactNode;\n  element: HTMLElement;\n}>(({ id, onMountCallbacks, onDropCallbacks, children, element }) => {\n  const onKeepAliveMount = (\n    callback: (id: string) => void,\n    options: { runOnFirstMount?: boolean } = { runOnFirstMount: false }\n  ) => {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      const runCallback = () => {\n        const el = document.getElementById(id);\n        if (el) {\n          callback(id);\n        } else {\n          // If element is not found, use MutationObserver to wait for it\n          const observer = new MutationObserver((_mutations, obs) => {\n            const el = document.getElementById(id);\n            if (el) {\n              callback(id);\n              obs.disconnect(); // Stop observing once element is found\n            }\n          });\n\n          observer.observe(document.body, {\n            childList: true,\n            subtree: true,\n          });\n\n          // Cleanup function to disconnect the observer if component unmounts\n          return () => observer.disconnect();\n        }\n      };\n\n      if (options?.runOnFirstMount) {\n        runCallback();\n      }\n\n      onMountCallbacks.current[id].push(runCallback);\n      return () => {\n        onMountCallbacks.current[id] = onMountCallbacks.current[id].filter(\n          (cb) => cb !== runCallback\n        );\n      };\n    }, []);\n  };\n\n  const onKeepAliveDrop = (callback: (id: string) => void) => {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      onDropCallbacks.current[id].push(callback);\n      return () => {\n        onDropCallbacks.current[id] = onDropCallbacks.current[id].filter(\n          (cb) => cb !== callback\n        );\n      };\n    }, []);\n  };\n\n  return (\n    <KeepAliveProvider\n      value={{ keepAliveId: id, onKeepAliveMount, onKeepAliveDrop }}\n    >\n      {createPortal(children, element, id)}\n    </KeepAliveProvider>\n  );\n});\n\nconst useKeepAlive = () => {\n  const context = useContext(KeepAliveContext);\n\n  if (!context)\n    throw new Error(\"useKeepAlive must be used within KeepAliveProvider\");\n\n  return context;\n};\n\ntype KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {\n  aliveKey: string;\n  children: React.ReactNode;\n  enabled?: boolean;\n};\n\nconst KeepAlive: React.FC<KeepAliveProps> = ({\n  aliveKey,\n  children,\n  enabled = true,\n  ...others\n}) => {\n  const keepAliveRef = useRef<HTMLDivElement | null>(null);\n  const { getPortalElement } = useAliveScope();\n\n  useEffect(() => {\n    const element = getPortalElement(aliveKey, children, others.className);\n\n    if (enabled) {\n      if (keepAliveRef.current) {\n        keepAliveRef.current.replaceWith(element);\n      }\n    }\n\n    return () => {\n      //TODO\n      //callUnmountCallbacks(aliveKey)\n    };\n  }, [aliveKey, children, enabled, others]);\n\n  return <div {...others} ref={keepAliveRef} />;\n};\n//============================\n// #endregion KeepAlive\n//============================\n\nexport { AliveScope, KeepAlive, useKeepAlive };\n"],"names":["AliveScopeContext","createContext","AliveScopeProvider","children","value","jsx","useAliveScope","context","useContext","AliveScope","nodes","setNodes","useState","onMountCallbacks","useRef","onDropCallbacks","getPortalElement","id","className","element","prevNodes","callback","dropPortalElement","copy","jsxs","Component","KeepAliveContext","KeepAliveProvider","memo","onKeepAliveMount","options","useEffect","runCallback","observer","_mutations","obs","cb","onKeepAliveDrop","createPortal","useKeepAlive","KeepAlive","aliveKey","enabled","others","keepAliveRef"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import { Context } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+export declare const AliveScope: React.FC<AliveScopeProps>;
+
+declare type AliveScopeProps = {
+    children?: React.ReactNode;
+};
+
+export declare const KeepAlive: React.FC<KeepAliveProps>;
+
+export declare const KeepAliveContext: Context<KeepAliveContextType | null>;
+
+declare type KeepAliveContextType = {
+    keepAliveId: string;
+    onKeepAliveMount: (callback: (id: string) => void, options?: {
+        runOnFirstMount?: boolean;
+    }) => void;
+    onKeepAliveDrop: (callback: (id: string) => void) => void;
+};
+
+declare type KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {
+    aliveKey: string;
+    children: React.ReactNode;
+    enabled?: boolean;
+};
+
+export declare const KeepAliveProvider: ({ children, value, }: {
+    children: React.ReactNode;
+    value: KeepAliveContextType;
+}) => JSX.Element;
+
+export declare const useKeepAlive: () => KeepAliveContextType;
+
+export { }

package/dist/index.js

@@ -0,0 +1,118 @@
+import { jsxs as K, jsx as p } from "react/jsx-runtime";
+import { createContext as a, useState as w, useRef as f, memo as S, useContext as E, useEffect as A } from "react";
+import { createPortal as g } from "react-dom";
+const h = a(null), b = ({
+  children: e,
+  value: r
+}) => /* @__PURE__ */ p(h.Provider, { value: r, children: e }), C = () => {
+  const e = E(h);
+  if (!e)
+    throw new Error("useAliveScope must be wrapped within AliveScopeProvider");
+  return e;
+}, F = ({ children: e }) => {
+  const [r, s] = w({}), n = f(
+    {}
+  ), o = f(
+    {}
+  );
+  return /* @__PURE__ */ K(
+    b,
+    {
+      value: {
+        getPortalElement: (t, c, u) => {
+          if (!r[t]) {
+            const l = document.createElement("div");
+            return t && (l.id = t), u && (l.className = u), s((i) => ({
+              ...i,
+              [t]: { children: c, element: l }
+            })), n.current[t] = [], o.current[t] = [], n.current && n.current[t] && n.current[t].forEach((i) => i(t)), l;
+          }
+          return n.current && n.current[t] && n.current[t].forEach((l) => l(t)), r[t].element;
+        },
+        dropPortalElement: (t) => {
+          s((c) => {
+            const u = { ...c };
+            return delete u[t], u;
+          }), o.current && o.current[t] && o.current[t].forEach((c) => c(t));
+        }
+      },
+      children: [
+        e,
+        Object.entries(r).map(([t, { children: c, element: u }]) => /* @__PURE__ */ p(
+          O,
+          {
+            id: t,
+            onMountCallbacks: n,
+            onDropCallbacks: o,
+            children: c,
+            element: u
+          },
+          t
+        ))
+      ]
+    }
+  );
+}, P = a(
+  null
+), M = ({
+  children: e,
+  value: r
+}) => /* @__PURE__ */ p(P.Provider, { value: r, children: e }), O = S(({ id: e, onMountCallbacks: r, onDropCallbacks: s, children: n, element: o }) => /* @__PURE__ */ p(
+  M,
+  {
+    value: { keepAliveId: e, onKeepAliveMount: (t, c = { runOnFirstMount: !1 }) => {
+      A(() => {
+        const u = () => {
+          if (document.getElementById(e))
+            t(e);
+          else {
+            const i = new MutationObserver((d, x) => {
+              document.getElementById(e) && (t(e), x.disconnect());
+            });
+            return i.observe(document.body, {
+              childList: !0,
+              subtree: !0
+            }), () => i.disconnect();
+          }
+        };
+        return c?.runOnFirstMount && u(), r.current[e].push(u), () => {
+          r.current[e] = r.current[e].filter(
+            (l) => l !== u
+          );
+        };
+      }, []);
+    }, onKeepAliveDrop: (t) => {
+      A(() => (s.current[e].push(t), () => {
+        s.current[e] = s.current[e].filter(
+          (c) => c !== t
+        );
+      }), []);
+    } },
+    children: g(n, o, e)
+  }
+)), N = () => {
+  const e = E(P);
+  if (!e)
+    throw new Error("useKeepAlive must be used within KeepAliveProvider");
+  return e;
+}, R = ({
+  aliveKey: e,
+  children: r,
+  enabled: s = !0,
+  ...n
+}) => {
+  const o = f(null), { getPortalElement: v } = C();
+  return A(() => {
+    const m = v(e, r, n.className);
+    return s && o.current && o.current.replaceWith(m), () => {
+    };
+  }, [e, r, s, n]), /* @__PURE__ */ p("div", { ...n, ref: o });
+};
+export {
+  F as AliveScope,
+  R as KeepAlive,
+  P as KeepAliveContext,
+  M as KeepAliveProvider,
+  N as useKeepAlive
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/keep-alive.tsx"],"sourcesContent":["import {\n  createContext,\n  memo,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\n//============================\n// #region AliveScope\n//============================\ntype AliveScopeContextType = {\n  getPortalElement: (\n    id: string,\n    children: React.ReactNode,\n    className?: string\n  ) => HTMLElement;\n  dropPortalElement: (id: string) => void;\n};\n\nconst AliveScopeContext = createContext<AliveScopeContextType | null>(null);\n\nconst AliveScopeProvider = ({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: AliveScopeContextType;\n}) => {\n  return (\n    <AliveScopeContext.Provider value={value}>\n      {children}\n    </AliveScopeContext.Provider>\n  );\n};\n\nconst useAliveScope = () => {\n  const context = useContext(AliveScopeContext);\n\n  if (!context)\n    throw new Error(\"useAliveScope must be wrapped within AliveScopeProvider\");\n\n  return context;\n};\n\ntype AliveScopeProps = {\n  children?: React.ReactNode;\n};\n\nconst AliveScope: React.FC<AliveScopeProps> = ({ children }) => {\n  const [nodes, setNodes] = useState<{\n    [id: string]: { children: React.ReactNode; element: HTMLElement };\n  }>({});\n\n  const onMountCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n    {}\n  );\n  const onDropCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n    {}\n  );\n\n  const getPortalElement = (\n    id: string,\n    children: React.ReactNode,\n    className?: string\n  ) => {\n    if (!nodes[id]) {\n      const element = document.createElement(\"div\");\n      if (id) {\n        element.id = id;\n      }\n      if (className) {\n        element.className = className;\n      }\n      setNodes((prevNodes) => ({\n        ...prevNodes,\n        [id]: { children, element },\n      }));\n      onMountCallbacks.current[id] = [];\n      onDropCallbacks.current[id] = [];\n      if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n        onMountCallbacks.current[id].forEach((callback) => callback(id));\n      }\n      return element;\n    }\n    if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n      onMountCallbacks.current[id].forEach((callback) => callback(id));\n    }\n    return nodes[id].element;\n  };\n\n  const dropPortalElement = (id: string) => {\n    setNodes((prevNodes) => {\n      const copy = { ...prevNodes };\n      delete copy[id];\n      return copy;\n    });\n    //console.log(\"dropped\", id);\n    if (onDropCallbacks.current && onDropCallbacks.current[id]) {\n      onDropCallbacks.current[id].forEach((callback) => callback(id));\n    }\n  };\n\n  return (\n    <AliveScopeProvider\n      value={{\n        getPortalElement,\n        dropPortalElement,\n      }}\n    >\n      {children}\n      {Object.entries(nodes).map(([id, { children, element }]) => (\n        <Component\n          key={id}\n          id={id}\n          onMountCallbacks={onMountCallbacks}\n          onDropCallbacks={onDropCallbacks}\n          children={children}\n          element={element}\n        />\n      ))}\n    </AliveScopeProvider>\n  );\n};\n//============================\n// #endregion AliveScope\n//============================\n\n//============================\n// #region KeepAlive\n//============================\ntype KeepAliveContextType = {\n  keepAliveId: string;\n  onKeepAliveMount: (\n    callback: (id: string) => void,\n    options?: { runOnFirstMount?: boolean }\n  ) => void;\n  onKeepAliveDrop: (callback: (id: string) => void) => void;\n};\n\nexport const KeepAliveContext = createContext<KeepAliveContextType | null>(\n  null\n);\n\nexport const KeepAliveProvider = ({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: KeepAliveContextType;\n}) => {\n  return (\n    <KeepAliveContext.Provider value={value}>\n      {children}\n    </KeepAliveContext.Provider>\n  );\n};\n\nconst Component = memo<{\n  id: string;\n  onMountCallbacks: React.MutableRefObject<{\n    [id: string]: ((id: string) => void)[];\n  }>;\n  onDropCallbacks: React.MutableRefObject<{\n    [id: string]: ((id: string) => void)[];\n  }>;\n  children: React.ReactNode;\n  element: HTMLElement;\n}>(({ id, onMountCallbacks, onDropCallbacks, children, element }) => {\n  const onKeepAliveMount = (\n    callback: (id: string) => void,\n    options: { runOnFirstMount?: boolean } = { runOnFirstMount: false }\n  ) => {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      const runCallback = () => {\n        const el = document.getElementById(id);\n        if (el) {\n          callback(id);\n        } else {\n          // If element is not found, use MutationObserver to wait for it\n          const observer = new MutationObserver((_mutations, obs) => {\n            const el = document.getElementById(id);\n            if (el) {\n              callback(id);\n              obs.disconnect(); // Stop observing once element is found\n            }\n          });\n\n          observer.observe(document.body, {\n            childList: true,\n            subtree: true,\n          });\n\n          // Cleanup function to disconnect the observer if component unmounts\n          return () => observer.disconnect();\n        }\n      };\n\n      if (options?.runOnFirstMount) {\n        runCallback();\n      }\n\n      onMountCallbacks.current[id].push(runCallback);\n      return () => {\n        onMountCallbacks.current[id] = onMountCallbacks.current[id].filter(\n          (cb) => cb !== runCallback\n        );\n      };\n    }, []);\n  };\n\n  const onKeepAliveDrop = (callback: (id: string) => void) => {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      onDropCallbacks.current[id].push(callback);\n      return () => {\n        onDropCallbacks.current[id] = onDropCallbacks.current[id].filter(\n          (cb) => cb !== callback\n        );\n      };\n    }, []);\n  };\n\n  return (\n    <KeepAliveProvider\n      value={{ keepAliveId: id, onKeepAliveMount, onKeepAliveDrop }}\n    >\n      {createPortal(children, element, id)}\n    </KeepAliveProvider>\n  );\n});\n\nconst useKeepAlive = () => {\n  const context = useContext(KeepAliveContext);\n\n  if (!context)\n    throw new Error(\"useKeepAlive must be used within KeepAliveProvider\");\n\n  return context;\n};\n\ntype KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {\n  aliveKey: string;\n  children: React.ReactNode;\n  enabled?: boolean;\n};\n\nconst KeepAlive: React.FC<KeepAliveProps> = ({\n  aliveKey,\n  children,\n  enabled = true,\n  ...others\n}) => {\n  const keepAliveRef = useRef<HTMLDivElement | null>(null);\n  const { getPortalElement } = useAliveScope();\n\n  useEffect(() => {\n    const element = getPortalElement(aliveKey, children, others.className);\n\n    if (enabled) {\n      if (keepAliveRef.current) {\n        keepAliveRef.current.replaceWith(element);\n      }\n    }\n\n    return () => {\n      //TODO\n      //callUnmountCallbacks(aliveKey)\n    };\n  }, [aliveKey, children, enabled, others]);\n\n  return <div {...others} ref={keepAliveRef} />;\n};\n//============================\n// #endregion KeepAlive\n//============================\n\nexport { AliveScope, KeepAlive, useKeepAlive };\n"],"names":["AliveScopeContext","createContext","AliveScopeProvider","children","value","jsx","useAliveScope","context","useContext","AliveScope","nodes","setNodes","useState","onMountCallbacks","useRef","onDropCallbacks","jsxs","id","className","element","prevNodes","callback","copy","Component","KeepAliveContext","KeepAliveProvider","memo","options","useEffect","runCallback","observer","_mutations","obs","cb","createPortal","useKeepAlive","KeepAlive","aliveKey","enabled","others","keepAliveRef","getPortalElement"],"mappings":"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"}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@mateosuarezdev/react-ui",
+  "version": "1.0.0",
+  "description": "Dynamic React UI library designed to work alongside @mateosuarezdev/react-router",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.cjs",
+    "dist/**/*.d.ts",
+    "dist/**/*.map"
+  ],
+  "sideEffects": [
+    "./dist/init.js",
+    "./dist/init.cjs"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:visualize": "vite-bundle-visualizer",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist",
+    "prepublish": "yarn clean && yarn build",
+    "rel": "yarn npm publish --access public",
+    "rel:patch": "yarn version patch && yarn npm publish --access public",
+    "rel:minor": "yarn version minor && yarn npm publish --access public",
+    "rel:major": "yarn version major && yarn npm publish --access public"
+  },
+  "packageManager": "yarn@4.10.3",
+  "keywords": [
+    "react",
+    "router",
+    "react-router",
+    "navigation",
+    "routing",
+    "spa",
+    "url",
+    "history"
+  ],
+  "author": "Mateo Suarez <suarezlifestyleuy@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mateosuarezdev/brpc-space.git",
+    "directory": "packages/react-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/mateosuarezdev/brpc-space/issues"
+  },
+  "homepage": "https://github.com/mateosuarezdev/brpc-space/tree/main/packages/react-ui#readme",
+  "license": "MIT",
+  "peerDependencies": {
+    "framer-motion": "^12.0.0",
+    "motion": "^12.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "framer-motion": {
+      "optional": true
+    },
+    "motion": {
+      "optional": true
+    },
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "@mateosuarezdev/url-change-event": "^1.0.12"
+  },
+  "devDependencies": {
+    "@types/node": "^24.7.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@vitejs/plugin-react": "^5.0.4",
+    "motion": "^12.23.22",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9",
+    "vite-bundle-visualizer": "^1.2.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}