@meonode/ui 0.0.1-alpha.1

package/dist/main.d.ts

@@ -0,0 +1,5 @@
+export * from './core.node.ts';
+export * from './node.helper.ts';
+export * from './html.node.ts';
+export * from './node.type.ts';
+//# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA"}

package/dist/main.js

@@ -0,0 +1 @@
+export*from"./core.node.ts";export*from"./node.helper.ts";export*from"./html.node.ts";export*from"./node.type.ts";

package/dist/node.helper.d.ts

@@ -0,0 +1,71 @@
+import type { ComponentProps, CSSProperties, ElementType } from 'react';
+import type { NodeElement, OriginalNodeProps } from './node.type.ts';
+/**
+ * Returns a string describing the type of a given React component or element.
+ *
+ * Checks for common React types (class, forwardRef, memo, etc.) and returns a string
+ * such as 'class', 'forwardRef', 'memo', 'object-with-render', 'function', or other
+ * React-specific types. Falls back to `typeof` or 'unknown' if not recognized.
+ * @param component The React component, element type, or element-like object to check.
+ * @returns A string describing the component type.
+ * @example
+ * getComponentType(class extends React.Component {}) // 'class'
+ * getComponentType(React.forwardRef(() => <div/>)) // 'forwardRef'
+ * getComponentType(React.memo(() => <div/>)) // 'memo'
+ * getComponentType(() => <div/>) // 'function'
+ */
+export declare const getComponentType: (component?: NodeElement) => "class" | "forwardRef" | "memo" | "object" | "object-with-render" | "function" | "fragment" | "portal" | "profiler" | "strict-mode" | "suspense" | "suspense-list" | "context-consumer" | "context-provider" | "lazy" | "element" | "unknown" | string;
+/**
+ * Generates a string name for an ElementType.
+ *
+ * This function attempts to extract a meaningful name from a React ElementType,
+ * which can be a string (for intrinsic elements like 'div'), a function (for
+ * functional components), or an object (for components created with `React.memo`,
+ * `React.forwardRef`, etc.). It prioritizes `displayName` and `name` properties
+ * for functions and unwraps higher-order components to get the underlying name.
+ *
+ * If a name cannot be determined, it returns 'UnknownElementType'.
+ * @typeParam ElementType - The type of the React element.
+ * @param elementType The ElementType (e.g., 'div', MyComponent function/class).
+ * @returns A string representation of the element type.
+ */
+export declare function getElementTypeName(elementType: NodeElement): string;
+/**
+ * Filters an object to only include valid CSS properties
+ * @param props The object containing potential CSS properties
+ * @returns An object containing only valid CSS properties
+ * @example
+ * ```ts
+ * getCSSProps({
+ *   backgroundColor: 'red',
+ *   invalid: true
+ * }) // { backgroundColor: 'red' }
+ * ```
+ */
+export declare function getCSSProps<T extends Record<string, any>>(props: T): Partial<CSSProperties>;
+/**
+ * Filters component props to include only valid DOM properties and attributes.
+ *
+ * This function iterates through the provided props and retains only those that
+ * are not CSS properties (as determined by `cssPropertySet`). This is useful for
+ * separating style-related props from standard DOM attributes when rendering
+ * elements.
+ * @ty E - The type of the React element.
+ * @typeParam T - The type of the component props.
+ * @param props The component props to filter.
+ * @returns An object containing only valid DOM props.
+ */
+export declare function getDOMProps<E extends ElementType, T extends ComponentProps<E>>(props: T): Partial<OriginalNodeProps>;
+/**
+ * Retrieves a deeply nested value from an object using a dot-separated string path.
+ *
+ * This function traverses an object based on the provided path, which is a
+ * string of keys separated by dots. It returns the value found at the end of
+ * the path or `undefined` if any key in the path is not found or if the object
+ * is nullish at any point during traversal.
+ * @param obj The object to traverse. Defaults to an empty object if not provided.
+ * @param path The dot-separated path string (e.g., 'background.primary').
+ * @returns The value at the specified path, or undefined if not found.
+ */
+export declare function getValueByPath(obj: Record<string, any> | undefined, path: string): any;
+//# sourceMappingURL=node.helper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"node.helper.d.ts","sourceRoot":"","sources":["../src/node.helper.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAwBvE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,gBAAgB,GAC3B,YAAY,WAAW,KAErB,OAAO,GACP,YAAY,GACZ,MAAM,GACN,QAAQ,GACR,oBAAoB,GACpB,UAAU,GACV,UAAU,GACV,QAAQ,GACR,UAAU,GACV,aAAa,GACb,UAAU,GACV,eAAe,GACf,kBAAkB,GAClB,kBAAkB,GAClB,MAAM,GACN,SAAS,GACT,SAAS,GACT,MAgBH,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,WAAW,GAAG,MAAM,CAiCnE;AAwBD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,OAAO,CAAC,aAAa,CAAC,CAU3F;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAUpH;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,YAAK,EAAE,IAAI,EAAE,MAAM,GAAG,GAAG,CAE/E"}

