@meonode/ui 0.2.21 → 0.3.1

package/CHANGELOG.md

@@ -2,9 +2,69 @@
 
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachachangelog.com/en/1.0.0/),
+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.1] - 2025-09-26
+
+### Docs
+
+- **docs(readme):** update readme with new theme system
+
+## [0.3.0] - 2025-09-26
+
+### Added
+
+- **feat(theme):** use React Context for theme propagation
+
+### Refactor
+
+- **refactor(core):** remove unused _childrenHash property from Node class
+
+### Example
+
+- **feat(theme):** use React Context for theme propagation
+
+  **Before**:
+  ```typescript
+  import { Div } from '@meonode/ui';
+
+  const App = () => {
+    return Div({
+      theme: {
+        // theme object
+      },
+      children: 'Hello world!',
+    });
+  };
+  ```
+
+  **After**:
+  ```typescript
+  import { Div, ThemeProvider } from '@meonode/ui';
+
+  const App = () => {
+    return ThemeProvider({
+      theme: {
+        mode: 'light', // or 'dark' or any custom mode
+        system: {
+          base: {
+            default: '#ffffff',
+            content: '#000000',
+          }
+        }
+      },
+      children: [
+        Div({
+          backgroundColor: 'theme.base',
+          color: 'theme.content',
+          children: 'Hello world!',
+        }),
+      ],
+    });
+  };
+  ```
+
 ## [0.2.21] - 2025-09-23
 
 ### Refactor

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