@meonode/ui 0.1.11 → 0.1.13

package/dist/core.node.d.ts

@@ -1,5 +1,5 @@
 import React, { type ReactNode } from 'react';
-import type { BaseNodeInstance, NodeElement, NodeProps } from './node.type.js';
+import type { BaseNodeInstance, NodeElement, NodeProps, Theme } from './node.type.js';
 /**
  * Factory function to create a BaseNode instance.
  * @param element The React element type.
@@ -9,17 +9,26 @@ import type { BaseNodeInstance, NodeElement, NodeProps } from './node.type.js';
 export declare function Node<E extends NodeElement>(element: E, props?: Partial<NodeProps<E>>): BaseNodeInstance<E>;
 /**
  * Higher-order component wrapper that converts BaseNode components into React components.
+ * This wrapper ensures proper theme propagation and component rendering in the React ecosystem.
  *
- * This function takes a component function that may return either a BaseNode instance
- * or a ReactNode, and wraps it to ensure the output is always a renderable ReactNode.
- * BaseNode instances are automatically converted using render().
- * @template T - The type of props accepted by the component
- * @param component The component function that returns either a BaseNode or ReactNode
- * @returns A React function component that takes the same props and returns a ReactNode
+ * Key features:
+ * - Converts BaseNode instances to React elements via render()
+ * - Handles theme inheritance and merging
+ * - Preserves component props
+ * - Type-safe with generic prop types
+ * @template T - The props type for the wrapped component
+ * @param component Component function that returns a BaseNode or ReactNode
+ * @returns A React function component that handles BaseNode conversion and theme propagation
  * @example
- * const MyComponent = Component((props) => {
- *   return Node('div', { ...props })
+ * // Basic usage
+ * const Button = Component((props) => {
+ *   return Node('button', {
+ *     ...props,
+ *     theme: { color: 'blue' }
+ *   })
  * })
  */
-export declare function Component<T extends Record<string, any>>(component: (props: T) => BaseNodeInstance<any> | ReactNode): (props: T) => string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | BaseNodeInstance<any> | null | undefined;
+export declare function Component<T extends Record<string, any> & {
+    theme?: Theme;
+}>(component: (props: T) => BaseNodeInstance<any> | ReactNode): (props?: T) => string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | BaseNodeInstance<any> | null | undefined;
 //# sourceMappingURL=core.node.d.ts.map