package/dist/node.helper.js

@@ -0,0 +1,76 @@
+"use strict";var _process$versions,_import$meta$resolve,_import$meta$resolve2,_import$meta;function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(b,c){if(b){if("string"==typeof b)return _arrayLikeToArray(b,c);var a={}.toString.call(b).slice(8,-1);return"Object"===a&&b.constructor&&(a=b.constructor.name),"Map"===a||"Set"===a?Array.from(b):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(b,c):void 0}}function _arrayLikeToArray(b,c){(null==c||c>b.length)&&(c=b.length);for(var d=0,f=Array(c);d<c;d++)f[d]=b[d];return f}function _iterableToArrayLimit(b,c){var d=null==b?null:"undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(null!=d){var g,h,j,k,l=[],a=!0,m=!1;try{if(j=(d=d.call(b)).next,0===c){if(Object(d)!==d)return;a=!1}else for(;!(a=(g=j.call(d)).done)&&(l.push(g.value),l.length!==c);a=!0);}catch(a){m=!0,h=a}finally{try{if(!a&&null!=d["return"]&&(k=d["return"](),Object(k)!==k))return}finally{if(m)throw h}}return l}}function _arrayWithHoles(a){if(Array.isArray(a))return a}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)}var cssPropertiesJson=await("object"===("undefined"==typeof process?"undefined":_typeof(process))&&null!==(_process$versions=process.versions)&&void 0!==_process$versions&&_process$versions.node?Promise.all([import("fs"),import("module")]).then(function(a){var b=_slicedToArray(a,2),c=b[0],d=b[1];return new Promise(function(b){return function(a,f){return c.readFile(b,function(b,c){return b?f(b):a(c)})}}(d.createRequire(import.meta.url).resolve("./json/css-properties.json")))}).then(JSON.parse):fetch(null!==(_import$meta$resolve=null===(_import$meta$resolve2=(_import$meta=import.meta).resolve)||void 0===_import$meta$resolve2?void 0:_import$meta$resolve2.call(_import$meta,"./json/css-properties.json"))&&void 0!==_import$meta$resolve?_import$meta$resolve:new URL("./json/css-properties.json",import.meta.url)).then(function(a){return a.json()}));import{isContextConsumer,isContextProvider,isElement,isForwardRef,isFragment,isLazy,isMemo,isPortal,isProfiler,isReactClassComponent,isStrictMode,isSuspense,isSuspenseList}from"./react-is.helper.ts";/**
+ * The list of CSS property names imported from the JSON file.
+ * Used for validation and filtering of CSS-related props.
+ */var cssProperties=cssPropertiesJson.properties;/**
+ * Returns a string describing the type of a given React component or element.
+ *
+ * Checks for common React types (class, forwardRef, memo, etc.) and returns a string
+ * such as 'class', 'forwardRef', 'memo', 'object-with-render', 'function', or other
+ * React-specific types. Falls back to `typeof` or 'unknown' if not recognized.
+ * @param component The React component, element type, or element-like object to check.
+ * @returns A string describing the component type.
+ * @example
+ * getComponentType(class extends React.Component {}) // 'class'
+ * getComponentType(React.forwardRef(() => <div/>)) // 'forwardRef'
+ * getComponentType(React.memo(() => <div/>)) // 'memo'
+ * getComponentType(() => <div/>) // 'function'
+ */export var getComponentType=function getComponentType(a){return isForwardRef(a)?"forwardRef":isMemo(a)?"memo":isFragment(a)?"fragment":isPortal(a)?"portal":isProfiler(a)?"profiler":isStrictMode(a)?"strict-mode":isSuspense(a)?"suspense":isSuspenseList(a)?"suspense-list":isContextConsumer(a)?"context-consumer":isContextProvider(a)?"context-provider":isLazy(a)?"lazy":isElement(a)?"element":isReactClassComponent(a)?"class":_typeof(a)};/**
+ * Generates a string name for an ElementType.
+ *
+ * This function attempts to extract a meaningful name from a React ElementType,
+ * which can be a string (for intrinsic elements like 'div'), a function (for
+ * functional components), or an object (for components created with `React.memo`,
+ * `React.forwardRef`, etc.). It prioritizes `displayName` and `name` properties
+ * for functions and unwraps higher-order components to get the underlying name.
+ *
+ * If a name cannot be determined, it returns 'UnknownElementType'.
+ * @typeParam ElementType - The type of the React element.
+ * @param elementType The ElementType (e.g., 'div', MyComponent function/class).
+ * @returns A string representation of the element type.
+ */export function getElementTypeName(a){var b;switch(!0){case"string"==typeof a:return a;case"function"==typeof a&&"displayName"in a:return a.displayName||a.name||"AnonymousComponent";case"object"===_typeof(a)&&null!==a:{if(a.displayName)return a.displayName;var c=a.type||a.render;switch(!0){case"function"==typeof c:return c.displayName||c.name||"WrappedComponent";case"string"==typeof c:return c;case"function"==typeof a.render&&(null===(b=a.prototype)||void 0===b?void 0:b.isReactComponent):return a.name||"ClassComponent";default:return"ObjectComponent"}}default:return"UnknownElementType"}}/**
+ * Converts kebab-case CSS property names to camelCase, preserving CSS custom properties.
+ * Converts kebab-case CSS property names to their camelCase equivalents
+ * Preserves CSS custom properties that start with --
+ * @param prop The CSS property name to convert
+ * @returns The camelCase property name
+ * @example
+ * ```ts
+ * toCamelCase('background-color') // 'backgroundColor'
+ * toCamelCase('--custom-prop') // '--custom-prop'
+ * ```
+ */var toCamelCase=function toCamelCase(a){return a.startsWith("--")?a:a.replace(/-([a-z])/g,function(a,b){return b.toUpperCase()});// Preserve CSS variables
+},cssPropertySet=new Set(cssProperties.map(toCamelCase));/**
+ * A set of valid CSS property names in camelCase, used for validation.
+ *//**
+ * Filters an object to only include valid CSS properties
+ * @param props The object containing potential CSS properties
+ * @returns An object containing only valid CSS properties
+ * @example
+ * ```ts
+ * getCSSProps({
+ *   backgroundColor: 'red',
+ *   invalid: true
+ * }) // { backgroundColor: 'red' }
+ * ```
+ */export function getCSSProps(a){var b={};for(var c in a)cssPropertySet.has(c)&&(b[c]=a[c]);return b}/**
+ * Filters component props to include only valid DOM properties and attributes.
+ *
+ * This function iterates through the provided props and retains only those that
+ * are not CSS properties (as determined by `cssPropertySet`). This is useful for
+ * separating style-related props from standard DOM attributes when rendering
+ * elements.
+ * @ty E - The type of the React element.
+ * @typeParam T - The type of the component props.
+ * @param props The component props to filter.
+ * @returns An object containing only valid DOM props.
+ */export function getDOMProps(a){var b={};for(var c in a)cssPropertySet.has(c)||(b[c]=a[c]);return b}/**
+ * Retrieves a deeply nested value from an object using a dot-separated string path.
+ *
+ * This function traverses an object based on the provided path, which is a
+ * string of keys separated by dots. It returns the value found at the end of
+ * the path or `undefined` if any key in the path is not found or if the object
+ * is nullish at any point during traversal.
+ * @param obj The object to traverse. Defaults to an empty object if not provided.
+ * @param path The dot-separated path string (e.g., 'background.primary').
+ * @returns The value at the specified path, or undefined if not found.
+ */export function getValueByPath(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=1<arguments.length?arguments[1]:void 0;return b.split(".").reduce(function(a,b){return null===a||void 0===a?void 0:a[b]},a)}

package/dist/node.type.d.ts

@@ -0,0 +1,108 @@
+import type { Attributes as ReactAttributes, ComponentProps, CSSProperties, ReactNode, JSX, ElementType, ComponentType, JSXElementConstructor } from 'react';
+export type NodeElement = ReactNode | ElementType | ComponentType | BaseNodeInstance<any> | ((props?: any) => ReactNode | Promise<ReactNode> | BaseNodeInstance<any>);
+/**
+ * Defines valid child types that can be passed to a node:
+ * - ReactNode: Any valid React child (elements, strings, numbers, etc.)
+ * - ElementType: React component types (functions/classes)
+ * - BaseNodeInstance: Other node instances in the tree
+ * - Function: Lazy child evaluation, useful for conditional rendering and hooks
+ */
+export type Children = ReactNode | NodeElement | BaseNodeInstance<any>;
+/**
+ * Forward declaration of the BaseNode interface to avoid circular dependencies.
+ * Defines the core structure and capabilities of a BaseNode instance.
+ * @template T - The type of React element/component that this node represents
+ */
+export interface BaseNodeInstance<T extends NodeElement = NodeElement> {
+    /** The underlying React element or component type that this node will render */
+    readonly element: T;
+    /** Original props passed during node construction, preserved for cloning/recreation */
+    readonly initialRawProps?: BaseNodeProps<T>;
+    /** Converts this node instance into a renderable React element/tree */
+    render(): ReactNode;
+}
+/**
+ * Extracts the props type from a given element type, handling both intrinsic (HTML) elements
+ * and custom React components.
+ * @template E - The element type to extract props from
+ */
+export type PropsOf<E extends NodeElement> = E extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[E] : E extends JSXElementConstructor<any> ? ComponentProps<E> : BaseNodeInstance<E>;
+/**
+ * Theme configuration object that can be passed through the node tree.
+ * Supports nested theme properties for complex styling systems:
+ * - Simple values (strings, numbers)
+ * - Nested theme objects with unlimited depth
+ * - Common CSS values and units
+ * - Custom theme variables and tokens
+ * Used for consistent styling and dynamic theme application.
+ */
+export interface Theme {
+    [key: string]: string | number | boolean | null | undefined | any | Theme | Record<string, Theme | string | number | boolean | null | undefined | any>;
+}
+/**
+ * Internal representation of processed children after BaseNode handles them.
+ * All dynamic/function children are converted to concrete nodes or React elements.
+ * Ensures consistent handling of children during the render phase.
+ */
+export type ProcessedChild = BaseNodeInstance | ReactNode;
+/**
+ * Internal props type used by BaseNode instances after initial processing.
+ * Ensures consistent prop shape throughout the node's lifecycle:
+ * - Normalizes style properties into a CSSProperties object
+ * - Processes children into known concrete types
+ * - Handles theme context propagation
+ * @template E - The element type these props apply to
+ */
+export type OriginalNodeProps = ReactAttributes & {
+    style?: CSSProperties;
+    children?: Children | Children[];
+    theme?: Theme;
+    nodeTheme?: Theme;
+};
+/**
+ * Helper type to determine if the props P have a 'style' property
+ * that is compatible with CSSProperties.
+ * @template P - The props object of a component (e.g., PropsOf<E>)
+ */
+type HasCSSCompatibleStyleProp<P> = P extends {
+    style?: infer S;
+} ? S extends CSSProperties | undefined ? true : false : false;
+/**
+ * Public API for node creation props, providing a flexible and type-safe interface:
+ * - Preserves original component props while allowing direct style properties (conditionally)
+ * - Supports both single and array children
+ * - Enables theme customization
+ * - Maintains React's key prop for reconciliation
+ * @template E - The element type these props apply to
+ */
+export type NodeProps<E extends NodeElement> = Omit<PropsOf<E>, 'style' | 'children'> & ReactAttributes & (HasCSSCompatibleStyleProp<PropsOf<E>> extends true ? Partial<CSSProperties> : object) & {
+    children?: Children | Children[];
+    theme?: Theme;
+};
+/**
+ * BaseNode's internal props type, extending NodeProps:
+ * - Makes all properties optional for flexible node creation
+ * - Adds nodeTheme for theme context handling
+ * - Used for both initial construction and internal state
+ * @template E - The element type these props apply to
+ */
+export type BaseNodeProps<E extends NodeElement> = Partial<NodeProps<E>> & {
+    nodeTheme?: Theme;
+};
+/**
+ * Props interface for the internal FunctionRenderer component.
+ * Handles dynamic function children within React's component lifecycle:
+ * - Ensures proper timing of function evaluation
+ * - Maintains theme context for rendered content
+ * - Enables hook usage in function children
+ */
+export interface FunctionRendererProps<E extends NodeElement> {
+    /** Function that returns the child content to render */
+    render: (props?: any) => BaseNodeInstance<E> | ReactNode;
+    /** Theme context to be applied to the rendered content */
+    passedTheme?: Theme;
+    /** Optional key prop to help React identify unique instances in lists */
+    passedKey?: string;
+}
+export {};
+//# sourceMappingURL=node.type.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"node.type.d.ts","sourceRoot":"","sources":["../src/node.type.ts"],"names":[],"mappings":"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"}

package/dist/node.type.js

@@ -0,0 +1 @@
+"use strict";export{};

package/dist/react-is.helper.d.ts

@@ -0,0 +1,139 @@
+/**
+ * Custom React Type Checker (TypeScript Version)
+ * Provides utilities for identifying and checking React component/element types.
+ * Inspired by react-is package but implemented in TypeScript with type safety.
+ */
+/**
+ * Symbol identifiers for React internal component types
+ * These are used to identify different kinds of React elements and components
+ */
+export declare const REACT_ELEMENT_TYPE: unique symbol;
+export declare const REACT_PORTAL_TYPE: unique symbol;
+export declare const REACT_FRAGMENT_TYPE: unique symbol;
+export declare const REACT_STRICT_MODE_TYPE: unique symbol;
+export declare const REACT_PROFILER_TYPE: unique symbol;
+export declare const REACT_PROVIDER_TYPE: unique symbol;
+export declare const REACT_CONSUMER_TYPE: unique symbol;
+export declare const REACT_CONTEXT_TYPE: unique symbol;
+export declare const REACT_FORWARD_REF_TYPE: unique symbol;
+export declare const REACT_SUSPENSE_TYPE: unique symbol;
+export declare const REACT_SUSPENSE_LIST_TYPE: unique symbol;
+export declare const REACT_MEMO_TYPE: unique symbol;
+export declare const REACT_LAZY_TYPE: unique symbol;
+export declare const REACT_VIEW_TRANSITION_TYPE: unique symbol;
+export declare const REACT_CLIENT_REFERENCE: unique symbol;
+/**
+ * Union type of all possible React internal type symbols.
+ * Used to strongly type return values from type checking functions.
+ */
+export type ReactTypeSymbols = typeof REACT_ELEMENT_TYPE | typeof REACT_PORTAL_TYPE | typeof REACT_FRAGMENT_TYPE | typeof REACT_STRICT_MODE_TYPE | typeof REACT_PROFILER_TYPE | typeof REACT_PROVIDER_TYPE | typeof REACT_CONSUMER_TYPE | typeof REACT_CONTEXT_TYPE | typeof REACT_FORWARD_REF_TYPE | typeof REACT_SUSPENSE_TYPE | typeof REACT_SUSPENSE_LIST_TYPE | typeof REACT_MEMO_TYPE | typeof REACT_LAZY_TYPE | typeof REACT_VIEW_TRANSITION_TYPE | typeof REACT_CLIENT_REFERENCE;
+/**
+ * Interface describing the minimal shape of a React element-like object.
+ * Used for type checking without coupling to React's internal element type.
+ */
+export interface ReactElementLike {
+    $$typeof?: symbol;
+    type?: any;
+    [key: string]: any;
+}
+/**
+ * Determines the internal React type of an object.
+ * Examines the object's $$typeof property and nested type properties
+ * to identify what kind of React element or component it represents.
+ * @param {unknown} object The object to check
+ * @returns {boolean} - The matching React type symbol or undefined if not a React object
+ */
+export declare function typeOf(object: unknown): ReactTypeSymbols | undefined;
+/**
+ * Checks if an object is a React Context Consumer
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a Context.Consumer
+ */
+export declare const isContextConsumer: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React Context Provider
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a Context.Provider
+ */
+export declare const isContextProvider: (object: unknown) => boolean;
+/**
+ * Checks if an object is a valid React element
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a React element
+ */
+export declare const isElement: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React forwardRef component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a forwardRef component
+ */
+export declare const isForwardRef: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React Fragment
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a Fragment
+ */
+export declare const isFragment: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React lazy component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a lazy component
+ */
+export declare const isLazy: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React memo component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a memo component
+ */
+export declare const isMemo: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React portal
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a portal
+ */
+export declare const isPortal: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React Profiler
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a Profiler
+ */
+export declare const isProfiler: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React StrictMode component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is StrictMode
+ */
+export declare const isStrictMode: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React Suspense component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is Suspense
+ */
+export declare const isSuspense: (object: unknown) => boolean;
+/**
+ * Checks if an object is a React SuspenseList component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if `object` is SuspenseList
+ */
+export declare const isSuspenseList: (object: unknown) => boolean;
+/**
+ * Checks if a type is a valid React element type that can be rendered.
+ * This includes strings (for DOM elements), functions (for components),
+ * and various React-specific types like Fragment, Context, etc.
+ * @param {any} type The type to validate
+ * @returns {boolean} - True if the type can be rendered as a React element
+ */
+export declare const isValidElementType: <T>(type: T) => boolean;
+/**
+ * Type guard that checks if a component is a React class component.
+ * Examines the component's prototype for the isReactComponent marker property
+ * that React adds to all class components.
+ * @param {unknown} component Component to check
+ * @returns {boolean} - True if component is a React class component
+ */
+export declare const isReactClassComponent: (component: unknown) => component is {
+    prototype: {
+        isReactComponent: any;
+    };
+};
+//# sourceMappingURL=react-is.helper.d.ts.map

package/dist/react-is.helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.helper.d.ts","sourceRoot":"","sources":["../src/react-is.helper.ts"],"names":[],"mappings":"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"}

package/dist/react-is.helper.js

@@ -0,0 +1,84 @@
+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)}/**
+ * Custom React Type Checker (TypeScript Version)
+ * Provides utilities for identifying and checking React component/element types.
+ * Inspired by react-is package but implemented in TypeScript with type safety.
+ *//**
+ * Symbol identifiers for React internal component types
+ * These are used to identify different kinds of React elements and components
+ */export var REACT_ELEMENT_TYPE=Symbol["for"]("react.transitional.element");export var REACT_PORTAL_TYPE=Symbol["for"]("react.portal");export var REACT_FRAGMENT_TYPE=Symbol["for"]("react.fragment");export var REACT_STRICT_MODE_TYPE=Symbol["for"]("react.strict_mode");export var REACT_PROFILER_TYPE=Symbol["for"]("react.profiler");export var REACT_PROVIDER_TYPE=Symbol["for"]("react.provider");export var REACT_CONSUMER_TYPE=Symbol["for"]("react.consumer");export var REACT_CONTEXT_TYPE=Symbol["for"]("react.context");export var REACT_FORWARD_REF_TYPE=Symbol["for"]("react.forward_ref");export var REACT_SUSPENSE_TYPE=Symbol["for"]("react.suspense");export var REACT_SUSPENSE_LIST_TYPE=Symbol["for"]("react.suspense_list");export var REACT_MEMO_TYPE=Symbol["for"]("react.memo");export var REACT_LAZY_TYPE=Symbol["for"]("react.lazy");export var REACT_VIEW_TRANSITION_TYPE=Symbol["for"]("react.view_transition");export var REACT_CLIENT_REFERENCE=Symbol["for"]("react.client.reference");/**
+ * Union type of all possible React internal type symbols.
+ * Used to strongly type return values from type checking functions.
+ *//**
+ * Interface describing the minimal shape of a React element-like object.
+ * Used for type checking without coupling to React's internal element type.
+ *//**
+ * Determines the internal React type of an object.
+ * Examines the object's $$typeof property and nested type properties
+ * to identify what kind of React element or component it represents.
+ * @param {unknown} object The object to check
+ * @returns {boolean} - The matching React type symbol or undefined if not a React object
+ */export function typeOf(a){if("object"===_typeof(a)&&null!==a){var b=a.$$typeof;switch(b){case REACT_ELEMENT_TYPE:{var c=a.type;switch(c){case REACT_FRAGMENT_TYPE:case REACT_PROFILER_TYPE:case REACT_STRICT_MODE_TYPE:case REACT_SUSPENSE_TYPE:case REACT_SUSPENSE_LIST_TYPE:case REACT_VIEW_TRANSITION_TYPE:return c;default:{var d=null===c||void 0===c?void 0:c.$$typeof;return d===REACT_CONTEXT_TYPE||d===REACT_FORWARD_REF_TYPE||d===REACT_LAZY_TYPE||d===REACT_MEMO_TYPE||d===REACT_CONSUMER_TYPE?d:b}}}case REACT_PORTAL_TYPE:return b}}}/**
+ * Checks if an object is a React Context Consumer
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a Context.Consumer
+ */export var isContextConsumer=function isContextConsumer(a){return typeOf(a)===REACT_CONSUMER_TYPE};/**
+ * Checks if an object is a React Context Provider
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a Context.Provider
+ */export var isContextProvider=function isContextProvider(a){return typeOf(a)===REACT_CONTEXT_TYPE};/**
+ * Checks if an object is a valid React element
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a React element
+ */export var isElement=function isElement(a){return"object"===_typeof(a)&&null!==a&&a.$$typeof===REACT_ELEMENT_TYPE};/**
+ * Checks if an object is a React forwardRef component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a forwardRef component
+ */export var isForwardRef=function isForwardRef(a){return typeOf(a)===REACT_FORWARD_REF_TYPE};/**
+ * Checks if an object is a React Fragment
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a Fragment
+ */export var isFragment=function isFragment(a){return typeOf(a)===REACT_FRAGMENT_TYPE};/**
+ * Checks if an object is a React lazy component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a lazy component
+ */export var isLazy=function isLazy(a){return typeOf(a)===REACT_LAZY_TYPE};/**
+ * Checks if an object is a React memo component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a memo component
+ */export var isMemo=function isMemo(a){return typeOf(a)===REACT_MEMO_TYPE};/**
+ * Checks if an object is a React portal
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a portal
+ */export var isPortal=function isPortal(a){return typeOf(a)===REACT_PORTAL_TYPE};/**
+ * Checks if an object is a React Profiler
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is a Profiler
+ */export var isProfiler=function isProfiler(a){return typeOf(a)===REACT_PROFILER_TYPE};/**
+ * Checks if an object is a React StrictMode component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is StrictMode
+ */export var isStrictMode=function isStrictMode(a){return typeOf(a)===REACT_STRICT_MODE_TYPE};/**
+ * Checks if an object is a React Suspense component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if object is Suspense
+ */export var isSuspense=function isSuspense(a){return typeOf(a)===REACT_SUSPENSE_TYPE};/**
+ * Checks if an object is a React SuspenseList component
+ * @param {unknown} object Object to check
+ * @returns {boolean} - True if `object` is SuspenseList
+ */export var isSuspenseList=function isSuspenseList(a){return typeOf(a)===REACT_SUSPENSE_LIST_TYPE};/**
+ * Set of known valid React special element types.
+ * Used for quick validation of element types in isValidElementType().
+ * Includes Fragment, Profiler, StrictMode, Suspense and SuspenseList.
+ */var knownValidSymbols=new Set([REACT_FRAGMENT_TYPE,REACT_PROFILER_TYPE,REACT_STRICT_MODE_TYPE,REACT_SUSPENSE_TYPE,REACT_SUSPENSE_LIST_TYPE]);/**
+ * Checks if a type is a valid React element type that can be rendered.
+ * This includes strings (for DOM elements), functions (for components),
+ * and various React-specific types like Fragment, Context, etc.
+ * @param {any} type The type to validate
+ * @returns {boolean} - True if the type can be rendered as a React element
+ */export var isValidElementType=function isValidElementType(a){if("string"==typeof a||"function"==typeof a)return!0;if(knownValidSymbols.has(a))return!0;if("object"===_typeof(a)&&null!==a){var b=a.$$typeof;return b===REACT_LAZY_TYPE||b===REACT_MEMO_TYPE||b===REACT_CONTEXT_TYPE||b===REACT_CONSUMER_TYPE||b===REACT_FORWARD_REF_TYPE||b===REACT_CLIENT_REFERENCE||"function"==typeof a.getModuleId}return!1};/**
+ * Type guard that checks if a component is a React class component.
+ * Examines the component's prototype for the isReactComponent marker property
+ * that React adds to all class components.
+ * @param {unknown} component Component to check
+ * @returns {boolean} - True if component is a React class component
+ */export var isReactClassComponent=function isReactClassComponent(a){return"function"==typeof a&&!!a.prototype&&!!a.prototype.isReactComponent};

