docs: update README file

Author: nousantx

README.md

@@ -27,7 +27,7 @@ const { AnyFrame, defineConfig } = __anyframe_core__
 const ui = new AnyFrame({
   tabSize: 2,
   showLayerModifier: false,
-  layerOrder: ['base', 'theme', 'components', 'utilities'],
+  layerOrder: ['theme', 'base', 'components', 'utilities'],
   // main tenoxui configuration, applied for all layers
   // see: https://github.com/tenoxui/tenoxui/tree/main/packages/%40tenoxui-static
   property: {},
@@ -40,8 +40,7 @@ const ui = new AnyFrame({
   // custom tenoxui configuration for different layers
   base: {},
   theme: {},
-  components: {},
-  utilities: {}
+  components: {}
 })
 ```
 
@@ -55,7 +54,65 @@ const ui = new AnyFrame({
 
 Note: You can checkout [TenoxUI Static Repository](https://github.com/tenoxui/tenoxui/tree/main/packages/%40tenoxui-static) for `property` `values`, `classes`, `breakpoints`, `aliases`, `reserveClass`, and `apply` options.
 
-## Example
+## API
+
+### `addLayer`, `removeLayer`, `setLayerOrder`
+
+```typescript
+addLayer(layer: string) {}
+removeLayer(layer: string) {}
+setLayerOrder(layers: string[]) {}
+```
+
+As its name, you can add, remove layer, and set new layer order. Example :
+
+```javascript
+const ui = new AnyFrame()
+console.log(ui.layerOrder) // => theme, base, components, utilities
+
+ui.addLayer('custom').addLayer('remove-later')
+console.log(ui.layerOrder) // => theme, base, components, utilities, custom, remove-later
+
+//! Note that you can't remove 4 main layers; base theme, components, and utilities
+ui.removeLayer('remove-later')
+console.log(ui.layerOrder) // => theme, base, components, utilities, custom
+
+ui.setLayerOrder(['utilities', 'theme', 'custom', 'components', 'base'])
+console.log(ui.layerOrder) // => utilities, theme, custom, components, base
+```
+
+### `AnyFrame.addStyle`
+
+```typescript
+addStyle(layer: string, config: TenoxUIConfig) {}
+```
+
+Method to add custom config for exact layer. Example :
+
+```javascript
+const ui = new AnyFrame({
+  /* global config, accessible for all layers */
+  property: {
+    m: 'margin'
+  }
+})
+
+ui.addStyle('base', {
+  /* only available for 'base' layer */
+  property: {
+    p: 'padding'
+  },
+  apply: {
+    '*': 'm-0 p-0 [box-sizing]-border-box'
+  }
+})
+
+console.log(ui.layers.get('base'))
+```
+
+### `AnyFrame.create`
+
+Method that return the all styles, from every layers. Example :
 
 ```javascript
 const ui = new AnyFrame({
@@ -77,30 +134,19 @@ console.log(ui.create(['bg-red', 'm-10px', '[m,p]-2rem', 'bg-[rgb(0_255_0)]']))
 
 Output:
 
-```css
-@layer base, theme, components, utilities;
+```
+@layer theme, base, components, utilities;
 @layer base {
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
+  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
 }
 @layer utilities {
-  .bg-red {
-    background: red;
-  }
-  .m-10px {
-    margin: 10px;
-  }
-  .\[m\,p\]-2rem {
-    margin: 2rem;
-    padding: 2rem;
-  }
-  .bg-\[rgb\(0_255_0\)\] {
-    background: rgb(0 255 0);
-  }
+  .bg-red { background: red }
+  .m-10px { margin: 10px }
+  .\[m\,p\]-2rem { margin: 2rem; padding: 2rem }
+  .bg-\[rgb\(0_255_0\)\] { background: rgb(0 255 0) }
 }
 ```
+
+## License
+
+MIT