@violice/rmu 0.2.7 → 0.2.9

package/README.md

@@ -1,54 +1,359 @@
-# RMU (React modal utility)
+# RMU (React Modal Utility)
 
-RMU is a small, zero-dependency utility to control modals in React apps
+[![npm version](https://badge.fury.io/js/@violice%2Frmu.svg)](https://www.npmjs.com/package/@violice/rmu)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-<!-- ## Installation
+A lightweight, zero-dependency utility for managing modals in React applications. Built with TypeScript, supports multiple outlets, and works seamlessly with React context.
+
+## Features
+
+- **Zero Dependencies** - No external libraries required
+- **TypeScript** - Full type safety out of the box
+- **Multiple Outlets** - Render modals in different parts of your app
+- **Context-Aware** - Modals have access to React context at their outlet location
+- **Imperative API** - Open/close modals from anywhere without prop drilling
+- **Lightweight** - < 2KB gzipped
+- **React Native Support** - Works with both React DOM and React Native
+
+## Installation
 
 ```bash
-npm install --save @violice/rmu
+npm install @violice/rmu
+# or
 yarn add @violice/rmu
-``` -->
+# or
+pnpm add @violice/rmu
+```
+
+## Requirements
+
+- React >= 18
+- Node.js >= 24
+
+## Quick Start
 
-## Usage
+### 1. Wrap your app with `RMUProvider`
 
-```js
-import { openModal, closeModal, RMUOutlet, RMUProvider } from '@violice/rmu';
+```tsx
+import { RMUProvider } from '@violice/rmu';
 
-const Example = () => {
+function App() {
   return (
     <RMUProvider>
-       <button
-        onClick={() => {
-          const modal = openModal(
-            <TestModal onClose={() => closeModal(modal)} />
-          );
-        }}
-      >
-        Open modal
-      </button>
-      <SomeContextProvider>
-        <button onClick={() => {
-          const modal = openModal(
-            <TestContextModal onClose={() => closeModal(modal)} />,
-            { outletId: 'MY_OUTLET' },
-          );
-        }}>
-          Open modal with access to some context
-        </button>
-        <RMUOutlet outletId="MY_OUTLET">
-      </SomeContextProvider>
-      <RMUOutlet />
+      <YourApp />
     </RMUProvider>
   );
+}
+```
+
+### 2. Add `RMUOutlet` where you want modals to render
+
+```tsx
+import { RMUOutlet } from '@violice/rmu';
+
+function Layout() {
+  return (
+    <div>
+      <main>{/* Your page content */}</main>
+      <RMUOutlet /> {/* Modals will render here */}
+    </div>
+  );
+}
+```
+
+### 3. Open modals from anywhere
+
+```tsx
+import { openModal, closeModal } from '@violice/rmu';
+
+function MyComponent() {
+  const handleOpenModal = () => {
+    const modal = openModal(
+      <MyModal onClose={() => closeModal(modal)} />
+    );
+  };
+
+  return <button onClick={handleOpenModal}>Open Modal</button>;
+}
+```
+
+## API Reference
+
+### Components
+
+#### `RMUProvider`
+
+Root provider component that must wrap your application or the part of the app that uses modals.
+
+```tsx
+interface RMUProviderProps {
+  children: React.ReactNode;
+}
+```
+
+**Usage:**
+```tsx
+<RMUProvider>
+  <App />
+</RMUProvider>
+```
+
+#### `RMUOutlet`
+
+Component that renders modals. Multiple outlets can be used with different IDs to render modals in different locations.
+
+```tsx
+interface RMUOutletProps {
+  outletId?: string; // Default: 'RMU:DEFAULT_OUTLET'
+}
+```
+
+**Usage:**
+```tsx
+// Default outlet
+<RMUOutlet />
+
+// Custom outlet
+<RMUOutlet outletId="sidebar-outlet" />
+```
+
+### Functions
+
+#### `openModal(component, config?)`
+
+Opens a modal and returns its identifier.
+
+```tsx
+function openModal(
+  component: React.ReactNode,
+  config?: { outletId?: string }
+): { modalId: string; outletId: string }
+```
+
+**Parameters:**
+- `component` - React element to render as modal
+- `config.outletId` - Optional outlet ID (defaults to default outlet)
+
+**Returns:**
+- `modalId` - Unique identifier for the modal
+- `outletId` - The outlet where the modal is rendered
+
+**Usage:**
+```tsx
+const { modalId, outletId } = openModal(<MyModal />, {
+  outletId: 'custom-outlet'
+});
+```
+
+#### `closeModal({ modalId, outletId })`
+
+Closes a specific modal by its identifier.
+
+```tsx
+function closeModal({
+  modalId: string,
+  outletId: string
+}): void
+```
+
+**Usage:**
+```tsx
+const modal = openModal(<MyModal />);
+// ... later
+closeModal(modal);
+```
+
+## Advanced Usage
+
+### Multiple Outlets with Context Access
+
+One of RMU's key features is the ability to render modals in different outlets, allowing them to access React context at that location.
+
+```tsx
+import { RMUProvider, RMUOutlet, openModal, closeModal } from '@violice/rmu';
+import { ThemeContext, UserContext } from './contexts';
+
+function App() {
+  return (
+    <RMUProvider>
+      <ThemeContext.Provider value="dark">
+        {/* Modals here have access to ThemeContext */}
+        <RMUOutlet outletId="theme-aware" />
+        
+        <UserContext.Provider value={{ name: 'John' }}>
+          {/* Modals here have access to both contexts */}
+          <RMUOutlet outletId="user-aware" />
+          
+          <button onClick={() => {
+            const modal = openModal(<UserProfileModal />, {
+              outletId: 'user-aware'
+            });
+          }}>
+            Open User Modal
+          </button>
+        </UserContext.Provider>
+      </ThemeContext.Provider>
+    </RMUProvider>
+  );
+}
+```
+
+### Managing Multiple Modals
+
+```tsx
+function MultipleModalsExample() {
+  const modalsRef = useRef<Array<{ modalId: string; outletId: string }>>([]);
+
+  const openFirstModal = () => {
+    const modal = openModal(
+      <Modal1 onClose={() => closeModal(modal)} />
+    );
+    modalsRef.current.push(modal);
+  };
+
+  const openSecondModal = () => {
+    const modal = openModal(
+      <Modal2 onClose={() => closeModal(modal)} />
+    );
+    modalsRef.current.push(modal);
+  };
+
+  const closeAllModals = () => {
+    modalsRef.current.forEach(modal => closeModal(modal));
+    modalsRef.current = [];
+  };
+
+  return (
+    <div>
+      <button onClick={openFirstModal}>Open Modal 1</button>
+      <button onClick={openSecondModal}>Open Modal 2</button>
+      <button onClick={closeAllModals}>Close All</button>
+    </div>
+  );
+}
+```
+
+### Complete Modal Component Example
+
+```tsx
+interface ConfirmModalProps {
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+function ConfirmModal({ title, message, onConfirm, onClose }: ConfirmModalProps) {
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={e => e.stopPropagation()}>
+        <h2>{title}</h2>
+        <p>{message}</p>
+        <div className="modal-actions">
+          <button onClick={onClose}>Cancel</button>
+          <button onClick={() => { onConfirm(); onClose(); }}>
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Usage
+function MyComponent() {
+  const handleDelete = () => {
+    const modal = openModal(
+      <ConfirmModal
+        title="Delete Item"
+        message="Are you sure you want to delete this item?"
+        onConfirm={() => console.log('Deleted!')}
+        onClose={() => closeModal(modal)}
+      />
+    );
+  };
+
+  return <button onClick={handleDelete}>Delete</button>;
+}
+```
+
+## How It Works
+
+RMU uses a combination of patterns to provide its functionality:
+
+1. **Event Emitter** - A custom event system allows imperative `openModal()`/`closeModal()` calls from anywhere
+2. **React Context** - `RMUProvider` maintains state and provides it to the component tree
+3. **Reducer Pattern** - State updates are handled through a reducer for predictable state management
+4. **Outlet System** - Multiple named outlets allow flexible modal placement
+
+```
+┌─────────────────────────────────────┐
+│           RMUProvider               │
+│  ┌───────────────────────────────┐  │
+│  │        State (Reducer)        │  │
+│  │   outlets: {                  │  │
+│  │     'default': {              │  │
+│  │       'modal-1': <ModalA />,  │  │
+│  │       'modal-2': <ModalB />   │  │
+│  │     }                         │  │
+│  │   }                           │  │
+│  └───────────────────────────────┘  │
+│              │                      │
+│              ▼                      │
+│  ┌───────────────────────────────┐  │
+│  │         RMUOutlet             │  │
+│  │     Renders: <ModalA />       │  │
+│  │              <ModalB />       │  │
+│  └───────────────────────────────┘  │
+└─────────────────────────────────────┘
+              ▲
+              │ Events
+       openModal() / closeModal()
+```
+
+## TypeScript
+
+RMU is written in TypeScript and provides full type safety.
+
+```tsx
+import type { OpenModalPayload, CloseModalPayload } from '@violice/rmu';
+
+// Types are available for advanced use cases
+const handleOpen = (payload: OpenModalPayload) => {
+  console.log(payload.modalId, payload.outletId);
 };
 ```
 
-## RoadMap
-- [x] Custom events, new API (0.2.0)
-- [ ] Connected modals
-- [ ] Auto-close 
-- [ ] Use for toasts example
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run tests
+npm test
+
+# Build the library
+npm run build
+
+# Check bundle size
+npm run size
+```
 
 ## License
 
-Licensed under MIT
+Licensed under [MIT](LICENSE).
+
+---
+
+**Made with ❤️ by [Sergey Ivashko](https://github.com/violice)**

package/dist/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c,1);let l=require(`react/jsx-runtime`);const u=(0,c.createContext)(null);let d=function(e){return e.OpenModal=`RMU:OPEN_MODAL`,e.CloseModal=`RMU:CLOSE_MODAL`,e}({});const f=`RMU:DEFAULT_OUTLET`,p={open:d.OpenModal,close:d.CloseModal},m={},h={subscribe(e,t){m[e]||(m[e]=new Set),m[e].add(t)},unsubscribe(e,t){let n=m[e];n&&(n.delete(t),n.size===0&&delete m[e])},emit(e,t){let n=m[e];n&&[...n].forEach(e=>{try{e(t)}catch{}})},_clear(){Object.keys(m).forEach(e=>{delete m[e]})}},g=e=>{let t={open:t=>e.openModal(t),close:t=>e.closeModal(t)};(0,c.useEffect)(()=>(Object.keys(t).forEach(e=>{h.subscribe(p[e],t[e])}),()=>{Object.keys(t).forEach(e=>{h.unsubscribe(p[e],t[e])})}),[])},_={openModal:`rmu:open-modal`,closeModal:`rmu:close-modal`,addOutlet:`rmu:add-modal`,removeOutlet:`rmu:remove-outlet`},v=(e,t)=>{switch(t.type){case _.openModal:{let{modalId:n,modalComponent:r,outletId:i}=t.payload,a=e.outlets[i];if(!a)throw Error(`Outlet with id ${i} not found`);return{...e,outlets:{...e.outlets,[i]:{...a,[n]:r}}}}case _.closeModal:{let{modalId:n,outletId:r}=t.payload,i=e.outlets[r];if(!i)throw Error(`Outlet with id ${r} not found`);let{[n]:a,...o}=i;return{...e,outlets:{...e.outlets,[r]:o}}}case _.addOutlet:{let{outletId:n}=t.payload;if(e.outlets[n])throw Error(`Outlet with id ${n} already exists`);return{...e,outlets:{...e.outlets,[n]:{}}}}case _.removeOutlet:{let{outletId:n}=t.payload,{[n]:r,...i}=e.outlets;return{...e,outlets:i}}default:return e}},y=()=>{let[e,t]=(0,c.useReducer)(v,{outlets:{}}),n=({modalId:e,modalComponent:n,outletId:r})=>{t({type:_.openModal,payload:{modalId:e,modalComponent:n,outletId:r}})},r=({modalId:e,outletId:n})=>{t({type:_.closeModal,payload:{modalId:e,outletId:n}})},i=e=>{t({type:_.addOutlet,payload:{outletId:e}})},a=e=>{t({type:_.removeOutlet,payload:{outletId:e}})};return{...e,openModal:n,closeModal:r,addOutlet:i,removeOutlet:a}},b=({children:e})=>{let t=y();return g(t),(0,l.jsx)(u.Provider,{value:t,children:e})},x=({outletId:e=f})=>{let t=(0,c.useContext)(u);if(!t)throw Error(`RMUProvider not found in component tree`);let{outlets:n,addOutlet:r,removeOutlet:i}=t;(0,c.useEffect)(()=>(r(e),()=>{i(e)}),[]);let a=n[e]??{};return(0,l.jsx)(l.Fragment,{children:Object.entries(a).map(([e,t])=>(0,l.jsx)(c.Fragment,{children:t},e))})},S=(e,t={})=>{let n=`rmu-modal-${new Date().getTime().toString()}`,{outletId:r=f}=t,i={modalId:n,modalComponent:e,outletId:r};return h.emit(d.OpenModal,i),{modalId:n,outletId:r}},C=({modalId:e,outletId:t})=>{let n={modalId:e,outletId:t};h.emit(d.CloseModal,n)};exports.RMUOutlet=x,exports.RMUProvider=b,exports.closeModal=C,exports.openModal=S;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Fragment"],"sources":["../src/rmu-context.ts","../src/types.ts","../src/constants.ts","../src/emitter.ts","../src/use-rmu-events.ts","../src/use-rmu-state.ts","../src/rmu-provider.tsx","../src/rmu-outlet.tsx","../src/events.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { RMUContextState } from './types';\n\nexport const RMUContext = createContext<RMUContextState | null>(null);\n","import { ReactNode } from 'react';\n\nexport enum RMUEventType {\n  OpenModal = 'RMU:OPEN_MODAL',\n  CloseModal = 'RMU:CLOSE_MODAL',\n}\n\nexport type RMUContextState = {\n  outlets: Record<string, Record<string, ReactNode>>;\n  openModal: (payload: OpenModalPayload) => void;\n  closeModal: (payload: CloseModalPayload) => void;\n  addOutlet: (outletId: string) => void;\n  removeOutlet: (outletId: string) => void;\n};\n\nexport type OpenModalPayload = {\n  modalId: string;\n  modalComponent: ReactNode;\n  outletId: string;\n};\n\nexport type CloseModalPayload = {\n  modalId: string;\n  outletId: string;\n};\n\nexport type RMUEventPayload = OpenModalPayload | CloseModalPayload;\n","import { RMUEventType } from \"./types\";\n\nexport const RMU_DEFAULT_OUTLET_ID = 'RMU:DEFAULT_OUTLET' as const;\n\nexport const RMU_EVENTS = {\n  open: RMUEventType.OpenModal,\n  close: RMUEventType.CloseModal,\n} as const;\n","export type EventHandler<T = unknown> = (payload: T) => void;\n\ntype EventListenersMap = Record<string, Set<EventHandler<unknown>>>;\n\nconst listenersByType: EventListenersMap = {};\n\nexport const emitter = {\n  subscribe<T>(type: string, handler: EventHandler<T>) {\n    if (!listenersByType[type]) {\n      listenersByType[type] = new Set<EventHandler<unknown>>();\n    }\n    listenersByType[type].add(handler as EventHandler<unknown>);\n  },\n\n  unsubscribe<T>(type: string, handler: EventHandler<T>) {\n    const listeners = listenersByType[type];\n    if (listeners) {\n      listeners.delete(handler as EventHandler<unknown>);\n      if (listeners.size === 0) {\n        delete listenersByType[type];\n      }\n    }\n  },\n\n  emit<T>(type: string, payload: T) {\n    const listeners = listenersByType[type];\n    if (listeners) {\n      // Clone to avoid issues if handlers mutate subscription during emit\n      [...listeners].forEach((handler) => {\n        try {\n          handler(payload);\n        } catch {\n          // Swallow to ensure one handler error does not break others\n        }\n      });\n    }\n  },\n\n  // For testing purposes only\n  _clear() {\n    Object.keys(listenersByType).forEach((key) => {\n      delete listenersByType[key];\n    });\n  },\n};\n","import { useEffect } from 'react';\nimport { RMUContextState, OpenModalPayload, CloseModalPayload } from './types';\nimport { RMU_EVENTS } from './constants';\nimport { emitter } from './emitter';\n\nexport const useRMUEvents = (ctx: RMUContextState) => {\n  const events = {\n    open: (payload: OpenModalPayload) => ctx.openModal(payload),\n    close: (payload: CloseModalPayload) => ctx.closeModal(payload),\n  };\n\n  useEffect(() => {\n    (Object.keys(events) as (keyof typeof events)[]).forEach(event => {\n      emitter.subscribe(RMU_EVENTS[event], events[event]);\n    });\n\n    return () => {\n      (Object.keys(events) as (keyof typeof events)[]).forEach(event => {\n        emitter.unsubscribe(RMU_EVENTS[event], events[event]);\n      });\n    };\n  }, []);\n};\n","import { useReducer } from 'react';\nimport { RMUContextState } from './types';\n\nconst ACTIONS = {\n  openModal: 'rmu:open-modal',\n  closeModal: 'rmu:close-modal',\n  addOutlet: 'rmu:add-modal',\n  removeOutlet: 'rmu:remove-outlet',\n} as const;\n\nconst reducer = (\n  state: {\n    outlets: RMUContextState['outlets'];\n  },\n  action: {\n    type: string;\n    payload: Record<string, any>;\n  }\n) => {\n  switch (action.type) {\n    case ACTIONS.openModal: {\n      const { modalId, modalComponent, outletId } = action.payload;\n      const modalOutlet = state.outlets[outletId];\n\n      if (!modalOutlet) {\n        throw new Error(`Outlet with id ${outletId} not found`);\n      }\n\n      return {\n        ...state,\n        outlets: {\n          ...state.outlets,\n          [outletId]: {\n            ...modalOutlet,\n            [modalId]: modalComponent,\n          },\n        },\n      };\n    }\n    case ACTIONS.closeModal: {\n      const { modalId, outletId } = action.payload;\n\n      const modalOutlet = state.outlets[outletId];\n      if (!modalOutlet) {\n        throw new Error(`Outlet with id ${outletId} not found`);\n      }\n\n      const { [modalId]: _removed, ...restModals } = modalOutlet;\n\n      return {\n        ...state,\n        outlets: {\n          ...state.outlets,\n          [outletId]: restModals,\n        },\n      };\n    }\n    case ACTIONS.addOutlet: {\n      const { outletId } = action.payload;\n\n      if (!!state.outlets[outletId]) {\n        throw new Error(`Outlet with id ${outletId} already exists`);\n      }\n\n      return {\n        ...state,\n        outlets: {\n          ...state.outlets,\n          [outletId]: {},\n        },\n      };\n    }\n    case ACTIONS.removeOutlet: {\n      const { outletId } = action.payload;\n\n      const { [outletId]: _removed, ...restOutlets } = state.outlets;\n\n      return {\n        ...state,\n        outlets: restOutlets,\n      };\n    }\n    default:\n      return state;\n  }\n};\n\nexport const useRMUState = () => {\n  const [state, dispatch] = useReducer(reducer, {\n    outlets: {},\n  });\n\n  const openModal: RMUContextState['openModal'] = ({\n    modalId,\n    modalComponent,\n    outletId,\n  }) => {\n    dispatch({\n      type: ACTIONS.openModal,\n      payload: { modalId, modalComponent, outletId },\n    });\n  };\n\n  const closeModal: RMUContextState['closeModal'] = ({ modalId, outletId }) => {\n    dispatch({ type: ACTIONS.closeModal, payload: { modalId, outletId } });\n  };\n\n  const addOutlet: RMUContextState['addOutlet'] = outletId => {\n    dispatch({ type: ACTIONS.addOutlet, payload: { outletId } });\n  };\n\n  const removeOutlet: RMUContextState['removeOutlet'] = outletId => {\n    dispatch({ type: ACTIONS.removeOutlet, payload: { outletId } });\n  };\n\n  return {\n    ...state,\n    openModal,\n    closeModal,\n    addOutlet,\n    removeOutlet,\n  };\n};\n","import React from 'react';\nimport { RMUContext } from './rmu-context';\nimport { useRMUEvents } from './use-rmu-events';\nimport { useRMUState } from './use-rmu-state';\n\nexport const RMUProvider = ({ children }: { children: React.ReactNode }) => {\n  const state = useRMUState();\n\n  useRMUEvents(state);\n\n  return <RMUContext.Provider value={state}>{children}</RMUContext.Provider>;\n};\n","import React, { Fragment, useContext, useEffect } from 'react';\nimport { RMUContext } from './rmu-context';\nimport { RMU_DEFAULT_OUTLET_ID } from './constants';\n\nexport const RMUOutlet = ({ outletId = RMU_DEFAULT_OUTLET_ID }) => {\n  const ctx = useContext(RMUContext);\n\n  if (!ctx) {\n    throw new Error('RMUProvider not found in component tree');\n  }\n\n  const { outlets, addOutlet, removeOutlet } = ctx;\n\n  useEffect(() => {\n    addOutlet(outletId);\n    return () => {\n      removeOutlet(outletId);\n    };\n  }, []);\n\n  const modals = outlets[outletId] ?? {};\n\n  return (\n    <>\n      {Object.entries(modals).map(([modalId, modalComponent]) => (\n        <Fragment key={modalId}>{modalComponent}</Fragment>\n      ))}\n    </>\n  );\n};\n\nexport default RMUOutlet;\n","import { ReactNode } from 'react';\nimport { OpenModalPayload, CloseModalPayload, RMUEventType } from './types';\nimport { emitter } from './emitter';\nimport { RMU_DEFAULT_OUTLET_ID } from './constants';\n\nexport const openModal = (\n  modalComponent: ReactNode,\n  config: { outletId?: string } = {}\n): { modalId: string; outletId: string } => {\n  const modalId = `rmu-modal-${new Date().getTime().toString()}`;\n  const { outletId = RMU_DEFAULT_OUTLET_ID } = config;\n  const payload: OpenModalPayload = {\n    modalId,\n    modalComponent,\n    outletId,\n  };\n  emitter.emit<OpenModalPayload>(RMUEventType.OpenModal, payload);\n  return { modalId, outletId };\n};\n\nexport const closeModal = ({\n  modalId,\n  outletId,\n}: {\n  modalId: string;\n  outletId: string;\n}): void => {\n  const payload: CloseModalPayload = { modalId, outletId };\n  emitter.emit<CloseModalPayload>(RMUEventType.CloseModal, payload);\n};\n"],"mappings":"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"}

package/dist/index.d.cts

@@ -0,0 +1,34 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import React, { ReactNode } from "react";
+
+//#region src/rmu-provider.d.ts
+declare const RMUProvider: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/rmu-outlet.d.ts
+declare const RMUOutlet: ({
+  outletId
+}: {
+  outletId?: "RMU:DEFAULT_OUTLET" | undefined;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/events.d.ts
+declare const openModal: (modalComponent: ReactNode, config?: {
+  outletId?: string;
+}) => {
+  modalId: string;
+  outletId: string;
+};
+declare const closeModal: ({
+  modalId,
+  outletId
+}: {
+  modalId: string;
+  outletId: string;
+}) => void;
+//#endregion
+export { RMUOutlet, RMUProvider, closeModal, openModal };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.mts

@@ -1,41 +1,19 @@
 import React, { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/rmu-provider.d.ts
 declare const RMUProvider: ({
   children
 }: {
   children: React.ReactNode;
-}) => React.JSX.Element;
+}) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/rmu-outlet.d.ts
 declare const RMUOutlet: ({
   outletId
 }: {
-  outletId?: string | undefined;
-}) => React.JSX.Element;
-//#endregion
-//#region src/types.d.ts
-type RMUContextState = {
-  outlets: Record<string, Record<string, ReactNode>>;
-  openModal: ({
-    modalId,
-    modalComponent,
-    outletId
-  }: {
-    modalId: string;
-    modalComponent: ReactNode;
-    outletId: string;
-  }) => void;
-  closeModal: ({
-    modalId,
-    outletId
-  }: {
-    modalId: string;
-    outletId: string;
-  }) => void;
-  addOutlet: (outletId: string) => void;
-  removeOutlet: (outletId: string) => void;
-};
+  outletId?: "RMU:DEFAULT_OUTLET" | undefined;
+}) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/events.d.ts
 declare const openModal: (modalComponent: ReactNode, config?: {
@@ -44,6 +22,13 @@ declare const openModal: (modalComponent: ReactNode, config?: {
   modalId: string;
   outletId: string;
 };
-declare const closeModal: RMUContextState['closeModal'];
+declare const closeModal: ({
+  modalId,
+  outletId
+}: {
+  modalId: string;
+  outletId: string;
+}) => void;
 //#endregion
-export { RMUOutlet, RMUProvider, closeModal, openModal };
+export { RMUOutlet, RMUProvider, closeModal, openModal };
+//# sourceMappingURL=index.d.mts.map