@meonode/ui 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.2] - 2025-09-26
+
+### Fixed
+
+- **fix**: update import paths for Node component to improve module structure
+- **fix(theme-provider):** update type imports and enhance function return type for better clarity
+
+## [0.3.1] - 2025-09-26
+
+### Docs
+
+- **docs(readme):** update readme with new theme system
+
 ## [0.3.0] - 2025-09-26
 
 ### Added

package/README.md

@@ -15,38 +15,51 @@ npm install @meonode/ui react
 ```
 
 ```typescript
-import { Component, Root, Center, Column, H1, Button } from '@meonode/ui';
+import {
+  Component,
+  ThemeProvider,
+  Div,
+  Center,
+  Column,
+  H1,
+  Button,
+} from "@meonode/ui";
 
 const theme = {
-  primary: { default: '#FF6B6B', content: '#4A0000' },
-  base: { default: '#F8F8F8', content: '#333333' }
+  mode: "light",
+  system: {
+    primary: { default: '#FF6B6B', content: '#4A0000' },
+    base: { default: '#F8F8F8', content: '#333333' },
+  }
 };
 
 const App = Component(() =>
-  Root({
+  ThemeProvider({
     theme,
-    backgroundColor: 'theme.base.default',
-    children: Center({
-      padding: 40,
-      children: Column({
-        gap: 24,
-        textAlign: 'center',
-        children: [
-          H1('Welcome to MeoNode', {
-            fontSize: '3rem',
-            color: 'theme.primary.default'
-          }),
-          Button('Get Started', {
-            backgroundColor: 'theme.primary.default',
-            color: 'theme.primary.content',
-            padding: '12px 24px',
-            borderRadius: 8,
-            cursor: 'pointer',
-            onClick: () => alert('Hello MeoNode!')
-          })
-        ]
-      })
-    })
+    children: Div({
+      backgroundColor: "theme.base.default",
+      children: Center({
+        padding: 40,
+        children: Column({
+          gap: 24,
+          textAlign: "center",
+          children: [
+            H1("Welcome to MeoNode", {
+              fontSize: "3rem",
+              color: "theme.primary.default",
+            }),
+            Button("Get Started", {
+              backgroundColor: "theme.primary.default",
+              color: "theme.primary.content",
+              padding: "12px 24px",
+              borderRadius: 8,
+              cursor: "pointer",
+              onClick: () => alert("Hello MeoNode!"),
+            }),
+          ],
+        }),
+      }),
+    }),
   })
 );
 ```
@@ -54,6 +67,7 @@ const App = Component(() =>
 ## Key Features
 
 - **Function-based components** - No JSX required, pure TypeScript functions
+- **Built-in Theming System** - Use `ThemeProvider` to propagate theme through your app.
 - **Theme-aware styling** - Direct CSS props with automatic theme resolution
 - **Advanced CSS support** - Pseudo-classes, media queries, animations via `css` prop
 - **Portal system** - Context-aware modals and overlays

package/dist/components/theme-provider.client.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import type { Children, Theme } from '../node.type.js';
 export interface ThemeContextValue {
     theme: Theme;
@@ -9,13 +10,13 @@ export declare const ThemeContext: import("react").Context<ThemeContextValue | n
  * @param {object} props The props for the component.
  * @param {Children} [props.children] The children to render.
  * @param {Theme} props.theme The theme to provide.
- * @returns {React.ReactNode} The rendered component.
+ * @returns {ReactNode} The rendered component.
  * @private
  */
 export declare function _ThemeProvider({ children, theme }: {
     children?: Children;
     theme: Theme;
-}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+}): ReactNode;
 /**
  * A component that provides a theme to its children.
  */

package/dist/components/theme-provider.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.client.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider.client.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGxD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AAED,eAAO,MAAM,YAAY,mDAAgD,CAAA;AAEzE;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,8FAgBxF;AAED;;GAEG;AACH,eAAO,MAAM,aAAa;;CAA6B,CAAA"}
+{"version":3,"file":"theme-provider.client.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider.client.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAC/D,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGxD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AAED,eAAO,MAAM,YAAY,mDAAgD,CAAA;AAEzE;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,GAAG,SAAS,CAgBpG;AAED;;GAEG;AACH,eAAO,MAAM,aAAa;;CAA6B,CAAA"}

package/dist/components/theme-provider.client.js

@@ -1,9 +1,9 @@
-"use client";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}import{createContext,useState}from"react";import{createNode,Node}from"../main.js";export var ThemeContext=createContext(null);/**
+"use client";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}import{createContext,useState}from"react";import{createNode,Node}from"../core.node.js";export var ThemeContext=createContext(null);/**
  * The internal implementation of the ThemeProvider component.
  * @param {object} props The props for the component.
  * @param {Children} [props.children] The children to render.
  * @param {Theme} props.theme The theme to provide.
- * @returns {React.ReactNode} The rendered component.
+ * @returns {ReactNode} The rendered component.
  * @private
  */export function _ThemeProvider(a){var b=a.children,c=a.theme,d=useState(c),e=_slicedToArray(d,2),f=e[0],g=e[1];if(!c)throw new Error("`theme` prop must be defined");return Node(ThemeContext.Provider,{value:{theme:f,setTheme:function setTheme(a){document.cookie="theme=".concat(a.mode),g(a)}},children:b}).render()}/**
  * A component that provides a theme to its children.

package/dist/hook/usePortal.js

@@ -1 +1 @@
-"use client";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}import{useCallback,useEffect,useRef}from"react";import{Node}from"../main.js";export function usePortal(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],b=useRef({}),c=useCallback(function(a){return b.current.component=a,new Proxy(a,{apply:function apply(a,c,d){var e=_slicedToArray(d,1),f=e[0];return b.current.props=f,a.call(c,f)}})},[]);return useEffect(function(){var a=b.current,c=a.portal,d=a.component,e=a.props;c&&d&&c.update(Node(d,e))},a),useEffect(function(){return function(){var a;null===(a=b.current.portal)||void 0===a||a.unmount(),b.current.portal=void 0,b.current.component=void 0,b.current.props=void 0}},[]),{portal:b.current.portal,setPortal:function setPortal(a){return b.current.portal=a},createComponent:c}}
+"use client";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}import{useCallback,useEffect,useRef}from"react";import{Node}from"../core.node.js";export function usePortal(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],b=useRef({}),c=useCallback(function(a){return b.current.component=a,new Proxy(a,{apply:function apply(a,c,d){var e=_slicedToArray(d,1),f=e[0];return b.current.props=f,a.call(c,f)}})},[]);return useEffect(function(){var a=b.current,c=a.portal,d=a.component,e=a.props;c&&d&&c.update(Node(d,e))},a),useEffect(function(){return function(){var a;null===(a=b.current.portal)||void 0===a||a.unmount(),b.current.portal=void 0,b.current.component=void 0,b.current.props=void 0}},[]),{portal:b.current.portal,setPortal:function setPortal(a){return b.current.portal=a},createComponent:c}}

package/dist/nextjs-registry/index.js

@@ -1 +1 @@
-import _StyleRegistry from"../components/registry.client.js";import{Node}from"../main.js";export var StyleRegistry=function StyleRegistry(a){return Node(_StyleRegistry,a)};
+import _StyleRegistry from"../components/registry.client.js";import{Node}from"../core.node.js";export var StyleRegistry=function StyleRegistry(a){return Node(_StyleRegistry,a)};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meonode/ui",
   "description": "A structured approach to component composition, direct CSS-first prop styling, built-in theming, smart prop handling (including raw property pass-through), and dynamic children.",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "main": "./dist/main.js",
   "types": "./dist/main.d.ts",