package/docs/basic-usage.md

@@ -0,0 +1,66 @@
+```ts
+// Component wraps a React Server Component into a Client Component
+// Think of it like a factory that transforms JSX-like node definitions into actual React components
+import { Component } from '@src/lib/node/core.node'
+
+// These are layout/HTML helpers that render to real DOM elements (e.g., <div>, <img>, <p>)
+import { Column, Row, Div, Img, P } from '@src/lib/node/html.node'
+
+const theme = { background: { primary: 'red', secondary: 'blue' } }
+
+// This is the actual exported component
+export default Component(() => {
+  return Card({
+    title: 'Genshin Impact',
+    subtitle: 'Adventure awaits!',
+    imageUrl: 'https://upload-os-bbs.mihoyo.com/upload/2021/03/05/75387538/f37ce39baf72ffb84cb5c0040bdcbf10_2126420710320647353.jpg',
+  })
+})
+
+// This function returns a structured layout using html.node helpers only
+const Card = ({ title, subtitle, imageUrl }: { title: string; subtitle: string; imageUrl: string }) =>
+  Column({
+    theme,
+    // Column is just a <div> with `display: flex; flex-direction: column`
+    borderRadius: 10,
+    overflow: 'hidden',
+    border: '1px solid theme.background.primary', // Can use theme references
+    width: 300,
+    children: [
+      // Img translates to a real <img> tag
+      Img({
+        src: imageUrl,
+        width: '100%',
+        height: 180,
+        style: {
+          objectFit: 'cover', // Ensures the image fills the area without distortion
+        },
+      }),
+      // Div is a basic <div> wrapper
+      Div({
+        padding: 10,
+        backgroundColor: 'theme.background.secondary',
+        children: Column({
+          gap: 5,
+          children: [
+            // P maps directly to <p>, with styling
+            P({
+              style: {
+                fontSize: 18,
+                fontWeight: 600,
+              },
+              children: title,
+            }),
+            P({
+              style: {
+                fontSize: 14,
+                color: 'gray',
+              },
+              children: subtitle,
+            }),
+          ],
+        }),
+      }),
+    ],
+  })
+```