amateras 0.2.0 → 0.4.0

package/README.md

@@ -23,7 +23,9 @@ const paragraphStyle = $.css({
 
 $('p').css(paragraphStyle).content([
     'Amateras is a ', 
-    $('span').css({ color: 'blue', fontWeight: 700 }).content('DOM Utility Library.')
+    $('span')
+        .css({ color: 'blue', fontWeight: 700 })
+        .content('DOM Utility Library.')
 ])
 ```
 
@@ -34,7 +36,8 @@ import 'amateras';
 const count$ = $.signal(0);
 
 $(document.body).content([
-    $('button').content('Click me')
+    $('button')
+        .content('Click me')
         .class('class1', 'class2')
         .on('click', () => count$(oldValue => oldValue + 1)),
     $('p').content($`Clicked ${count$} times.`)
@@ -43,7 +46,7 @@ $(document.body).content([
 
 ## State Management
 ```ts
-import 'amateras'
+import 'amateras';
 
 const count$ = $.signal(0);
 const doubleCount$ = $.compute(() => count() * 2);
@@ -56,6 +59,19 @@ $(document.body).content([
 ])
 ```
 
+## HTMLElement Methods Import
+```ts
+import 'amateras';
+import 'amateras/html';
+
+// without html package
+$('a').attr({ href: '/user' });
+$('img').attr({ src: '/profile.jpg' });
+// with html package
+$('a').href('/user');
+$('img').src('/profile.jpg');
+```
+
 ## Custom Components
 ```ts
 import 'amateras';
@@ -83,9 +99,11 @@ $(document.body).content([
 ```
 
 ## Packages
+The packages size result using Vite 7.0 with default bundle settings, polyfills code size included.
 | Package name | Size | Size(gzip) | Description |
 | --- | --- | --- | --- |
-| amateras | 5.50 kB | 2.26 kB | Core |
-| amateras/html | 0.97 kB | 0.26 kB | Import HTMLElement types and methods |
-| [amateras/css](./ext/css/README.md) | 3.45 kB | 1.29 kB | Style in JS |
-| [amateras/router](./ext/router/README.md) | 2.92 kB | 1.27 kB | Amateras Router |
+| amateras | 5.71 kB | 2.48 kB | Core |
+| amateras/html | 0.97 kB | 0.25 kB | Import HTMLElement types and methods |
+| [amateras/css](./ext/css/README.md) | 3.65 kB | 1.41 kB | Style in JS |
+| [amateras/router](./ext/router/README.md) | 3.74 kB | 1.69 kB | Amateras Router |
+| [amateras/i18n](./ext/i18n/README.md) | 1.49 kB | 0.57 kB | I18n translations |

package/ext/css/README.md

@@ -106,4 +106,23 @@ $(document.body).content([
     $('h1').class('title').content('A red color title.')
 ])
 
+```
+
+### CSS Colors Preset
+You can import colors preset from `amateras/color/COLOR_NAME` or `amateras/colors` path. These colors are reference from Tailwind colors, read the [documentation](https://tailwindcss.com/docs/colors) to know about the concepts.
+```ts
+// import black and white color preset
+import 'amateras/color/blackwhite';
+$.color.black; // '#000000'
+$.color.white; // '#ffffff'
+
+// import slate colors preset
+import 'amateras/color/slate';
+$.color.slate[100]; // '#f1f5f9'
+$.color.slate[200]; // '#e2e8f0'
+
+// import all colors preset
+import 'amateras/colors';
+$.color.red[600]; // '#dc2626'
+$.color.zinc[500]; // '#71717a'
 ```