@meonode/ui 0.0.1-alpha.1

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2025 Ukasyah Rahmatullah Zada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,188 @@
+# @meonode/ui
+
+[![NPM version](https://img.shields.io/npm/v/@meonode/ui.svg?style=flat)](https://www.npmjs.com/package/@meonode/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+<!-- Add other badges as needed: build status, coverage, etc. -->
+
+`@meonode/ui` is a lightweight yet powerful utility for the programmatic creation and manipulation of React elements. It
+offers an enhanced, structured way to define components, manage props (separating CSS from DOM attributes), handle
+theming, and compose children *before* they are rendered by React. This provides greater control and flexibility,
+especially for dynamic UIs and design systems.
+
+---
+
+## Key Features
+
+* **Programmatic React Element Construction:** Create complex React element trees using a fluent and intuitive API.
+* **Advanced Prop Handling:** Automatically separates CSS style properties from other DOM attributes, simplifying
+  component logic.
+* **Integrated Theming System:** Pass theme objects down the tree and reference theme values (e.g.,
+  `theme.colors.primary`) directly in style properties.
+* **Flexible Children Management:** Supports various child types, including primitives, other `@meonode/ui` nodes,
+  standard React elements, and functions for dynamic rendering (function-as-child pattern).
+* **Type-Safe:** Written entirely in TypeScript, providing excellent autocompletion and compile-time safety.
+* **Seamless Integration:** Works with existing React components and fits naturally into any React workflow.
+* **`Component` HOC:** A higher-order component to easily wrap functions that return `@meonode/ui` instances, making
+  them standard React components.
+
+## Installation
+
+You'll also need `react` as a peer dependency.
+
+---
+
+## Core Concepts
+
+### `Node(element, props)`
+
+The primary factory function to create `@meonode/ui` instances (internally `BaseNode`).
+
+*   `element`: The React element type (e.g., `'div'`, `MyReactComponent`, another `Node` instance).
+*   `props`: An object containing properties for the element, including standard HTML attributes, event handlers, `children`, `theme`, and direct CSS style properties.
+
+### `BaseNode`
+
+The internal representation of a React element within `@meonode/ui`. It holds the element type, processed props (with styles and DOM attributes separated), and processed children. You typically don't interact with `BaseNode` directly but through the `Node` factory. Each `BaseNode` instance has a `render()` method to convert it into a renderable React element.
+
+### `Component(componentFunction)`
+
+A Higher-Order Component (HOC) that wraps a function. This function receives props and should return either a `@meonode/ui` instance (created via `Node()`) or a standard `ReactNode`. The `Component` HOC ensures that if a `@meonode/ui` instance is returned, its `render()` method is called, making it renderable by React.
+
+### Theming
+
+Pass a `theme` object via the `theme` prop to any `Node`. This theme becomes available to that `Node` and its descendants. Style properties can then reference theme values using a dot-path string:
+
+---
+
+## Usage Examples
+
+### 1. Basic Usage with `Node()`
+
+### 2. Applying Styles Directly root Prop
+
+`@meonode/ui` intelligently separates CSS properties from other props. You can provide CSS properties directly at the root of the `props` object.
+
+
+### 3. Using Themes
+
+Themes allow for centralized styling and easy reuse of design tokens.
+
+### 4. Handling Children
+
+`@meonode/ui` offers flexible ways to define children:
+
+**Note on Function Children and Themes:** When a function child returns a `BaseNode` instance (e.g., `() => Node(...)`), `@meonode/ui` ensures that the parent's theme is propagated to this returned `BaseNode` if it doesn't already have its own theme. This allows `BaseNode`s created within the function to resolve theme-based styles like `color: 'theme.colors.highlight'`.
+
+### 5. Creating Reusable Components with `Component` HOC
+
+The `Component` HOC simplifies creating standard React components from functions that return `@meonode/ui` nodes.
+
+### 6. Using with Existing React Components
+
+You can easily incorporate existing React components into your `@meonode/ui` structures.
+
+---
+
+## Usage Implementation
+
+The example implementation can be seen in the docs folder:
+1. [Basic Usage](./docs/basic-usage.md)
+2. [Conditional Component With Hook](./docs/conditional-component-with-hook.md)
+
+---
+
+## API Overview
+
+### `Node<E extends NodeElement>(element: E, props: Partial<NodeProps<E>> = {}): BaseNodeInstance<E>`
+
+*   The main factory function to create `BaseNode` instances.
+*   `element`: A string (e.g., 'div'), a React component, or another `BaseNodeInstance`.
+*   `props`: Object containing element properties, styles, `children`, and `theme`.
+*   Returns: A `BaseNodeInstance`. Call `.render()` on it to get a renderable React element.
+
+### `Component<T extends Record<string, any>>(component: (props: T) => BaseNodeInstance<any> | ReactNode): (props: T) => ReactNode`
+
+*   A Higher-Order Component.
+*   `component`: A function that accepts props and returns a `BaseNodeInstance` or any `ReactNode`.
+*   Returns: A standard React functional component.
+
+### `BaseNodeInstance.render(): ReactNode`
+
+*   A method on `BaseNodeInstance` (the object returned by `Node()`).
+*   Converts the internal `BaseNode` representation into a standard, renderable React Node tree using `React.createElement`.
+
+---
+
+## How It Works (Briefly)
+
+1. **Node Creation:**
+  - When you call `Node(element, props)`, a `BaseNode` instance is created.
+
+2. **Props Processing:**
+  - The `BaseNode` constructor analyzes the `props`
+  - It uses helper functions (`getCSSProps`, `getDOMProps`) to separate valid CSS style properties from other DOM
+    attributes
+  - If a `theme` (or `nodeTheme`) is provided, style values like `'theme.colors.primary'` are resolved against this
+    theme object using `getValueByPath`
+
+3. **Children Processing:**
+  - Children are recursively processed
+  - If a child is a primitive, React element, or another `BaseNode`, it's adapted
+  - Function children are wrapped in a special internal `_functionRenderer` `BaseNode`. This renderer calls the function
+    during the render phase and ensures that if the function returns a `BaseNode`, the parent's theme is correctly
+    propagated to it
+
+4. **Rendering:**
+  - The `render()` method on a `BaseNode` instance recursively traverses its structure
+  - Calls `render()` on any child `BaseNode`s
+  - Ultimately uses `React.createElement` to construct the final tree of React elements
+  - The `nodeTheme` prop is removed before passing props to `createElement`
+
+---
+
+## TypeScript Support
+
+`@meonode/ui` is written in TypeScript and exports all necessary types for a robust development experience. You'll get autocompletion for props, style properties, and theme usage.
+
+Key types like `NodeElement`, `NodeProps`, and `BaseNodeInstance` are available if you need to work with them directly, though typically `Node` and `Component` are sufficient.
+
+---
+
+## When to Use `@meonode/ui`?
+
+* Perfect for design systems and UI libraries requiring consistent structure, theming, and maintainable patterns
+* Ideal for generating dynamic UIs from configurations, metadata, schemas or API responses
+* Powerful solution for centralized styling logic, prop transformations and runtime customization
+* Excellent choice for complex component hierarchies needing programmatic manipulation
+* Great alternative to JSX when you prefer a more functional programming approach
+
+---
+
+## Contributing
+
+Contributions are welcome! Please feel free to contact me on discord: **[l7aromeo](https://discordapp.com/users/704803255561224264)**.
+
+---
+
+## [License](./LICENSE)
+
+The MIT License (MIT)
+Copyright (c) 2025 Ukasyah Rahmatullah Zada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/core.node.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { BaseNodeInstance, NodeElement, NodeProps } from './node.type.ts';
+/**
+ * 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 default 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 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
+ * @example
+ * const MyComponent = Component((props) => {
+ *   return Node('div', { ...props })
+ * })
+ */
+export declare function Component<T extends Record<string, any>>(component: (props: T) => BaseNodeInstance<any> | ReactNode): (props: T) => string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | BaseNodeInstance<any> | null | undefined;
+//# sourceMappingURL=core.node.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"AACA,OAAO,EAAkF,SAAS,EAAE,MAAM,OAAO,CAAA;AACjH,OAAO,EACL,gBAAgB,EAIhB,WAAW,EACX,SAAS,EAIV,MAAM,mBAAmB,CAAA;AAkS1B;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,GAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAStH;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,wZAOjB"}

package/dist/core.node.js

@@ -0,0 +1,105 @@
+"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{createElement,isValidElement}from"react";import{getComponentType,getCSSProps,getDOMProps,getElementTypeName,getValueByPath}from"./node.helper.ts";import{isForwardRef,isMemo,isReactClassComponent,isValidElementType}from"./react-is.helper.ts";/**
+ * 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. *//**
+   * 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.initialRawProps=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 rawChildren 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._processRawChild(a,f,b)}// Pass index for array children
+)}else// For a single child, no index is passed; existing key logic in _processRawChild will apply
+k=this._processRawChild(e,f);// 3. Construct final this.props
+this.props=_objectSpread(_objectSpread({},j),{},{style:i,nodeTheme:f,children:k})}/**
+   * 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
+// 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}/**
+   * 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`).
+   * It ensures that if the returned value is a `BaseNode` instance without an explicit theme,
+   * the theme from the parent is injected. Otherwise, the result is rendered as-is.
+   * @param props The props for the renderer.
+   * @param props.render The function to invoke for rendering the child.
+   * @param props.passedTheme The theme to provide to the child, if applicable.
+   * @returns The rendered ReactNode, with theme applied if necessary.
+   */},{key:"_functionRenderer",value:function _functionRenderer(a){var b=a.render,c=a.passedTheme,d=a.passedKey,e=b();// Call the user-provided render function to get the child.
+if(e instanceof BaseNode){var f,g=e;// 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===(f=g.initialRawProps)||void 0===f?void 0:f.nodeTheme)&&void 0!==c?new BaseNode(g.element,_objectSpread(_objectSpread({},g.initialRawProps||{}),{},{nodeTheme:c,theme:c,// Also pass theme for consistency if it was used in initialRawProps
+key:d})).render():g.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.
+// Note: Non-BaseNode results will not automatically receive the theme.
+return e}/**
+   * Processes a single raw child element, converting it into a ProcessedChild.
+   * If the child is part of an array and lacks an explicit key, a stable indexed key
+   * (`elementName_child_index`) is generated for new BaseNode instances.
+   * @param rawChild The raw child element to process.
+   * @param parentTheme The theme inherited from the parent node.
+   * @param childIndex Optional index of the child if it's part of an array.
+   * @returns The processed child.
+   */},{key:"_processRawChild",value:function _processRawChild(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,"_child_").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.
+// Case 1: Child is already a BaseNode instance
+if(a instanceof BaseNode||"object"===_typeof(a)&&null!==a&&!0===a._isBaseNode){var f=a,g=f.initialRawProps||{},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("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,{render:a,passedTheme:b,key:j})}// Case 4: Child is a React Element (JSX element)
+if(isValidElement(a)){// Extract props from the JSX element
+var k=a.props,l=(null===k||void 0===k?void 0:k.nodeTheme)||b,m=e(a.type,a.key);// Prefer nodeTheme from child's props, fallback to parent theme
+// Generate a stable key based on element type and index if needed
+// Remove original key since we'll be using the generated/existing key
+// Create new BaseNode with props from JSX element
+return delete k.key,new BaseNode(a.type,_objectSpread(_objectSpread({},k),{},{nodeTheme:l,key:m}))}// 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 rawChild itself.
+var n=e(a,void 0);return new BaseNode(a,{nodeTheme:b,key:n})}// Case 6: 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.
+return a}/**
+   * 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)
+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
+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 default 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.
+// We can keep `theme` in initialRawProps 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 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
+ * @example
+ * const MyComponent = Component((props) => {
+ *   return Node('div', { ...props })
+ * })
+ */export function Component(a){return function(b){var d=a(b);return d instanceof BaseNode||"object"===_typeof(d)&&null!==d&&!0===d._isBaseNode?d.render():d}}