@zeus-js/output-react-wrapper 0.1.0-beta.4 → 0.1.0-beta.5

package/dist/output-react-wrapper.cjs.js

@@ -1,5 +1,5 @@
 /**
-* output-react-wrapper v0.1.0-beta.4
+* output-react-wrapper v0.1.0-beta.5
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -9,6 +9,7 @@ Object.defineProperties(exports, {
 });
 let _zeus_js_bundler_plugin = require("@zeus-js/bundler-plugin");
 let _zeus_js_component_dts = require("@zeus-js/component-dts");
+let _lit_react = require("@lit/react");
 //#region packages/web-c/output-react-wrapper/src/generateReactIndex.ts
 function generateReactIndex(components, options) {
 	const lines = [];
@@ -22,7 +23,7 @@ function generateReactIndex(components, options) {
 //#endregion
 //#region packages/web-c/output-react-wrapper/src/generateReactWrapper.ts
 function generateReactWrapper(input) {
-	return input.mode === "event-bridge" ? generateEventBridgeReactWrapper(input) : generateMinimalReactWrapper(input);
+	return input.mode === "runtime" ? generateRuntimeReactWrapper(input) : input.mode === "event-bridge" ? generateEventBridgeReactWrapper(input) : generateMinimalReactWrapper(input);
 }
 function generateMinimalReactWrapper(input) {
 	const { component, namedSlots, wcModuleId } = input;
@@ -275,6 +276,42 @@ function toKebabCase(value) {
 function toReactEventProp(value) {
 	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
 }
+function generateRuntimeReactWrapper(input) {
+	const { component, namedSlots } = input;
+	const events = createRuntimeEventMap(component);
+	const slots = getNamedSlots(component, namedSlots);
+	return [
+		`import React from 'react'`,
+		`import { createComponent } from '@zeus-js/output-react-wrapper/runtime'`,
+		`import { defineCustomElement } from '../wc/loader.js'`,
+		``,
+		`export const ${component.name} = createComponent({`,
+		`  react: React,`,
+		`  tagName: ${JSON.stringify(component.tag)},`,
+		`  defineCustomElement: () => defineCustomElement(${JSON.stringify(component.tag)}),`,
+		`  events: ${formatEventObject(events)},`,
+		`  slots: ${JSON.stringify(slots)},`,
+		`  displayName: ${JSON.stringify(component.name)},`,
+		`})`,
+		``
+	].join("\n");
+}
+function createRuntimeEventMap(component) {
+	const events = {};
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$key2, _event$name2, _event$reactName2;
+		const sourceEventName = (_event$key2 = event.key) !== null && _event$key2 !== void 0 ? _event$key2 : key;
+		const domEventName = (_event$name2 = event.name) !== null && _event$name2 !== void 0 ? _event$name2 : toKebabCase(sourceEventName);
+		const reactPropName = (_event$reactName2 = event.reactName) !== null && _event$reactName2 !== void 0 ? _event$reactName2 : toReactEventProp(sourceEventName);
+		events[reactPropName] = domEventName;
+	}
+	return events;
+}
+function formatEventObject(value) {
+	const entries = Object.entries(value);
+	if (!entries.length) return "{}";
+	return `{\n${entries.map(([key, item]) => `    ${JSON.stringify(key)}: ${JSON.stringify(item)}`).join(",\n")}\n  }`;
+}
 const PUSH_ALL_HELPER = `
 function pushAll(target, values) {
   for (const value of values) target.push(value);
@@ -296,6 +333,52 @@ function createNamedSlot(name, value) {
 }
 `;
 //#endregion
+//#region packages/web-c/output-react-wrapper/src/runtime/createComponent.ts
+function createComponent(options) {
+	var _customElements$get;
+	const { defineCustomElement, react, tagName, transformTag, elementClass, events = {}, slots = [], displayName } = options;
+	const finalTagName = transformTag ? transformTag(tagName) : tagName;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const LitComponent = (0, _lit_react.createComponent)({
+		react,
+		tagName: finalTagName,
+		elementClass: elementClass !== null && elementClass !== void 0 ? elementClass : typeof customElements === "undefined" ? HTMLElement : (_customElements$get = customElements.get(finalTagName)) !== null && _customElements$get !== void 0 ? _customElements$get : HTMLElement,
+		events,
+		displayName
+	});
+	if (!slots.length) return LitComponent;
+	const slotSet = new Set(slots);
+	return react.forwardRef((inputProps, ref) => {
+		const rest = {};
+		const slottedChildren = [];
+		if (inputProps == null) {
+			rest.ref = ref;
+			return react.createElement(LitComponent, rest);
+		}
+		const props = inputProps;
+		for (const key in props) {
+			if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+			const value = props[key];
+			if (slotSet.has(key)) {
+				const child = createNamedSlot(react, key, value);
+				if (child != null) slottedChildren.push(child);
+				continue;
+			}
+			rest[key] = value;
+		}
+		rest.ref = ref;
+		if (props.children != null) slottedChildren.push(props.children);
+		return react.createElement(LitComponent, rest, ...slottedChildren);
+	});
+}
+function createNamedSlot(react, name, value) {
+	if (value == null || value === false) return null;
+	return react.createElement("span", {
+		slot: name,
+		style: { display: "contents" }
+	}, value);
+}
+//#endregion
 //#region packages/web-c/output-react-wrapper/src/index.ts
 function reactWrapper(options = {}) {
 	var _options$outDir, _options$stripPrefix, _options$dts, _options$index, _options$namedSlots, _options$wrapper;
@@ -306,7 +389,7 @@ function reactWrapper(options = {}) {
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
 		namedSlots: (_options$namedSlots = options.namedSlots) !== null && _options$namedSlots !== void 0 ? _options$namedSlots : "props",
-		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "minimal"
+		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "runtime"
 	};
 	return {
 		name: "zeus-output-react-wrapper",
@@ -349,4 +432,5 @@ function reactWrapper(options = {}) {
 	};
 }
 //#endregion
+exports.createComponent = createComponent;
 exports.default = reactWrapper;

package/dist/output-react-wrapper.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* output-react-wrapper v0.1.0-beta.4
+* output-react-wrapper v0.1.0-beta.5
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -9,6 +9,7 @@ Object.defineProperties(exports, {
 });
 let _zeus_js_bundler_plugin = require("@zeus-js/bundler-plugin");
 let _zeus_js_component_dts = require("@zeus-js/component-dts");
+let _lit_react = require("@lit/react");
 //#region packages/web-c/output-react-wrapper/src/generateReactIndex.ts
 function generateReactIndex(components, options) {
 	const lines = [];
@@ -22,7 +23,7 @@ function generateReactIndex(components, options) {
 //#endregion
 //#region packages/web-c/output-react-wrapper/src/generateReactWrapper.ts
 function generateReactWrapper(input) {
-	return input.mode === "event-bridge" ? generateEventBridgeReactWrapper(input) : generateMinimalReactWrapper(input);
+	return input.mode === "runtime" ? generateRuntimeReactWrapper(input) : input.mode === "event-bridge" ? generateEventBridgeReactWrapper(input) : generateMinimalReactWrapper(input);
 }
 function generateMinimalReactWrapper(input) {
 	const { component, namedSlots, wcModuleId } = input;
@@ -275,6 +276,42 @@ function toKebabCase(value) {
 function toReactEventProp(value) {
 	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
 }
+function generateRuntimeReactWrapper(input) {
+	const { component, namedSlots } = input;
+	const events = createRuntimeEventMap(component);
+	const slots = getNamedSlots(component, namedSlots);
+	return [
+		`import React from 'react'`,
+		`import { createComponent } from '@zeus-js/output-react-wrapper/runtime'`,
+		`import { defineCustomElement } from '../wc/loader.js'`,
+		``,
+		`export const ${component.name} = createComponent({`,
+		`  react: React,`,
+		`  tagName: ${JSON.stringify(component.tag)},`,
+		`  defineCustomElement: () => defineCustomElement(${JSON.stringify(component.tag)}),`,
+		`  events: ${formatEventObject(events)},`,
+		`  slots: ${JSON.stringify(slots)},`,
+		`  displayName: ${JSON.stringify(component.name)},`,
+		`})`,
+		``
+	].join("\n");
+}
+function createRuntimeEventMap(component) {
+	const events = {};
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$key2, _event$name2, _event$reactName2;
+		const sourceEventName = (_event$key2 = event.key) !== null && _event$key2 !== void 0 ? _event$key2 : key;
+		const domEventName = (_event$name2 = event.name) !== null && _event$name2 !== void 0 ? _event$name2 : toKebabCase(sourceEventName);
+		const reactPropName = (_event$reactName2 = event.reactName) !== null && _event$reactName2 !== void 0 ? _event$reactName2 : toReactEventProp(sourceEventName);
+		events[reactPropName] = domEventName;
+	}
+	return events;
+}
+function formatEventObject(value) {
+	const entries = Object.entries(value);
+	if (!entries.length) return "{}";
+	return `{\n${entries.map(([key, item]) => `    ${JSON.stringify(key)}: ${JSON.stringify(item)}`).join(",\n")}\n  }`;
+}
 const PUSH_ALL_HELPER = `
 function pushAll(target, values) {
   for (const value of values) target.push(value);
@@ -296,6 +333,52 @@ function createNamedSlot(name, value) {
 }
 `;
 //#endregion
+//#region packages/web-c/output-react-wrapper/src/runtime/createComponent.ts
+function createComponent(options) {
+	var _customElements$get;
+	const { defineCustomElement, react, tagName, transformTag, elementClass, events = {}, slots = [], displayName } = options;
+	const finalTagName = transformTag ? transformTag(tagName) : tagName;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const LitComponent = (0, _lit_react.createComponent)({
+		react,
+		tagName: finalTagName,
+		elementClass: elementClass !== null && elementClass !== void 0 ? elementClass : typeof customElements === "undefined" ? HTMLElement : (_customElements$get = customElements.get(finalTagName)) !== null && _customElements$get !== void 0 ? _customElements$get : HTMLElement,
+		events,
+		displayName
+	});
+	if (!slots.length) return LitComponent;
+	const slotSet = new Set(slots);
+	return react.forwardRef((inputProps, ref) => {
+		const rest = {};
+		const slottedChildren = [];
+		if (inputProps == null) {
+			rest.ref = ref;
+			return react.createElement(LitComponent, rest);
+		}
+		const props = inputProps;
+		for (const key in props) {
+			if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+			const value = props[key];
+			if (slotSet.has(key)) {
+				const child = createNamedSlot(react, key, value);
+				if (child != null) slottedChildren.push(child);
+				continue;
+			}
+			rest[key] = value;
+		}
+		rest.ref = ref;
+		if (props.children != null) slottedChildren.push(props.children);
+		return react.createElement(LitComponent, rest, ...slottedChildren);
+	});
+}
+function createNamedSlot(react, name, value) {
+	if (value == null || value === false) return null;
+	return react.createElement("span", {
+		slot: name,
+		style: { display: "contents" }
+	}, value);
+}
+//#endregion
 //#region packages/web-c/output-react-wrapper/src/index.ts
 function reactWrapper(options = {}) {
 	var _options$outDir, _options$stripPrefix, _options$dts, _options$index, _options$namedSlots, _options$wrapper;
@@ -306,7 +389,7 @@ function reactWrapper(options = {}) {
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
 		namedSlots: (_options$namedSlots = options.namedSlots) !== null && _options$namedSlots !== void 0 ? _options$namedSlots : "props",
-		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "minimal"
+		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "runtime"
 	};
 	return {
 		name: "zeus-output-react-wrapper",
@@ -349,4 +432,5 @@ function reactWrapper(options = {}) {
 	};
 }
 //#endregion
+exports.createComponent = createComponent;
 exports.default = reactWrapper;

package/dist/output-react-wrapper.d.ts

@@ -1,6 +1,6 @@
 import { DtsMode, ZeusComponentPlugin } from '@zeus-js/bundler-plugin';
 
-type ReactWrapperMode = 'minimal' | 'event-bridge';
+type ReactWrapperMode = 'runtime' | 'minimal' | 'event-bridge';
 export interface OutputReactWrapperOptions {
     /**
      * React wrapper output directory.
@@ -31,8 +31,12 @@ export interface OutputReactWrapperOptions {
      */
     index?: boolean;
     /**
+     * runtime:
+     *   Default. Generates thin proxies powered by @zeus-js/output-react-wrapper/runtime.
+     *   No useEffect, no addEventListener, no prop sync — delegates to @lit/react.
+     *
      * minimal:
-     *   Default. Requires React 19+.
+     *   Requires React 19+.
      *   React wrapper only renders the custom element tag.
      *   No useEffect prop sync, no event listeners.
      *
@@ -55,6 +59,44 @@ export interface OutputReactWrapperOptions {
     namedSlots?: 'props' | 'none';
 }
 
+export type EventName<T extends Event = Event> = string & {
+    __eventType: T;
+};
+type EventNames = Record<string, EventName | string>;
+type ElementProps<I extends HTMLElement> = Partial<Omit<I, keyof HTMLElement>>;
+type ReactRef<I extends HTMLElement> = ((instance: I | null) => void) | {
+    current: I | null;
+} | null;
+export interface ReactModule {
+    createElement: (...args: unknown[]) => unknown;
+    forwardRef: (...args: unknown[]) => unknown;
+}
+type EventListeners<E extends EventNames> = {
+    [K in keyof E]?: E[K] extends EventName<infer T> ? (event: T) => void : (event: Event) => void;
+};
+type ComponentProps<I extends HTMLElement, E extends EventNames> = {
+    children?: unknown;
+    className?: string;
+    ref?: ReactRef<I>;
+    style?: unknown;
+} & {
+    [key: string]: unknown;
+} & EventListeners<E> & ElementProps<I>;
+export type ZeusReactComponent<I extends HTMLElement, E extends EventNames = {}> = (props: ComponentProps<I, E>) => unknown;
+export interface ZeusReactCreateComponentOptions<I extends HTMLElement, E extends EventNames> {
+    tagName: string;
+    react: ReactModule;
+    defineCustomElement?: () => void;
+    elementClass?: {
+        new (): I;
+    };
+    events?: E;
+    slots?: string[];
+    displayName?: string;
+    transformTag?: (tagName: string) => string;
+}
+export declare function createComponent<I extends HTMLElement, E extends EventNames = {}>(options: ZeusReactCreateComponentOptions<I, E>): ZeusReactComponent<I, E>;
+
 export declare function reactWrapper(options?: OutputReactWrapperOptions): ZeusComponentPlugin;
 
 export { reactWrapper as default };

package/dist/output-react-wrapper.esm-bundler.js

@@ -1,10 +1,11 @@
 /**
-* output-react-wrapper v0.1.0-beta.4
+* output-react-wrapper v0.1.0-beta.5
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
 import { resolvePluginDts } from "@zeus-js/bundler-plugin";
 import { generateReactDts } from "@zeus-js/component-dts";
+import { createComponent as createComponent$1 } from "@lit/react";
 //#region packages/web-c/output-react-wrapper/src/generateReactIndex.ts
 function generateReactIndex(components, options) {
 	const lines = [];
@@ -18,7 +19,7 @@ function generateReactIndex(components, options) {
 //#endregion
 //#region packages/web-c/output-react-wrapper/src/generateReactWrapper.ts
 function generateReactWrapper(input) {
-	return input.mode === "event-bridge" ? generateEventBridgeReactWrapper(input) : generateMinimalReactWrapper(input);
+	return input.mode === "runtime" ? generateRuntimeReactWrapper(input) : input.mode === "event-bridge" ? generateEventBridgeReactWrapper(input) : generateMinimalReactWrapper(input);
 }
 function generateMinimalReactWrapper(input) {
 	const { component, namedSlots, wcModuleId } = input;
@@ -271,6 +272,42 @@ function toKebabCase(value) {
 function toReactEventProp(value) {
 	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
 }
+function generateRuntimeReactWrapper(input) {
+	const { component, namedSlots } = input;
+	const events = createRuntimeEventMap(component);
+	const slots = getNamedSlots(component, namedSlots);
+	return [
+		`import React from 'react'`,
+		`import { createComponent } from '@zeus-js/output-react-wrapper/runtime'`,
+		`import { defineCustomElement } from '../wc/loader.js'`,
+		``,
+		`export const ${component.name} = createComponent({`,
+		`  react: React,`,
+		`  tagName: ${JSON.stringify(component.tag)},`,
+		`  defineCustomElement: () => defineCustomElement(${JSON.stringify(component.tag)}),`,
+		`  events: ${formatEventObject(events)},`,
+		`  slots: ${JSON.stringify(slots)},`,
+		`  displayName: ${JSON.stringify(component.name)},`,
+		`})`,
+		``
+	].join("\n");
+}
+function createRuntimeEventMap(component) {
+	const events = {};
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$key2, _event$name2, _event$reactName2;
+		const sourceEventName = (_event$key2 = event.key) !== null && _event$key2 !== void 0 ? _event$key2 : key;
+		const domEventName = (_event$name2 = event.name) !== null && _event$name2 !== void 0 ? _event$name2 : toKebabCase(sourceEventName);
+		const reactPropName = (_event$reactName2 = event.reactName) !== null && _event$reactName2 !== void 0 ? _event$reactName2 : toReactEventProp(sourceEventName);
+		events[reactPropName] = domEventName;
+	}
+	return events;
+}
+function formatEventObject(value) {
+	const entries = Object.entries(value);
+	if (!entries.length) return "{}";
+	return `{\n${entries.map(([key, item]) => `    ${JSON.stringify(key)}: ${JSON.stringify(item)}`).join(",\n")}\n  }`;
+}
 const PUSH_ALL_HELPER = `
 function pushAll(target, values) {
   for (const value of values) target.push(value);
@@ -292,6 +329,52 @@ function createNamedSlot(name, value) {
 }
 `;
 //#endregion
+//#region packages/web-c/output-react-wrapper/src/runtime/createComponent.ts
+function createComponent(options) {
+	var _customElements$get;
+	const { defineCustomElement, react, tagName, transformTag, elementClass, events = {}, slots = [], displayName } = options;
+	const finalTagName = transformTag ? transformTag(tagName) : tagName;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const LitComponent = createComponent$1({
+		react,
+		tagName: finalTagName,
+		elementClass: elementClass !== null && elementClass !== void 0 ? elementClass : typeof customElements === "undefined" ? HTMLElement : (_customElements$get = customElements.get(finalTagName)) !== null && _customElements$get !== void 0 ? _customElements$get : HTMLElement,
+		events,
+		displayName
+	});
+	if (!slots.length) return LitComponent;
+	const slotSet = new Set(slots);
+	return react.forwardRef((inputProps, ref) => {
+		const rest = {};
+		const slottedChildren = [];
+		if (inputProps == null) {
+			rest.ref = ref;
+			return react.createElement(LitComponent, rest);
+		}
+		const props = inputProps;
+		for (const key in props) {
+			if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+			const value = props[key];
+			if (slotSet.has(key)) {
+				const child = createNamedSlot(react, key, value);
+				if (child != null) slottedChildren.push(child);
+				continue;
+			}
+			rest[key] = value;
+		}
+		rest.ref = ref;
+		if (props.children != null) slottedChildren.push(props.children);
+		return react.createElement(LitComponent, rest, ...slottedChildren);
+	});
+}
+function createNamedSlot(react, name, value) {
+	if (value == null || value === false) return null;
+	return react.createElement("span", {
+		slot: name,
+		style: { display: "contents" }
+	}, value);
+}
+//#endregion
 //#region packages/web-c/output-react-wrapper/src/index.ts
 function reactWrapper(options = {}) {
 	var _options$outDir, _options$stripPrefix, _options$dts, _options$index, _options$namedSlots, _options$wrapper;
@@ -302,7 +385,7 @@ function reactWrapper(options = {}) {
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
 		namedSlots: (_options$namedSlots = options.namedSlots) !== null && _options$namedSlots !== void 0 ? _options$namedSlots : "props",
-		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "minimal"
+		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "runtime"
 	};
 	return {
 		name: "zeus-output-react-wrapper",
@@ -345,4 +428,4 @@ function reactWrapper(options = {}) {
 	};
 }
 //#endregion
-export { reactWrapper as default };
+export { createComponent, reactWrapper as default };

package/dist/runtime/index.cjs.js

@@ -0,0 +1,57 @@
+/**
+* output-react-wrapper v0.1.0-beta.5
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let _lit_react = require("@lit/react");
+//#region packages/web-c/output-react-wrapper/src/runtime/createComponent.ts
+function createComponent(options) {
+	var _customElements$get;
+	const { defineCustomElement, react, tagName, transformTag, elementClass, events = {}, slots = [], displayName } = options;
+	const finalTagName = transformTag ? transformTag(tagName) : tagName;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const LitComponent = (0, _lit_react.createComponent)({
+		react,
+		tagName: finalTagName,
+		elementClass: elementClass !== null && elementClass !== void 0 ? elementClass : typeof customElements === "undefined" ? HTMLElement : (_customElements$get = customElements.get(finalTagName)) !== null && _customElements$get !== void 0 ? _customElements$get : HTMLElement,
+		events,
+		displayName
+	});
+	if (!slots.length) return LitComponent;
+	const slotSet = new Set(slots);
+	return react.forwardRef((inputProps, ref) => {
+		const rest = {};
+		const slottedChildren = [];
+		if (inputProps == null) {
+			rest.ref = ref;
+			return react.createElement(LitComponent, rest);
+		}
+		const props = inputProps;
+		for (const key in props) {
+			if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+			const value = props[key];
+			if (slotSet.has(key)) {
+				const child = createNamedSlot(react, key, value);
+				if (child != null) slottedChildren.push(child);
+				continue;
+			}
+			rest[key] = value;
+		}
+		rest.ref = ref;
+		if (props.children != null) slottedChildren.push(props.children);
+		return react.createElement(LitComponent, rest, ...slottedChildren);
+	});
+}
+function createNamedSlot(react, name, value) {
+	if (value == null || value === false) return null;
+	return react.createElement("span", {
+		slot: name,
+		style: { display: "contents" }
+	}, value);
+}
+//#endregion
+exports.createComponent = createComponent;

package/dist/runtime/index.cjs.prod.js

@@ -0,0 +1,57 @@
+/**
+* output-react-wrapper v0.1.0-beta.5
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let _lit_react = require("@lit/react");
+//#region packages/web-c/output-react-wrapper/src/runtime/createComponent.ts
+function createComponent(options) {
+	var _customElements$get;
+	const { defineCustomElement, react, tagName, transformTag, elementClass, events = {}, slots = [], displayName } = options;
+	const finalTagName = transformTag ? transformTag(tagName) : tagName;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const LitComponent = (0, _lit_react.createComponent)({
+		react,
+		tagName: finalTagName,
+		elementClass: elementClass !== null && elementClass !== void 0 ? elementClass : typeof customElements === "undefined" ? HTMLElement : (_customElements$get = customElements.get(finalTagName)) !== null && _customElements$get !== void 0 ? _customElements$get : HTMLElement,
+		events,
+		displayName
+	});
+	if (!slots.length) return LitComponent;
+	const slotSet = new Set(slots);
+	return react.forwardRef((inputProps, ref) => {
+		const rest = {};
+		const slottedChildren = [];
+		if (inputProps == null) {
+			rest.ref = ref;
+			return react.createElement(LitComponent, rest);
+		}
+		const props = inputProps;
+		for (const key in props) {
+			if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+			const value = props[key];
+			if (slotSet.has(key)) {
+				const child = createNamedSlot(react, key, value);
+				if (child != null) slottedChildren.push(child);
+				continue;
+			}
+			rest[key] = value;
+		}
+		rest.ref = ref;
+		if (props.children != null) slottedChildren.push(props.children);
+		return react.createElement(LitComponent, rest, ...slottedChildren);
+	});
+}
+function createNamedSlot(react, name, value) {
+	if (value == null || value === false) return null;
+	return react.createElement("span", {
+		slot: name,
+		style: { display: "contents" }
+	}, value);
+}
+//#endregion
+exports.createComponent = createComponent;

package/dist/runtime/index.d.ts

@@ -0,0 +1,39 @@
+export type EventName<T extends Event = Event> = string & {
+    __eventType: T;
+};
+type EventNames = Record<string, EventName | string>;
+type ElementProps<I extends HTMLElement> = Partial<Omit<I, keyof HTMLElement>>;
+type ReactRef<I extends HTMLElement> = ((instance: I | null) => void) | {
+    current: I | null;
+} | null;
+export interface ReactModule {
+    createElement: (...args: unknown[]) => unknown;
+    forwardRef: (...args: unknown[]) => unknown;
+}
+type EventListeners<E extends EventNames> = {
+    [K in keyof E]?: E[K] extends EventName<infer T> ? (event: T) => void : (event: Event) => void;
+};
+type ComponentProps<I extends HTMLElement, E extends EventNames> = {
+    children?: unknown;
+    className?: string;
+    ref?: ReactRef<I>;
+    style?: unknown;
+} & {
+    [key: string]: unknown;
+} & EventListeners<E> & ElementProps<I>;
+export type ZeusReactComponent<I extends HTMLElement, E extends EventNames = {}> = (props: ComponentProps<I, E>) => unknown;
+export interface ZeusReactCreateComponentOptions<I extends HTMLElement, E extends EventNames> {
+    tagName: string;
+    react: ReactModule;
+    defineCustomElement?: () => void;
+    elementClass?: {
+        new (): I;
+    };
+    events?: E;
+    slots?: string[];
+    displayName?: string;
+    transformTag?: (tagName: string) => string;
+}
+export declare function createComponent<I extends HTMLElement, E extends EventNames = {}>(options: ZeusReactCreateComponentOptions<I, E>): ZeusReactComponent<I, E>;
+
+

package/dist/runtime/index.js

@@ -0,0 +1,53 @@
+/**
+* output-react-wrapper v0.1.0-beta.5
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+import { createComponent as createComponent$1 } from "@lit/react";
+//#region packages/web-c/output-react-wrapper/src/runtime/createComponent.ts
+function createComponent(options) {
+	var _customElements$get;
+	const { defineCustomElement, react, tagName, transformTag, elementClass, events = {}, slots = [], displayName } = options;
+	const finalTagName = transformTag ? transformTag(tagName) : tagName;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const LitComponent = createComponent$1({
+		react,
+		tagName: finalTagName,
+		elementClass: elementClass !== null && elementClass !== void 0 ? elementClass : typeof customElements === "undefined" ? HTMLElement : (_customElements$get = customElements.get(finalTagName)) !== null && _customElements$get !== void 0 ? _customElements$get : HTMLElement,
+		events,
+		displayName
+	});
+	if (!slots.length) return LitComponent;
+	const slotSet = new Set(slots);
+	return react.forwardRef((inputProps, ref) => {
+		const rest = {};
+		const slottedChildren = [];
+		if (inputProps == null) {
+			rest.ref = ref;
+			return react.createElement(LitComponent, rest);
+		}
+		const props = inputProps;
+		for (const key in props) {
+			if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+			const value = props[key];
+			if (slotSet.has(key)) {
+				const child = createNamedSlot(react, key, value);
+				if (child != null) slottedChildren.push(child);
+				continue;
+			}
+			rest[key] = value;
+		}
+		rest.ref = ref;
+		if (props.children != null) slottedChildren.push(props.children);
+		return react.createElement(LitComponent, rest, ...slottedChildren);
+	});
+}
+function createNamedSlot(react, name, value) {
+	if (value == null || value === false) return null;
+	return react.createElement("span", {
+		slot: name,
+		style: { display: "contents" }
+	}, value);
+}
+//#endregion
+export { createComponent };

package/dist/runtime/index.prod.js

@@ -0,0 +1,53 @@
+/**
+* output-react-wrapper v0.1.0-beta.5
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+import { createComponent as createComponent$1 } from "@lit/react";
+//#region packages/web-c/output-react-wrapper/src/runtime/createComponent.ts
+function createComponent(options) {
+	var _customElements$get;
+	const { defineCustomElement, react, tagName, transformTag, elementClass, events = {}, slots = [], displayName } = options;
+	const finalTagName = transformTag ? transformTag(tagName) : tagName;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const LitComponent = createComponent$1({
+		react,
+		tagName: finalTagName,
+		elementClass: elementClass !== null && elementClass !== void 0 ? elementClass : typeof customElements === "undefined" ? HTMLElement : (_customElements$get = customElements.get(finalTagName)) !== null && _customElements$get !== void 0 ? _customElements$get : HTMLElement,
+		events,
+		displayName
+	});
+	if (!slots.length) return LitComponent;
+	const slotSet = new Set(slots);
+	return react.forwardRef((inputProps, ref) => {
+		const rest = {};
+		const slottedChildren = [];
+		if (inputProps == null) {
+			rest.ref = ref;
+			return react.createElement(LitComponent, rest);
+		}
+		const props = inputProps;
+		for (const key in props) {
+			if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+			const value = props[key];
+			if (slotSet.has(key)) {
+				const child = createNamedSlot(react, key, value);
+				if (child != null) slottedChildren.push(child);
+				continue;
+			}
+			rest[key] = value;
+		}
+		rest.ref = ref;
+		if (props.children != null) slottedChildren.push(props.children);
+		return react.createElement(LitComponent, rest, ...slottedChildren);
+	});
+}
+function createNamedSlot(react, name, value) {
+	if (value == null || value === false) return null;
+	return react.createElement("span", {
+		slot: name,
+		style: { display: "contents" }
+	}, value);
+}
+//#endregion
+export { createComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeus-js/output-react-wrapper",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.5",
   "description": "Zeus React wrapper output plugin",
   "type": "module",
   "main": "index.js",
@@ -21,6 +21,11 @@
         "development": "./dist/output-react-wrapper.cjs.js",
         "default": "./index.js"
       }
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js",
+      "require": "./dist/runtime/index.cjs.js"
     }
   },
   "sideEffects": false,
@@ -33,17 +38,28 @@
     "formats": [
       "esm-bundler",
       "cjs"
+    ],
+    "additionalEntries": [
+      {
+        "entry": "runtime/index.ts",
+        "output": "dist/runtime/index.js"
+      }
     ]
   },
   "dependencies": {
-    "@zeus-js/bundler-plugin": "0.1.0-beta.4",
-    "@zeus-js/component-analyzer": "0.1.0-beta.4",
-    "@zeus-js/component-dts": "0.1.0-beta.4"
+    "@lit/react": "^1.0.8",
+    "@zeus-js/component-analyzer": "0.1.0-beta.5",
+    "@zeus-js/bundler-plugin": "0.1.0-beta.5",
+    "@zeus-js/component-dts": "0.1.0-beta.5"
   },
   "peerDependencies": {
+    "@types/react": "17 || 18 || 19",
     "react": ">=18"
   },
   "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
     "react": {
       "optional": true
     }