package/dist/core.node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAsG,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACjJ,OAAO,KAAK,EAAE,gBAAgB,EAAwC,WAAW,EAAE,SAAS,EAA4B,MAAM,mBAAmB,CAAA;AAuTjJ;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,GAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAS9G;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,gBAAgB,CAAC,GAAG,CAAC,GAAG,SAAS,IACzG,OAAO,CAAC,kXAOjB"}
+{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAsG,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACjJ,OAAO,KAAK,EAAE,gBAAgB,EAAwC,WAAW,EAAE,SAAS,EAAqB,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAoXjJ;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,GAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAU9G;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,gBAAgB,CAAC,GAAG,CAAC,GAAG,SAAS,IAE7H,QAAO,CAAW,kXAmB3B"}

package/dist/core.node.js

@@ -1,30 +1,38 @@
-"use strict";var _excluded=["children","nodeTheme"],_excluded2=["children","key"];function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return(b=_toPropertyKey(b))in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],-1===b.indexOf(c)&&{}.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c={};for(var d in a)if({}.hasOwnProperty.call(a,d)){if(-1!==b.indexOf(d))continue;c[d]=a[d]}return c}function _classCallCheck(b,a){if(!(b instanceof a))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,_toPropertyKey(c.key),c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),Object.defineProperty(a,"prototype",{writable:!1}),a}function _toPropertyKey(a){var b=_toPrimitive(a,"string");return"symbol"==_typeof(b)?b:b+""}function _toPrimitive(a,b){if("object"!=_typeof(a)||!a)return a;var c=a[Symbol.toPrimitive];if(void 0!==c){var d=c.call(a,b||"default");if("object"!=_typeof(d))return d;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===b?String:Number)(a)}import React,{createElement,isValidElement}from"react";import{getComponentType,getCSSProps,getDOMProps,getElementTypeName,getValueByPath}from"./node.helper.js";import{isForwardRef,isMemo,isReactClassComponent,isValidElementType}from"./react-is.helper.js";/**
+"use strict";var _excluded=["children","nodeTheme"],_excluded2=["children","key"];function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],-1===b.indexOf(c)&&{}.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c={};for(var d in a)if({}.hasOwnProperty.call(a,d)){if(-1!==b.indexOf(d))continue;c[d]=a[d]}return c}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _classCallCheck(b,a){if(!(b instanceof a))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,_toPropertyKey(c.key),c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),Object.defineProperty(a,"prototype",{writable:!1}),a}function _defineProperty(a,b,c){return(b=_toPropertyKey(b))in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _toPropertyKey(a){var b=_toPrimitive(a,"string");return"symbol"==_typeof(b)?b:b+""}function _toPrimitive(a,b){if("object"!=_typeof(a)||!a)return a;var c=a[Symbol.toPrimitive];if(void 0!==c){var d=c.call(a,b||"default");if("object"!=_typeof(d))return d;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===b?String:Number)(a)}import React,{createElement,isValidElement}from"react";import{getComponentType,getCSSProps,getDOMProps,getElementTypeName,getValueByPath}from"./node.helper.js";import{isForwardRef,isMemo,isReactClassComponent,isValidElementType}from"./react-is.helper.js";/**
  * Represents a node in a React component tree, providing a structured way to define and manipulate
  * React elements before they are rendered. Handles props processing, theme application, and child node management.
  * @template E The type of the React element this node represents (e.g., 'div', a custom component).
- */var BaseNode=/*#__PURE__*/function(){/** The React element type for this node. *//** The original, unprocessed props passed to this node during construction. *//** The processed props for this node, including styles, DOM attributes, and children. *//**
+ */var BaseNode=/*#__PURE__*/function(){/** The React element type for this node. *//** The original, unprocessed props passed to this node during construction. */// Initial props before processing
+/** The processed props for this node, including styles, DOM attributes, and children. *//**
    * Constructs a new BaseNode instance.
    * @param element The React element type.
    * @param rawProps The raw props for the node.
-   */function BaseNode(a,b){var c=this;_classCallCheck(this,BaseNode),this.element=a,this.rawProps=b;var d=b||{},e=d.children,f=d.nodeTheme,g=_objectWithoutProperties(d,_excluded),h=getCSSProps(g),i=this._resolveStyleWithTheme(h,f);// 1. Resolve styles and DOM props for this node
-i=0<Object.keys(i).length?i:{};var j=getDOMProps(g),k=void 0;// 2. Process rawNoderen into BaseNode instances or primitives, passing down currentTheme
-if(e!==void 0&&null!==e)if(Array.isArray(e)){k=e.map(function(a,b){return c._processRawNode(a,f,b)}// Pass index for array children
+   */function BaseNode(a,b){var c=this;_classCallCheck(this,BaseNode),_defineProperty(this,"_normalizeChild",function(a){var b,d;if(!a)return a;var e=(null===(b=c.rawProps)||void 0===b?void 0:b.nodeTheme)||(null===(d=c.rawProps)||void 0===d?void 0:d.theme)||c.props.nodeTheme||c.props.theme;// For BaseNode instances, apply current theme if child has no theme
+if(a instanceof BaseNode){var f;return null!==(f=a.rawProps)&&void 0!==f&&f.nodeTheme||void 0===e?a.render():new BaseNode(a.element,_objectSpread(_objectSpread({},a.rawProps),{},{nodeTheme:e})).render()}// For React.Component instances, wrap in BaseNode with theme if needed
+if(a instanceof React.Component)return a.props.nodeTheme||void 0===e?a.render():new BaseNode(a.render(),_objectSpread(_objectSpread({},a.props),{},{nodeTheme:e})).render();// Validate element type before returning
+if(!isValidElementType(a)){var g=getComponentType(a);throw new Error("Invalid element type: ".concat(g," provided!"))}// Return valid React elements as-is
+return a}),this.element=a,this.rawProps=b;var d=b||{},e=d.children,f=d.nodeTheme,g=_objectWithoutProperties(d,_excluded),h=getCSSProps(g),i=this._resolveStyleWithTheme(h,f);// Extract children and theme
+// 1. Resolve styles and DOM props for this node
+i=0<Object.keys(i).length?i:{};var j=getDOMProps(g),k=void 0;// Extract DOM-related props
+// 2. Process rawNoderen into BaseNode instances or primitives, passing down currentTheme
+if(e!==void 0&&null!==e)if(Array.isArray(e)){k=e.map(function(a,b){return c._processRawNode(a,f,b)}// Process each child, passing index
 )}else// For a single child, no index is passed; existing key logic in _processRawNode will apply
 k=this._processRawNode(e,f);// 3. Construct final this.props
-this.props=_objectSpread(_objectSpread({},j),{},{style:i,nodeTheme:f,children:k})}/**
+this.props=_objectSpread(_objectSpread({},j),{},{style:i,nodeTheme:f,children:k// Assign processed children
+})}/**
    * Resolves style properties by replacing theme path placeholders with actual theme values.
    * Handles complex strings like '1px solid theme.background.primary' and iterative resolution.
    * @param initialCssProps The initial CSS properties object.
    * @param theme The theme object to use for resolving paths.
    * @returns A new CSSProperties object with theme values resolved.
-   */return _createClass(BaseNode,[{key:"_resolveStyleWithTheme",value:function _resolveStyleWithTheme(a,b){// If no theme is provided or there are no initial CSS props to process, return the initial props.
-if(!b||0===Object.keys(a).length)return a;var c=_objectSpread({},a);// Create a mutable copy
-for(var d in c)if(Object.prototype.hasOwnProperty.call(c,d)){var e=c[d];if("string"==typeof e&&e.includes("theme.")){var f=e;// Iteratively resolve theme references within the string
-f=f.replace(/theme\.([a-zA-Z0-9_.-]+)/g,function(a,c){var d=getValueByPath(b,c);// Use 'theme' passed to the function
+   */return _createClass(BaseNode,[{key:"_resolveStyleWithTheme",value:function _resolveStyleWithTheme(a,b){var c;// If no theme is provided or there are no initial CSS props to process, return the initial props.
+if(!b||0===Object.keys(a).length)return a;var d=_objectSpread(_objectSpread({},null===(c=this.rawProps)||void 0===c?void 0:c.nodeTheme),b),e=_objectSpread({},a);// Merge nodeTheme from rawProps with theme
+for(var f in e)if(Object.prototype.hasOwnProperty.call(e,f)){var g=e[f];if("string"==typeof g&&g.includes("theme.")){var h=g;// Iteratively resolve theme references within the string
+h=h.replace(/theme\.([a-zA-Z0-9_.-]+)/g,function(a,b){var c=getValueByPath(d,b);// Use 'theme' passed to the function
 // Replace if themeValue is found and is a string or number.
 // null is explicitly excluded to avoid 'null' string in output unless intended.
-return void 0!==d&&null!==d&&("string"==typeof d||"number"==typeof d)?d+"":a;// If themeValue is not a string/number, or is undefined/null, keep the original placeholder
-}),c[d]=f}}return c}/**
+return void 0!==c&&null!==c&&("string"==typeof c||"number"==typeof c)?c+"":a;// If themeValue is not a string/number, or is undefined/null, keep the original placeholder
+}),e[f]=h}}return e}/**
    * React component that renders the result of a function child, supporting theme propagation.
    *
    * This component is used to render children that are functions (i.e., `() => Children`).
@@ -37,9 +45,11 @@ return void 0!==d&&null!==d&&("string"==typeof d||"number"==typeof d)?d+"":a;//
    */},{key:"_functionRenderer",value:function _functionRenderer(a){var b=a.render,c=a.passedTheme,d=a.passedKey,e=a.processRawNode,f=b();// Call the user-provided render function to get the child.
 if(f instanceof React.Component){var g=f.render(),h=e(g,c);return h instanceof BaseNode?h.render():h}if(f instanceof BaseNode){var i,j=f;// If the returned BaseNode does not have its own theme, but a theme is provided,
 // re-create the node with the provided theme to ensure correct theme propagation.
-return void 0===(null===(i=j.rawProps)||void 0===i?void 0:i.nodeTheme)&&void 0!==c?new BaseNode(j.element,_objectSpread(_objectSpread({},j.rawProps||{}),{},{nodeTheme:c,theme:c,// Also pass theme for consistency if it was used in rawProps
+return void 0===(null===(i=j.rawProps)||void 0===i?void 0:i.nodeTheme)&&void 0!==c?new BaseNode(j.element,_objectSpread(_objectSpread({},j.rawProps||{}),{},{nodeTheme:c,theme:c,// Pass theme for consistency if used in rawProps
 key:d})).render():j.render();// If the node already has a theme or no theme is provided, render as-is.
-}// If the result is not a BaseNode (e.g., JSX, string, etc.), return it directly.
+}// Process the result if it's not a React.Component or BaseNode
+var k=e(f,c);if(k instanceof BaseNode){var l,m;if(((null===(l=k.rawProps)||void 0===l?void 0:l.theme)||(null===(m=k.rawProps)||void 0===m?void 0:m.nodeTheme))===void 0&&c!==void 0){var n,o,p;return new BaseNode(k.element,_objectSpread(_objectSpread({},k.rawProps),{},{nodeTheme:(null===(n=k.rawProps)||void 0===n?void 0:n.theme)||(null===(o=k.rawProps)||void 0===o?void 0:o.nodeTheme)||c,key:(null===(p=k.rawProps)||void 0===p?void 0:p.key)||d// Use existing key or passed key
+})).render()}return k.render()}// If the result is not a BaseNode (e.g., JSX, string, etc.), return it directly.
 // Note: Non-BaseNode results will not automatically receive the theme.
 return f}/**
    * Processes a single raw child element, converting it into a ProcessedChild.
@@ -50,58 +60,96 @@ return f}/**
    * @param childIndex Optional index of the child if it's part of an array.
    * @returns The processed child.
    */},{key:"_processRawNode",value:function _processRawNode(a,b,c// Index for generating stable keys for array children
-){var d=getComponentType(a),e=function generateIndexedKeyIfNeeded(a,b){if(b!==void 0&&null!==b)return b;if(void 0!==c){var d=getElementTypeName(a);return"".concat(d,"-").concat(c)}// No explicit key, and not an array child, so BaseNode constructor will handle.
-};// Helper to generate an indexed key if no explicit key is present and an index is available.
+){var d=getComponentType(a),e=function generateIndexedKeyIfNeeded(a,b){if(b!==void 0&&null!==b)return b;if(void 0!==c){var d=getElementTypeName(a);// Get element type name for key generation
+return"".concat(d,"-").concat(c)}// No explicit key, and not an array child, so BaseNode constructor will handle.
+};// Determine the type of the raw node
+// Helper to generate an indexed key if no explicit key is present and an index is available.
 // Case 1: Child is already a BaseNode instance
-if(a instanceof BaseNode){var f=a,g=f.rawProps||{},h=g.nodeTheme,i=e(f.element,g.key);// Prefer child's own theme
-return new BaseNode(f.element,_objectSpread(_objectSpread({},g),{},{nodeTheme:h||b||{},key:i}))}// Case 2: Child is a primitive (string, number, boolean, null, undefined)
+if(a instanceof BaseNode){var f=a,g=f.rawProps||{},h=g.nodeTheme,i=e(f.element,g.key);// Get initial raw props of the child
+// Get the child's own theme
+// Prefer child's own theme
+return new BaseNode(f.element,_objectSpread(_objectSpread({},g),{},{nodeTheme:h||b||{},// Use the determined theme for the new node
+key:i}));// Create a new BaseNode with merged props and theme
+}// Case 2: Child is a primitive (string, number, boolean, null, undefined)
 if("string"===d||"number"===d||"boolean"===d||null===a||void 0===a)return a;// Case 3: Child is a function that needs to be called during render (FunctionRenderer).
 if("function"===d&&!isReactClassComponent(a)&&!isMemo(a)&&!isForwardRef(a)){// The key is for the BaseNode that wraps the _functionRenderer component.
 // Functions themselves don't have a .key prop that we can access here.
-var j=e(this._functionRenderer,void 0);return new BaseNode(this._functionRenderer,{processRawNode:this._processRawNode.bind(this),render:a,passedTheme:b,key:j})}// Case 4: Child is a React Element (JSX element like <div> or <MyComponent>)
+var j=e(this._functionRenderer,void 0);// Generate key for function renderer
+return new BaseNode(this._functionRenderer,{processRawNode:this._processRawNode.bind(this),render:a,passedTheme:b,key:j// Assign the generated key
+})}// Case 4: Child is a React Element (JSX element like <div> or <MyComponent>)
 if(isValidElement(a)){var k,l=_objectSpread({},a.props);// Extract and merge props from the JSX element, flattening style props
 l=_objectSpread(_objectSpread({},l.style),l),delete l.style;// Remove original style object after merging
-// Handle theme by preferring nodeTheme from child's props, falling back to parent theme if not set
+// Handle theme: prefer nodeTheme from child's props, fallback to parent theme
 var m=(null===(k=l)||void 0===k?void 0:k.nodeTheme)||b,n=e(a.type,a.key);// For array children without keys, generate stable key from element type and index
 // Create new BaseNode instance with processed props and theme
-return new BaseNode(a.type,_objectSpread(_objectSpread({},l),{},{nodeTheme:m,key:n}))}// Case 5: Child is an ElementType (string tag, class component, Memo/ForwardRef)
+return new BaseNode(a.type,_objectSpread(_objectSpread({},l),{},{nodeTheme:m,key:n// Assign the generated key
+}))}// Case 5: Child is an ElementType (string tag, class component, Memo/ForwardRef)
 if(isReactClassComponent(a)||"object"===d&&(isMemo(a)||isForwardRef(a))){// ElementTypes don't have an intrinsic key from the rawNode itself.
-var o=e(a,void 0);return new BaseNode(a,{nodeTheme:b,key:o})}// Case 6: Handle instances of React.Component
-if(a instanceof React.Component){var p=a.render();// Recursively process the rendered element with parent theme and index
+var o=e(a,void 0);return new BaseNode(a,{nodeTheme:b,// Apply parent theme
+key:o})}// Case 6: Handle instances of React.Component
+if(a instanceof React.Component){var p=a.render();// Recursively process the rendered element with parent theme and index if available
 return this._processRawNode(p,b,c)}// Case 7: Fallback for other ReactNode types (e.g., Fragments, Portals if not caught by isValidElement)
 // These are returned as-is. If they are elements within an array, React expects them to have keys.
-// This logic primarily adds keys to BaseNode instances we create.
+// This logic primarily adds keys to BaseNode instances we create, other ReactNodes are returned as-is.
 return a}/**
+   * Normalizes a child node into a renderable ReactNode.
+   * Processes different types of child nodes to ensure they can be properly rendered
+   * while maintaining theme inheritance.
+   *
+   * Handles:
+   * - BaseNode instances (applies theme if needed)
+   * - React.Component instances (applies theme if needed)
+   * - Other valid React element types (returned as-is)
+   * - null/undefined values (returned as-is)
+   * @param child The child node to normalize into a renderable form
+   * @returns The normalized ReactNode that can be rendered by React
+   * @throws Error if child is an invalid element type
+   */},{key:"render",value:/**
    * Converts this BaseNode instance into a renderable React node.
    * Recursively processes child nodes and uses `React.createElement` to construct the final React element.
    * @returns A ReactNode representing the rendered element.
-   */},{key:"render",value:function render(){if(!isValidElementType(this.element))throw new Error("Invalid element type: ".concat(this.element," provided!"));var a=this.props,b=a.children,c=a.key,d=_objectWithoutProperties(a,_excluded2),e=function normalizeChild(a){// Changed NodeElement to ProcessedChild for accuracy
-return a instanceof BaseNode||"object"===_typeof(a)&&null!==a&&"render"in a?a.render():a;// Primitives, other ReactNodes
-},f=void 0;// More accurate type
-if(void 0!==b&&null!==b)if(!Array.isArray(b))f=e(b);else if(0<b.length){var g=b.map(e);// Check if all children are null/undefined (e.g. conditional rendering resulted in nothing)
+   */function render(){if(!isValidElementType(this.element)){var a=getComponentType(this.element);throw new Error("Invalid element type: ".concat(a," provided!"))}var b=this.props,c=b.children,d=b.key,e=_objectWithoutProperties(b,_excluded2),f=void 0;// Extract children and key
+// More accurate type
+if(void 0!==c&&null!==c)if(!Array.isArray(c))f=this._normalizeChild(c);else if(0<c.length){var g=c.map(this._normalizeChild);// Normalize each child in the array
+// Check if all children are null/undefined (e.g. conditional rendering resulted in nothing)
 f=g.every(function(a){return null===a||void 0===a})?void 0:g}else f=void 0;// Prepare props for React.createElement
-var h=_objectSpread(_objectSpread({},d),{},{// Cast otherProps
-key:c// This is the key of the current BaseNode itself
-});// Delete key `nodeTheme` as it's not a valid DOM/React prop for the element
+var h=_objectSpread(_objectSpread({},e),{},{// Cast otherProps
+key:d// This is the key of the current BaseNode itself
+});// Prepare props for React.createElement
+// Delete key `nodeTheme` as it's not a valid DOM/React prop for the element
 return delete h.nodeTheme,createElement(this.element,h,f)}}])}();/**
  * Factory function to create a BaseNode instance.
  * @param element The React element type.
  * @param props The props for the node.
  * @returns BaseNodeInstance<E> - A new BaseNode instance.
  */export function Node(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},c=_objectSpread({},b);// Ensure we are working with a mutable copy
-// 'theme' prop itself is not directly used by BaseNode after this, nodeTheme is.
+// 'theme' prop itself is not directly used by BaseNode after this, nodeTheme is used.
 // We can keep `theme` in rawProps if needed for cloning or inspection.
 return c.theme&&void 0===c.nodeTheme&&(c.nodeTheme=c.theme),new BaseNode(a,c)}/**
  * Higher-order component wrapper that converts BaseNode components into React components.
+ * This wrapper ensures proper theme propagation and component rendering in the React ecosystem.
  *
- * This function takes a component function that may return either a BaseNode instance
- * or a ReactNode, and wraps it to ensure the output is always a renderable ReactNode.
- * BaseNode instances are automatically converted using render().
- * @template T - The type of props accepted by the component
- * @param component The component function that returns either a BaseNode or ReactNode
- * @returns A React function component that takes the same props and returns a ReactNode
+ * Key features:
+ * - Converts BaseNode instances to React elements via render()
+ * - Handles theme inheritance and merging
+ * - Preserves component props
+ * - Type-safe with generic prop types
+ * @template T - The props type for the wrapped component
+ * @param component Component function that returns a BaseNode or ReactNode
+ * @returns A React function component that handles BaseNode conversion and theme propagation
  * @example
- * const MyComponent = Component((props) => {
- *   return Node('div', { ...props })
+ * // Basic usage
+ * const Button = Component((props) => {
+ *   return Node('button', {
+ *     ...props,
+ *     theme: { color: 'blue' }
+ *   })
  * })
- */export function Component(a){return function(b){var d=a(b);return d instanceof BaseNode?d.render():d}}
+ */export function Component(a){// Create wrapper component that handles theme and rendering
+return function(){var b=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},c=a(_objectSpread({},b));// Execute wrapped component
+// Handle BaseNode results - requires special processing
+if(c instanceof BaseNode){var d,e;// Theme merging: Check if we need to handle theme inheritance
+if(!!(null!==b&&void 0!==b&&b.theme||null!==b&&void 0!==b&&b.nodeTheme)||!!(null!==(d=c.rawProps)&&void 0!==d&&d.theme||null!==(e=c.rawProps)&&void 0!==e&&e.nodeTheme)){var f,g;return new BaseNode(c.element,_objectSpread(_objectSpread({},c.rawProps),{},{// Theme priority: props.theme > rawProps.theme > rawProps.nodeTheme
+nodeTheme:(null===b||void 0===b?void 0:b.theme)||(null===(f=c.rawProps)||void 0===f?void 0:f.theme)||(null===(g=c.rawProps)||void 0===g?void 0:g.nodeTheme)})).render()}return c.render();// No theme to handle, just render
+}// Direct return for non-BaseNode results (standard React nodes)
+return c}}

package/dist/node.type.d.ts

@@ -1,5 +1,5 @@
-import type { Attributes as ReactAttributes, ComponentProps, CSSProperties, ReactNode, JSX, ElementType, ComponentType, JSXElementConstructor, ReactInstance } from 'react';
-export type NodeElement = ReactNode | ReactInstance | ElementType | ComponentType<any> | BaseNodeInstance<any> | ((props?: any) => ReactNode | Promise<ReactNode> | ReactInstance | BaseNodeInstance<any>);
+import type { Attributes as ReactAttributes, ComponentProps, CSSProperties, ReactNode, JSX, ElementType, ComponentType, JSXElementConstructor, Component } from 'react';
+export type NodeElement = ReactNode | Component<any, any> | ElementType | ComponentType<any> | BaseNodeInstance<any> | ((props?: any) => ReactNode | Promise<ReactNode> | Component<any> | BaseNodeInstance<any>);
 /**
  * Defines valid child types that can be passed to a node:
  * - ReactNode: Any valid React child (elements, strings, numbers, etc.)
@@ -7,7 +7,7 @@ export type NodeElement = ReactNode | ReactInstance | ElementType | ComponentTyp
  * - BaseNodeInstance: Other node instances in the tree
  * - Function: Lazy child evaluation, useful for conditional rendering and hooks
  */
-export type Children = ReactNode | ReactInstance | NodeElement | BaseNodeInstance<any>;
+export type Children = ReactNode | Component<any> | NodeElement | BaseNodeInstance<any>;
 /**
  * Forward declaration of the BaseNode interface to avoid circular dependencies.
  * Defines the core structure and capabilities of a BaseNode instance.

package/dist/node.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node.type.d.ts","sourceRoot":"","sources":["../src/node.type.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,UAAU,IAAI,eAAe,EAC7B,cAAc,EACd,aAAa,EACb,SAAS,EACT,GAAG,EACH,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACd,MAAM,OAAO,CAAA;AAEd,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,WAAW,GACX,aAAa,CAAC,GAAG,CAAC,GAClB,gBAAgB,CAAC,GAAG,CAAC,GACrB,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,aAAa,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAA;AAE7F;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAA;AAEtF;;;;GAIG;AACH,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACnE,gFAAgF;IAChF,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;IAEnB,uFAAuF;IACvF,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAA;IAEpC,uEAAuE;IACvE,MAAM,IAAI,SAAS,CAAA;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,WAAW,IAAI,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAC9E,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACxB,CAAC,SAAS,qBAAqB,CAAC,GAAG,CAAC,GAClC,cAAc,CAAC,CAAC,CAAC,GACjB,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEzB;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,GAAG,CAAC,CAAA;CACvJ;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG;IAChD,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAA;IAChC,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB,CAAA;AAED;;;;GAIG;AACH,KAAK,yBAAyB,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;CAAE,GAC7D,CAAC,SAAS,aAAa,GAAG,SAAS,GACjC,IAAI,GACJ,KAAK,GACP,KAAK,CAAA;AAET;;;;;;;GAOG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GACnF,eAAe,GACf,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,GAC/C,OAAO,CAAC,aAAa,CAAC,GACtB,MAAM,CAAC,GAAG;IACZ,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAA;IAChC,KAAK,CAAC,EAAE,KAAK,CAAA;CAEd,CAAA;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAEhG;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,WAAW;IAC1D,wDAAwD;IACxD,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAEjE,0DAA0D;IAC1D,WAAW,CAAC,EAAE,KAAK,CAAA;IAEnB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAA;CACrG"}
+{"version":3,"file":"node.type.d.ts","sourceRoot":"","sources":["../src/node.type.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meonode/ui",
   "description": "A structured approach to component composition with built-in theming, prop separation, and dynamic children handling.",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "main": "./dist/main.js",
   "types": "./dist/main.d.ts",