@meonode/ui 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +40 -26
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [0.3.1] - 2025-09-26
9
+
10
+ ### Docs
11
+
12
+ - **docs(readme):** update readme with new theme system
13
+
8
14
  ## [0.3.0] - 2025-09-26
9
15
 
10
16
  ### Added
package/README.md CHANGED
@@ -15,38 +15,51 @@ npm install @meonode/ui react
15
15
  ```
16
16
 
17
17
  ```typescript
18
- import { Component, Root, Center, Column, H1, Button } from '@meonode/ui';
18
+ import {
19
+ Component,
20
+ ThemeProvider,
21
+ Div,
22
+ Center,
23
+ Column,
24
+ H1,
25
+ Button,
26
+ } from "@meonode/ui";
19
27
 
20
28
  const theme = {
21
- primary: { default: '#FF6B6B', content: '#4A0000' },
22
- base: { default: '#F8F8F8', content: '#333333' }
29
+ mode: "light",
30
+ system: {
31
+ primary: { default: '#FF6B6B', content: '#4A0000' },
32
+ base: { default: '#F8F8F8', content: '#333333' },
33
+ }
23
34
  };
24
35
 
25
36
  const App = Component(() =>
26
- Root({
37
+ ThemeProvider({
27
38
  theme,
28
- backgroundColor: 'theme.base.default',
29
- children: Center({
30
- padding: 40,
31
- children: Column({
32
- gap: 24,
33
- textAlign: 'center',
34
- children: [
35
- H1('Welcome to MeoNode', {
36
- fontSize: '3rem',
37
- color: 'theme.primary.default'
38
- }),
39
- Button('Get Started', {
40
- backgroundColor: 'theme.primary.default',
41
- color: 'theme.primary.content',
42
- padding: '12px 24px',
43
- borderRadius: 8,
44
- cursor: 'pointer',
45
- onClick: () => alert('Hello MeoNode!')
46
- })
47
- ]
48
- })
49
- })
39
+ children: Div({
40
+ backgroundColor: "theme.base.default",
41
+ children: Center({
42
+ padding: 40,
43
+ children: Column({
44
+ gap: 24,
45
+ textAlign: "center",
46
+ children: [
47
+ H1("Welcome to MeoNode", {
48
+ fontSize: "3rem",
49
+ color: "theme.primary.default",
50
+ }),
51
+ Button("Get Started", {
52
+ backgroundColor: "theme.primary.default",
53
+ color: "theme.primary.content",
54
+ padding: "12px 24px",
55
+ borderRadius: 8,
56
+ cursor: "pointer",
57
+ onClick: () => alert("Hello MeoNode!"),
58
+ }),
59
+ ],
60
+ }),
61
+ }),
62
+ }),
50
63
  })
51
64
  );
52
65
  ```
@@ -54,6 +67,7 @@ const App = Component(() =>
54
67
  ## Key Features
55
68
 
56
69
  - **Function-based components** - No JSX required, pure TypeScript functions
70
+ - **Built-in Theming System** - Use `ThemeProvider` to propagate theme through your app.
57
71
  - **Theme-aware styling** - Direct CSS props with automatic theme resolution
58
72
  - **Advanced CSS support** - Pseudo-classes, media queries, animations via `css` prop
59
73
  - **Portal system** - Context-aware modals and overlays
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@meonode/ui",
3
3
  "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.",
4
- "version": "0.3.0",
4
+ "version": "0.3.1",
5
5
  "type": "module",
6
6
  "main": "./dist/main.js",
7
7
  "types": "./dist/main.d.ts",