modal-system 1.0.0

package/dist/index.js

@@ -0,0 +1,104 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ModalProvider: () => ModalProvider,
+  createModalHook: () => createModalHook,
+  defineModals: () => defineModals
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/core/provider.tsx
+var import_react2 = require("react");
+
+// src/core/context.ts
+var import_react = require("react");
+var ModalContext = (0, import_react.createContext)(null);
+function useModalContext() {
+  const ctx = (0, import_react.useContext)(ModalContext);
+  if (!ctx) {
+    throw new Error(
+      "[modal-system] useModal must be called inside <ModalProvider>. Make sure you wrapped your app with <ModalProvider modals={MODALS}>."
+    );
+  }
+  return ctx;
+}
+
+// src/core/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var INITIAL_STATE = {
+  isOpen: false,
+  activeModal: void 0,
+  data: void 0
+};
+function ModalProvider({
+  modals,
+  children
+}) {
+  const [state, setState] = (0, import_react2.useState)(INITIAL_STATE);
+  function _openModal(name, data) {
+    setState({ isOpen: true, activeModal: name, data });
+  }
+  function _closeModal() {
+    setState(INITIAL_STATE);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalContext.Provider, { value: { ...state, _openModal, _closeModal }, children: [
+    children,
+    Object.entries(modals).map(([id, Component]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      {
+        isOpen: state.isOpen && state.activeModal === id,
+        onClose: _closeModal,
+        data: state.activeModal === id ? state.data : void 0
+      },
+      id
+    ))
+  ] });
+}
+
+// src/core/hook.ts
+function createModalHook(_modals) {
+  return function useModal() {
+    const { _openModal, _closeModal } = useModalContext();
+    return {
+      /**
+       * Open a modal by name. The second argument must match the data
+       * interface of the registered component.
+       */
+      openModal: (name, data) => {
+        _openModal(name, data);
+      },
+      closeModal: _closeModal
+    };
+  };
+}
+
+// src/index.ts
+function defineModals(modals) {
+  return modals;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalProvider,
+  createModalHook,
+  defineModals
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/core/provider.tsx","../src/core/context.ts","../src/core/hook.ts"],"sourcesContent":["// ─── Public API ────────────────────────────────────────────────────────────────\n\nexport { ModalProvider } from \"./core/provider\";\nexport { createModalHook } from \"./core/hook\";\n\n// Types\nexport type { BaseModalProps, ModalRegistry, ModalDataMap } from \"./core/types\";\n\n/**\n * Helper that returns its argument unchanged but enforces the ModalRegistry constraint.\n * Use this when defining your MODALS object to get inference + type checking.\n *\n * @example\n * export const MODALS = defineModals({\n *   confirm: ConfirmModal,\n *   upload:  UploadModal,\n * })\n */\nexport function defineModals<T extends import(\"./core/types\").ModalRegistry>(modals: T): T {\n  return modals;\n}\n","import React, { useState } from \"react\";\nimport { ModalContext } from \"./context\";\nimport type { ModalRegistry, ModalState } from \"./types\";\n\ninterface ModalProviderProps<T extends ModalRegistry> {\n  modals: T;\n  children: React.ReactNode;\n}\n\nconst INITIAL_STATE: ModalState = {\n  isOpen: false,\n  activeModal: undefined,\n  data: undefined,\n};\n\n/**\n * Wrap your application root with this provider.\n *\n * @example\n * import { ModalProvider } from \"modal-system\"\n * import { MODALS } from \"./modals\"\n *\n * <ModalProvider modals={MODALS}>\n *   <App />\n * </ModalProvider>\n */\nexport function ModalProvider<T extends ModalRegistry>({\n  modals,\n  children,\n}: ModalProviderProps<T>) {\n  const [state, setState] = useState<ModalState>(INITIAL_STATE);\n\n  function _openModal(name: string, data?: unknown) {\n    setState({ isOpen: true, activeModal: name, data });\n  }\n\n  function _closeModal() {\n    setState(INITIAL_STATE);\n  }\n\n  return (\n    <ModalContext.Provider value={{ ...state, _openModal, _closeModal }}>\n      {children}\n\n      {Object.entries(modals).map(([id, Component]) => (\n        <Component\n          key={id}\n          isOpen={state.isOpen && state.activeModal === id}\n          onClose={_closeModal}\n          data={state.activeModal === id ? state.data : undefined}\n        />\n      ))}\n    </ModalContext.Provider>\n  );\n}\n","import { createContext, useContext } from \"react\";\nimport type { ModalContextValue } from \"./types\";\n\nexport const ModalContext = createContext<ModalContextValue | null>(null);\n\nexport function useModalContext(): ModalContextValue {\n  const ctx = useContext(ModalContext);\n  if (!ctx) {\n    throw new Error(\n      \"[modal-system] useModal must be called inside <ModalProvider>. \" +\n        \"Make sure you wrapped your app with <ModalProvider modals={MODALS}>.\"\n    );\n  }\n  return ctx;\n}\n","import { useModalContext } from \"./context\";\nimport type { ModalRegistry, ModalDataMap } from \"./types\";\n\n/**\n * Factory that creates a fully type-safe `useModal` hook bound to your modals registry.\n *\n * @example\n * // modals/index.ts\n * export const MODALS = defineModals({ confirm: ConfirmModal })\n * export const useModal = createModalHook(MODALS)\n *\n * // SomeComponent.tsx\n * const { openModal, closeModal } = useModal()\n * openModal(\"confirm\", { title: \"Delete?\" })  // ← autocomplete on name + data shape\n */\nexport function createModalHook<T extends ModalRegistry>(_modals: T) {\n  type DataMap = ModalDataMap<T>;\n\n  return function useModal() {\n    const { _openModal, _closeModal } = useModalContext();\n\n    return {\n      /**\n       * Open a modal by name. The second argument must match the data\n       * interface of the registered component.\n       */\n      openModal: <K extends keyof T & string>(\n        name: K,\n        data?: DataMap[K]\n      ) => {\n        _openModal(name, data);\n      },\n\n      closeModal: _closeModal,\n    };\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAgC;;;ACAhC,mBAA0C;AAGnC,IAAM,mBAAe,4BAAwC,IAAI;AAEjE,SAAS,kBAAqC;AACnD,QAAM,UAAM,yBAAW,YAAY;AACnC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AACA,SAAO;AACT;;;AD2BI;AAhCJ,IAAM,gBAA4B;AAAA,EAChC,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,MAAM;AACR;AAaO,SAAS,cAAuC;AAAA,EACrD;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAqB,aAAa;AAE5D,WAAS,WAAW,MAAc,MAAgB;AAChD,aAAS,EAAE,QAAQ,MAAM,aAAa,MAAM,KAAK,CAAC;AAAA,EACpD;AAEA,WAAS,cAAc;AACrB,aAAS,aAAa;AAAA,EACxB;AAEA,SACE,6CAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,GAAG,OAAO,YAAY,YAAY,GAC/D;AAAA;AAAA,IAEA,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,SAAS,MACzC;AAAA,MAAC;AAAA;AAAA,QAEC,QAAQ,MAAM,UAAU,MAAM,gBAAgB;AAAA,QAC9C,SAAS;AAAA,QACT,MAAM,MAAM,gBAAgB,KAAK,MAAM,OAAO;AAAA;AAAA,MAHzC;AAAA,IAIP,CACD;AAAA,KACH;AAEJ;;;AEvCO,SAAS,gBAAyC,SAAY;AAGnE,SAAO,SAAS,WAAW;AACzB,UAAM,EAAE,YAAY,YAAY,IAAI,gBAAgB;AAEpD,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKL,WAAW,CACT,MACA,SACG;AACH,mBAAW,MAAM,IAAI;AAAA,MACvB;AAAA,MAEA,YAAY;AAAA,IACd;AAAA,EACF;AACF;;;AHlBO,SAAS,aAA6D,QAAc;AACzF,SAAO;AACT;","names":["import_react"]}

package/dist/index.mjs

@@ -0,0 +1,75 @@
+// src/core/provider.tsx
+import { useState } from "react";
+
+// src/core/context.ts
+import { createContext, useContext } from "react";
+var ModalContext = createContext(null);
+function useModalContext() {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    throw new Error(
+      "[modal-system] useModal must be called inside <ModalProvider>. Make sure you wrapped your app with <ModalProvider modals={MODALS}>."
+    );
+  }
+  return ctx;
+}
+
+// src/core/provider.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var INITIAL_STATE = {
+  isOpen: false,
+  activeModal: void 0,
+  data: void 0
+};
+function ModalProvider({
+  modals,
+  children
+}) {
+  const [state, setState] = useState(INITIAL_STATE);
+  function _openModal(name, data) {
+    setState({ isOpen: true, activeModal: name, data });
+  }
+  function _closeModal() {
+    setState(INITIAL_STATE);
+  }
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { ...state, _openModal, _closeModal }, children: [
+    children,
+    Object.entries(modals).map(([id, Component]) => /* @__PURE__ */ jsx(
+      Component,
+      {
+        isOpen: state.isOpen && state.activeModal === id,
+        onClose: _closeModal,
+        data: state.activeModal === id ? state.data : void 0
+      },
+      id
+    ))
+  ] });
+}
+
+// src/core/hook.ts
+function createModalHook(_modals) {
+  return function useModal() {
+    const { _openModal, _closeModal } = useModalContext();
+    return {
+      /**
+       * Open a modal by name. The second argument must match the data
+       * interface of the registered component.
+       */
+      openModal: (name, data) => {
+        _openModal(name, data);
+      },
+      closeModal: _closeModal
+    };
+  };
+}
+
+// src/index.ts
+function defineModals(modals) {
+  return modals;
+}
+export {
+  ModalProvider,
+  createModalHook,
+  defineModals
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/provider.tsx","../src/core/context.ts","../src/core/hook.ts","../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ModalContext } from \"./context\";\nimport type { ModalRegistry, ModalState } from \"./types\";\n\ninterface ModalProviderProps<T extends ModalRegistry> {\n  modals: T;\n  children: React.ReactNode;\n}\n\nconst INITIAL_STATE: ModalState = {\n  isOpen: false,\n  activeModal: undefined,\n  data: undefined,\n};\n\n/**\n * Wrap your application root with this provider.\n *\n * @example\n * import { ModalProvider } from \"modal-system\"\n * import { MODALS } from \"./modals\"\n *\n * <ModalProvider modals={MODALS}>\n *   <App />\n * </ModalProvider>\n */\nexport function ModalProvider<T extends ModalRegistry>({\n  modals,\n  children,\n}: ModalProviderProps<T>) {\n  const [state, setState] = useState<ModalState>(INITIAL_STATE);\n\n  function _openModal(name: string, data?: unknown) {\n    setState({ isOpen: true, activeModal: name, data });\n  }\n\n  function _closeModal() {\n    setState(INITIAL_STATE);\n  }\n\n  return (\n    <ModalContext.Provider value={{ ...state, _openModal, _closeModal }}>\n      {children}\n\n      {Object.entries(modals).map(([id, Component]) => (\n        <Component\n          key={id}\n          isOpen={state.isOpen && state.activeModal === id}\n          onClose={_closeModal}\n          data={state.activeModal === id ? state.data : undefined}\n        />\n      ))}\n    </ModalContext.Provider>\n  );\n}\n","import { createContext, useContext } from \"react\";\nimport type { ModalContextValue } from \"./types\";\n\nexport const ModalContext = createContext<ModalContextValue | null>(null);\n\nexport function useModalContext(): ModalContextValue {\n  const ctx = useContext(ModalContext);\n  if (!ctx) {\n    throw new Error(\n      \"[modal-system] useModal must be called inside <ModalProvider>. \" +\n        \"Make sure you wrapped your app with <ModalProvider modals={MODALS}>.\"\n    );\n  }\n  return ctx;\n}\n","import { useModalContext } from \"./context\";\nimport type { ModalRegistry, ModalDataMap } from \"./types\";\n\n/**\n * Factory that creates a fully type-safe `useModal` hook bound to your modals registry.\n *\n * @example\n * // modals/index.ts\n * export const MODALS = defineModals({ confirm: ConfirmModal })\n * export const useModal = createModalHook(MODALS)\n *\n * // SomeComponent.tsx\n * const { openModal, closeModal } = useModal()\n * openModal(\"confirm\", { title: \"Delete?\" })  // ← autocomplete on name + data shape\n */\nexport function createModalHook<T extends ModalRegistry>(_modals: T) {\n  type DataMap = ModalDataMap<T>;\n\n  return function useModal() {\n    const { _openModal, _closeModal } = useModalContext();\n\n    return {\n      /**\n       * Open a modal by name. The second argument must match the data\n       * interface of the registered component.\n       */\n      openModal: <K extends keyof T & string>(\n        name: K,\n        data?: DataMap[K]\n      ) => {\n        _openModal(name, data);\n      },\n\n      closeModal: _closeModal,\n    };\n  };\n}\n","// ─── Public API ────────────────────────────────────────────────────────────────\n\nexport { ModalProvider } from \"./core/provider\";\nexport { createModalHook } from \"./core/hook\";\n\n// Types\nexport type { BaseModalProps, ModalRegistry, ModalDataMap } from \"./core/types\";\n\n/**\n * Helper that returns its argument unchanged but enforces the ModalRegistry constraint.\n * Use this when defining your MODALS object to get inference + type checking.\n *\n * @example\n * export const MODALS = defineModals({\n *   confirm: ConfirmModal,\n *   upload:  UploadModal,\n * })\n */\nexport function defineModals<T extends import(\"./core/types\").ModalRegistry>(modals: T): T {\n  return modals;\n}\n"],"mappings":";AAAA,SAAgB,gBAAgB;;;ACAhC,SAAS,eAAe,kBAAkB;AAGnC,IAAM,eAAe,cAAwC,IAAI;AAEjE,SAAS,kBAAqC;AACnD,QAAM,MAAM,WAAW,YAAY;AACnC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AACA,SAAO;AACT;;;AD2BI,SAII,KAJJ;AAhCJ,IAAM,gBAA4B;AAAA,EAChC,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,MAAM;AACR;AAaO,SAAS,cAAuC;AAAA,EACrD;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqB,aAAa;AAE5D,WAAS,WAAW,MAAc,MAAgB;AAChD,aAAS,EAAE,QAAQ,MAAM,aAAa,MAAM,KAAK,CAAC;AAAA,EACpD;AAEA,WAAS,cAAc;AACrB,aAAS,aAAa;AAAA,EACxB;AAEA,SACE,qBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,GAAG,OAAO,YAAY,YAAY,GAC/D;AAAA;AAAA,IAEA,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,SAAS,MACzC;AAAA,MAAC;AAAA;AAAA,QAEC,QAAQ,MAAM,UAAU,MAAM,gBAAgB;AAAA,QAC9C,SAAS;AAAA,QACT,MAAM,MAAM,gBAAgB,KAAK,MAAM,OAAO;AAAA;AAAA,MAHzC;AAAA,IAIP,CACD;AAAA,KACH;AAEJ;;;AEvCO,SAAS,gBAAyC,SAAY;AAGnE,SAAO,SAAS,WAAW;AACzB,UAAM,EAAE,YAAY,YAAY,IAAI,gBAAgB;AAEpD,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKL,WAAW,CACT,MACA,SACG;AACH,mBAAW,MAAM,IAAI;AAAA,MACvB;AAAA,MAEA,YAAY;AAAA,IACd;AAAA,EACF;AACF;;;AClBO,SAAS,aAA6D,QAAc;AACzF,SAAO;AACT;","names":[]}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "modal-system",
+  "version": "1.0.0",
+  "description": "Type-safe modal management system for React with DaisyUI and shadcn/ui support",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "bin": {
+    "modal-system": "dist/cli/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "picocolors": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.39",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}