modal-system 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -22,7 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   ModalContext: () => ModalContext,
   ModalProvider: () => ModalProvider,
-  useModal: () => useModal
+  useBaseModal: () => useBaseModal
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -35,21 +35,23 @@ var ModalProvider = ({
   modals
 }) => {
   const [activeModal, setActiveModal] = (0, import_react.useState)(null);
-  const openModal = (name, data) => {
+  const openModal = (0, import_react.useCallback)((name, data) => {
     setActiveModal({ name, data });
-  };
-  const closeModal = () => {
+  }, []);
+  const closeModal = (0, import_react.useCallback)(() => {
     setActiveModal(null);
-  };
-  const CurrentModal = activeModal && modals[activeModal.name]?.component;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalContext.Provider, { value: { openModal, closeModal }, children: [
+  }, []);
+  const value = (0, import_react.useMemo)(() => ({ openModal, closeModal }), [openModal, closeModal]);
+  const currentConfig = activeModal ? modals[activeModal.name] : null;
+  const Component = currentConfig?.component;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalContext.Provider, { value, children: [
     children,
-    CurrentModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      CurrentModal,
+    Component && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
       {
         isOpen: true,
-        data: activeModal.data,
-        onClose: closeModal
+        onClose: closeModal,
+        data: activeModal?.data
       }
     )
   ] });
@@ -57,16 +59,14 @@ var ModalProvider = ({
 
 // src/hooks/use-modal.ts
 var import_react2 = require("react");
-var useModal = () => {
+var useBaseModal = () => {
   const ctx = (0, import_react2.useContext)(ModalContext);
-  if (!ctx) {
-    throw new Error("useModal must be used inside ModalProvider");
-  }
+  if (!ctx) throw new Error("useModal must be used inside ModalProvider");
   return ctx;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ModalContext,
   ModalProvider,
-  useModal
+  useBaseModal
 });

package/dist/index.d.cts

@@ -4,25 +4,24 @@ import React from 'react';
 type ModalComponentProps<T = any> = {
     isOpen: boolean;
     onClose: () => void;
-    data?: T;
+    data: T;
 };
-type ModalConfig = {
-    component: React.FC<any>;
+type ModalConfig<T = any> = {
+    component: React.ComponentType<ModalComponentProps<T>>;
 };
-type ModalsMap = Record<string, ModalConfig>;
+type ModalsRegistry = Record<string, ModalConfig<any>>;
+type InferModalData<T> = T extends ModalConfig<infer D> ? D : never;
 
-declare const ModalContext: React.Context<{
-    openModal: (name: string, data?: any) => void;
+interface ModalContextType<T extends ModalsRegistry = any> {
+    openModal: <K extends keyof T>(name: K, data: InferModalData<T[K]>) => void;
     closeModal: () => void;
-} | null>;
-declare const ModalProvider: ({ children, modals, }: {
+}
+declare const ModalContext: React.Context<ModalContextType<any> | null>;
+declare const ModalProvider: <T extends ModalsRegistry>({ children, modals, }: {
     children: React.ReactNode;
-    modals: ModalsMap;
+    modals: T;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const useModal: () => {
-    openModal: (name: string, data?: any) => void;
-    closeModal: () => void;
-};
+declare const useBaseModal: <T extends ModalsRegistry>() => ModalContextType<T>;
 
-export { type ModalComponentProps, type ModalConfig, ModalContext, ModalProvider, type ModalsMap, useModal };
+export { type InferModalData, type ModalComponentProps, type ModalConfig, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, useBaseModal };

package/dist/index.d.ts

@@ -4,25 +4,24 @@ import React from 'react';
 type ModalComponentProps<T = any> = {
     isOpen: boolean;
     onClose: () => void;
-    data?: T;
+    data: T;
 };
-type ModalConfig = {
-    component: React.FC<any>;
+type ModalConfig<T = any> = {
+    component: React.ComponentType<ModalComponentProps<T>>;
 };
-type ModalsMap = Record<string, ModalConfig>;
+type ModalsRegistry = Record<string, ModalConfig<any>>;
+type InferModalData<T> = T extends ModalConfig<infer D> ? D : never;
 
-declare const ModalContext: React.Context<{
-    openModal: (name: string, data?: any) => void;
+interface ModalContextType<T extends ModalsRegistry = any> {
+    openModal: <K extends keyof T>(name: K, data: InferModalData<T[K]>) => void;
     closeModal: () => void;
-} | null>;
-declare const ModalProvider: ({ children, modals, }: {
+}
+declare const ModalContext: React.Context<ModalContextType<any> | null>;
+declare const ModalProvider: <T extends ModalsRegistry>({ children, modals, }: {
     children: React.ReactNode;
-    modals: ModalsMap;
+    modals: T;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const useModal: () => {
-    openModal: (name: string, data?: any) => void;
-    closeModal: () => void;
-};
+declare const useBaseModal: <T extends ModalsRegistry>() => ModalContextType<T>;
 
-export { type ModalComponentProps, type ModalConfig, ModalContext, ModalProvider, type ModalsMap, useModal };
+export { type InferModalData, type ModalComponentProps, type ModalConfig, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, useBaseModal };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/provider/ModalProvider.tsx
-import { createContext, useState } from "react";
+import { createContext, useState, useCallback, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ModalContext = createContext(null);
 var ModalProvider = ({
@@ -7,21 +7,23 @@ var ModalProvider = ({
   modals
 }) => {
   const [activeModal, setActiveModal] = useState(null);
-  const openModal = (name, data) => {
+  const openModal = useCallback((name, data) => {
     setActiveModal({ name, data });
-  };
-  const closeModal = () => {
+  }, []);
+  const closeModal = useCallback(() => {
     setActiveModal(null);
-  };
-  const CurrentModal = activeModal && modals[activeModal.name]?.component;
-  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { openModal, closeModal }, children: [
+  }, []);
+  const value = useMemo(() => ({ openModal, closeModal }), [openModal, closeModal]);
+  const currentConfig = activeModal ? modals[activeModal.name] : null;
+  const Component = currentConfig?.component;
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value, children: [
     children,
-    CurrentModal && /* @__PURE__ */ jsx(
-      CurrentModal,
+    Component && /* @__PURE__ */ jsx(
+      Component,
       {
         isOpen: true,
-        data: activeModal.data,
-        onClose: closeModal
+        onClose: closeModal,
+        data: activeModal?.data
       }
     )
   ] });
@@ -29,15 +31,13 @@ var ModalProvider = ({
 
 // src/hooks/use-modal.ts
 import { useContext } from "react";
-var useModal = () => {
+var useBaseModal = () => {
   const ctx = useContext(ModalContext);
-  if (!ctx) {
-    throw new Error("useModal must be used inside ModalProvider");
-  }
+  if (!ctx) throw new Error("useModal must be used inside ModalProvider");
   return ctx;
 };
 export {
   ModalContext,
   ModalProvider,
-  useModal
+  useBaseModal
 };

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "modal-system",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "bin": {
-        "modal-genius": "dist/cli.js"
+        "modal-system": "dist/cli.js"
     },
     "files": [
         "dist"
@@ -25,4 +25,4 @@
     "dependencies": {
         "prompts": "^2.4.2"
     }
-}
+}