native-document 1.0.130 → 1.0.131

package/dist/native-document.components.min.js

@@ -6,7 +6,7 @@ var NativeComponents = (function (exports) {
      * @class
      */
     function BaseComponent() {
-
+        this.$description = {};
     }
 
     Object.defineProperty( BaseComponent.prototype, 'nd', {
@@ -890,7 +890,7 @@ var NativeComponents = (function (exports) {
     VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
     VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
 
-    const Validator$1 = {
+    const Validator = {
         isObservable(value) {
             return  value?.__$isObservable;
         },
@@ -907,7 +907,7 @@ var NativeComponents = (function (exports) {
             return value?.__isProxy__
         },
         isObservableOrProxy(value) {
-            return Validator$1.isObservable(value) || Validator$1.isProxy(value);
+            return Validator.isObservable(value) || Validator.isProxy(value);
         },
         isAnchor(value) {
             return value?.__Anchor__
@@ -990,8 +990,8 @@ var NativeComponents = (function (exports) {
             if(!data) {
                 return false;
             }
-            return Validator$1.isObject(data)
-                && Object.values(data).some(value => Validator$1.isObservable(value));
+            return Validator.isObject(data)
+                && Object.values(data).some(value => Validator.isObservable(value));
         },
         /**
          * Check if the data contains an observable reference.
@@ -1219,7 +1219,7 @@ var NativeComponents = (function (exports) {
         }
 
         // Observables - keep the référence
-        if (Validator$1.isObservable(value)) {
+        if (Validator.isObservable(value)) {
             onObservableFound && onObservableFound(value);
             return value;
         }
@@ -1388,7 +1388,7 @@ var NativeComponents = (function (exports) {
      * @class ObservableItem
      */
     function ObservableItem(value, configs = null) {
-        value = Validator$1.isObservable(value) ? value.val() : value;
+        value = Validator.isObservable(value) ? value.val() : value;
 
         this.$previousValue = null;
         this.$currentValue = value;
@@ -1402,7 +1402,7 @@ var NativeComponents = (function (exports) {
         if(configs) {
             this.configs = configs;
             if(configs.reset) {
-                this.$initialValue = Validator$1.isObject(value) ? deepClone(value) : value;
+                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
             }
         }
     }
@@ -1611,7 +1611,7 @@ var NativeComponents = (function (exports) {
         if(!watchValueList) {
             watchValueList = callback;
             this.$watchers.set(value, callback);
-        } else if(!Validator$1.isArray(watchValueList.list)) {
+        } else if(!Validator.isArray(watchValueList.list)) {
             watchValueList = [watchValueList, callback];
             callback = (value) => {
                 for(let i = 0, length = watchValueList.length; i < length; i++) {
@@ -1723,7 +1723,7 @@ var NativeComponents = (function (exports) {
      */
     ObservableItem.prototype.get = function(key) {
         const item = this.$currentValue[key];
-        return Validator$1.isObservable(item) ? item.val() : item;
+        return Validator.isObservable(item) ? item.val() : item;
     };
 
     /**
@@ -1755,7 +1755,7 @@ var NativeComponents = (function (exports) {
      * a.equals(10); // false
      */
     ObservableItem.prototype.equals = function(other) {
-        if(Validator$1.isObservable(other)) {
+        if(Validator.isObservable(other)) {
             return this.$currentValue === other.$currentValue;
         }
         return this.$currentValue === other;
@@ -1800,7 +1800,7 @@ var NativeComponents = (function (exports) {
         if(!this.configs?.reset) {
             return;
         }
-        const resetValue = (Validator$1.isObject(this.$initialValue))
+        const resetValue = (Validator.isObject(this.$initialValue))
             ? deepClone(this.$initialValue, (observable) => {
                 observable.reset();
             })
@@ -2023,7 +2023,7 @@ var NativeComponents = (function (exports) {
     const bindBooleanAttribute = (element, attributeName, value) => {
         const isObservable = value.__$isObservable;
         const defaultValue = isObservable? value.val() : value;
-        if(Validator$1.isBoolean(defaultValue)) {
+        if(Validator.isBoolean(defaultValue)) {
             element[attributeName] = defaultValue;
         }
         else {
@@ -2334,7 +2334,7 @@ var NativeComponents = (function (exports) {
             if(child.toNdElement) {
                 do {
                     child =  child.toNdElement();
-                    if(Validator$1.isElement(child)) {
+                    if(Validator.isElement(child)) {
                         return child;
                     }
                 } while (child.toNdElement);
@@ -2413,7 +2413,7 @@ var NativeComponents = (function (exports) {
         anchor.getParent = () => parent;
 
         anchor.appendChild = (child) => {
-            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.appendChild(child);
         };
 
@@ -2422,7 +2422,7 @@ var NativeComponents = (function (exports) {
         anchor.appendRaw = anchor.appendChildRaw;
 
         anchor.insertAtStart = (child) => {
-            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
         };
         anchor.insertAtStartRaw = (child) => {
@@ -2436,7 +2436,7 @@ var NativeComponents = (function (exports) {
         };
 
         anchor.replaceContent = function(content) {
-            const child = Validator$1.isElement(content) ? content : ElementCreator.getChild(content);
+            const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
             parent.replaceChildren(child);
         };
 
@@ -2446,7 +2446,7 @@ var NativeComponents = (function (exports) {
         anchor.setContent = anchor.replaceContent;
 
         anchor.insertBefore = (child, anchor) => {
-            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.insertBefore(child, anchor);
         };
         anchor.insertBeforeRaw = (child, anchor) => {
@@ -2490,7 +2490,7 @@ var NativeComponents = (function (exports) {
             ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
         const insertBefore = function(parent, child, target) {
-            const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             insertBeforeRaw(parent, childElement, target);
         };
 
@@ -2540,7 +2540,7 @@ var NativeComponents = (function (exports) {
         anchorFragment.appendRaw = anchorFragment.appendChildRaw;
 
         anchorFragment.insertAtStart = function(child) {
-            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             anchorFragment.insertAtStartRaw(child);
         };
 
@@ -2596,7 +2596,7 @@ var NativeComponents = (function (exports) {
         };
 
         anchorFragment.replaceContent = function(child) {
-            const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             anchorFragment.replaceContentRaw(childElement);
         };
 
@@ -3211,7 +3211,7 @@ var NativeComponents = (function (exports) {
         return Observable$1.computed(() => {
             return value.replace(/\$\{(.*?)}/g, (match, key) => {
                 const data = args[key];
-                if(Validator$1.isObservable(data)) {
+                if(Validator.isObservable(data)) {
                     return data.val();
                 }
                 return data;
@@ -3220,11 +3220,11 @@ var NativeComponents = (function (exports) {
     };
 
     String.prototype.resolveObservableTemplate = function() {
-        if(!Validator$1.containsObservableReference(this)) {
+        if(!Validator.containsObservableReference(this)) {
             return this.valueOf();
         }
         return this.split(/(\{\{#ObItem::\([0-9]+\)\}\})/g).filter(Boolean).map((value) => {
-            if(!Validator$1.containsObservableReference(value)) {
+            if(!Validator.containsObservableReference(value)) {
                 return value;
             }
             const [_, id] = value.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);
@@ -3233,10 +3233,10 @@ var NativeComponents = (function (exports) {
     };
 
     function createMultiSourceFilter(sources, callbackFn){
-        const observables = sources.filter(Validator$1.isObservable);
+        const observables = sources.filter(Validator.isObservable);
 
         const getValues = () => sources.map(src =>
-            Validator$1.isObservable(src) ? src.val() : src
+            Validator.isObservable(src) ? src.val() : src
         );
 
         return {
@@ -3486,7 +3486,7 @@ var NativeComponents = (function (exports) {
         const filterCallbacks = {};
 
         for (const [key, rawPredicate] of Object.entries(predicates)) {
-            const predicate = Validator$1.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
+            const predicate = Validator.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
             if (predicate && typeof predicate === 'object' && 'callback' in predicate) {
                 filterCallbacks[key] = predicate.callback;
 
@@ -3663,7 +3663,7 @@ var NativeComponents = (function (exports) {
     Observable$1.batch = function(callback) {
         const $observer = Observable$1(0);
         const batch = function() {
-            if(Validator$1.isAsyncFunction(callback)) {
+            if(Validator.isAsyncFunction(callback)) {
                 return (callback(...arguments)).then(() => {
                     $observer.trigger();
                 }).catch(error => { throw error; });
@@ -3714,10 +3714,10 @@ var NativeComponents = (function (exports) {
             if(Array.isArray(itemValue)) {
                 if(configs?.deep !== false) {
                     const mappedItemValue = itemValue.map(item => {
-                        if(Validator$1.isJson(item)) {
+                        if(Validator.isJson(item)) {
                             return Observable$1.json(item, configs);
                         }
-                        if(Validator$1.isArray(item)) {
+                        if(Validator.isArray(item)) {
                             return Observable$1.array(item, configs);
                         }
                         return Observable$1(item, configs);
@@ -3728,7 +3728,7 @@ var NativeComponents = (function (exports) {
                 this.$observables[key] = Observable$1.array(itemValue, configs);
                 continue;
             }
-            if(Validator$1.isObservable(itemValue) || Validator$1.isProxy(itemValue)) {
+            if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
                 this.$observables[key] = itemValue;
                 continue;
             }
@@ -3740,21 +3740,21 @@ var NativeComponents = (function (exports) {
         const result = {};
         for(const key in this.$observables) {
             const dataItem = this.$observables[key];
-            if(Validator$1.isObservable(dataItem)) {
+            if(Validator.isObservable(dataItem)) {
                 let value = dataItem.val();
                 if(Array.isArray(value)) {
                     value = value.map(item => {
-                        if(Validator$1.isObservable(item)) {
+                        if(Validator.isObservable(item)) {
                             return item.val();
                         }
-                        if(Validator$1.isProxy(item)) {
+                        if(Validator.isProxy(item)) {
                             return item.$value;
                         }
                         return item;
                     });
                 }
                 result[key] = value;
-            } else if(Validator$1.isProxy(dataItem)) {
+            } else if(Validator.isProxy(dataItem)) {
                 result[key] = dataItem.$value;
             } else {
                 result[key] = dataItem;
@@ -3766,10 +3766,10 @@ var NativeComponents = (function (exports) {
 
     ObservableObject.prototype.get = function(property) {
         const item = this.$observables[property];
-        if(Validator$1.isObservable(item)) {
+        if(Validator.isObservable(item)) {
             return item.val();
         }
-        if(Validator$1.isProxy(item)) {
+        if(Validator.isProxy(item)) {
             return item.$value;
         }
         return item;
@@ -3777,7 +3777,7 @@ var NativeComponents = (function (exports) {
     ObservableObject.prototype.$get = ObservableObject.prototype.get;
 
     ObservableObject.prototype.set = function(newData) {
-        const data = Validator$1.isProxy(newData) ? newData.$value : newData;
+        const data = Validator.isProxy(newData) ? newData.$value : newData;
         const configs = this.configs;
 
         for(const key in data) {
@@ -3785,15 +3785,15 @@ var NativeComponents = (function (exports) {
             const newValueOrigin = newData[key];
             const newValue = data[key];
 
-            if(Validator$1.isObservable(targetItem)) {
-                if(!Validator$1.isArray(newValue)) {
+            if(Validator.isObservable(targetItem)) {
+                if(!Validator.isArray(newValue)) {
                     targetItem.set(newValue);
                     continue;
                 }
                 const firstElementFromOriginalValue = newValueOrigin.at(0);
-                if(Validator$1.isObservable(firstElementFromOriginalValue) || Validator$1.isProxy(firstElementFromOriginalValue)) {
+                if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
                     const newValues = newValue.map(item => {
-                        if(Validator$1.isProxy(firstElementFromOriginalValue)) {
+                        if(Validator.isProxy(firstElementFromOriginalValue)) {
                             return Observable$1.init(item, configs);
                         }
                         return Observable$1(item, configs);
@@ -3804,7 +3804,7 @@ var NativeComponents = (function (exports) {
                 targetItem.set([...newValue]);
                 continue;
             }
-            if(Validator$1.isProxy(targetItem)) {
+            if(Validator.isProxy(targetItem)) {
                 targetItem.update(newValue);
                 continue;
             }
@@ -3873,13 +3873,13 @@ var NativeComponents = (function (exports) {
      * @returns {{}|*|null}
      */
     Observable$1.value = function(data) {
-        if(Validator$1.isObservable(data)) {
+        if(Validator.isObservable(data)) {
             return data.val();
         }
-        if(Validator$1.isProxy(data)) {
+        if(Validator.isProxy(data)) {
             return data.$value;
         }
-        if(Validator$1.isArray(data)) {
+        if(Validator.isArray(data)) {
             const result = [];
             for(let i = 0, length = data.length; i < length; i++) {
                 const item = data[i];
@@ -3917,8 +3917,8 @@ var NativeComponents = (function (exports) {
         const observable = new ObservableItem(initialValue);
         const updatedValue = nextTick(() => observable.set(callback()));
 
-        if(Validator$1.isFunction(dependencies)) {
-            if(!Validator$1.isObservable(dependencies.$observer)) {
+        if(Validator.isFunction(dependencies)) {
+            if(!Validator.isObservable(dependencies.$observer)) {
                 throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
             }
             dependencies.$observer.subscribe(updatedValue);
@@ -3926,7 +3926,7 @@ var NativeComponents = (function (exports) {
         }
 
         dependencies.forEach(dependency => {
-            if(Validator$1.isProxy(dependency)) {
+            if(Validator.isProxy(dependency)) {
                 dependency.$observables.forEach((observable) => {
                     observable.subscribe(updatedValue);
                 });
@@ -4338,12 +4338,6 @@ var NativeComponents = (function (exports) {
 
     Store.create('locale', navigator.language.split('-')[0] || 'en');
 
-    /**
-     * Creates a `<button>` element.
-     * @type {function(ButtonAttributes=, NdChild|NdChild[]=): HTMLButtonElement}
-     */
-    const Button$1 = HtmlElementWrapper('button');
-
     /**
      * Creates a `<table>` element.
      * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableElement}
@@ -4893,19 +4887,196 @@ var NativeComponents = (function (exports) {
 
     Alert.prototype.toNdElement = function() {};
 
+    function Button(label, props = {}) {
+        if(!(this instanceof Button)) {
+            return new Button(label, props);
+        }
+
+        BaseComponent.call(this, props);
+
+        this.$description = {
+            label: label,
+            type: null,
+            variant: null,
+            size: null,
+            icon: null,
+            iconPosition: 'left',
+            loading: null,
+            disabled: null,
+            template: null,
+            block: null,
+            borderRadiusType: null,
+            outline: null,
+            props
+        };
+
+        this.$element = null;
+    }
+
+    Button.defaultTemplate = null;
+    Button.defaultLoaderTemplate = null;
+
+    Button.use = function(template = {}) {
+        Button.defaultTemplate = template.button;
+        Button.defaultLoaderTemplate = template.loader;
+    };
+
+    BaseComponent.extends(Button);
+
+    Button.preset = function(name, callback) {
+        if (Button.prototype[name] || Button[name]) {
+            console.warn(`Warning: the ${name} method already exist in Button.`);
+            return;
+        }
+        Button[name] = (label, props) => callback(new Button(label, props));
+    };
+
+    Button.presets = function(presets) {
+        for (const name in presets) {
+            Button.preset(name, presets[name]);
+        }
+    };
+
+    Button.prototype.type = function(type) {
+        this.$description.type = type;
+        return this;
+    };
+
+    Button.prototype.variant = function(variant) {
+        this.$description.variant = variant;
+        return this;
+    };
+    Button.prototype.primary = function() {
+        return this.variant('primary');
+    };
+    Button.prototype.secondary = function() {
+        return this.variant('secondary');
+    };
+    Button.prototype.danger = function() {
+        return this.variant('danger');
+    };
+    Button.prototype.success = function() {
+        return this.variant('success');
+    };
+    Button.prototype.warning = function() {
+        return this.variant('warning');
+    };
+    Button.prototype.ghost = function() {
+        return this.variant('ghost');
+    };
+    Button.prototype.link = function() {
+        return this.variant('link');
+    };
+    Button.prototype.outline = function() {
+        this.$description.outline = true;
+        return this;
+    };
+
+    Button.prototype.size = function(size) {
+        this.$description.size = size;
+        return this;
+    };
+    Button.prototype.small = function() {
+        return this.size('small');
+    };
+    Button.prototype.large = function() {
+        return this.size('large');
+    };
+    Button.prototype.medium = function() {
+        return this.size('medium');
+    };
+
+    Button.prototype.icon = function(icon, iconPosition = 'leading') {
+        this.$description.icon = icon;
+        this.$description.iconPosition = iconPosition;
+        return this;
+    };
+
+    Button.prototype.iconAtLeading = function() {
+        this.$description.iconPosition = 'leading';
+        return this;
+    };
+
+    Button.prototype.iconAtTrailing = function() {
+        this.$description.iconPosition = 'trailing';
+        return this;
+    };
+    Button.prototype.iconAtTop = function() {
+        this.$description.iconPosition = 'top';
+        return this;
+    };
+
+    Button.prototype.iconAtBottom = function() {
+        this.$description.iconPosition = 'bottom';
+        return this;
+    };
+
+    Button.prototype.iconOnly = function() {
+        this.$description.iconOnly = true;
+        return this;
+    };
+
+    Button.prototype.loading = function(loading = true) {
+        this.$description.loading = BaseComponent.obs(loading);
+        return this;
+    };
+
+    Button.prototype.disable = function(disabled = true) {
+        this.$description.disabled = BaseComponent.obs(disabled);
+        return this;
+    };
+
+    Button.prototype.enable = function() {
+        return this.disable(false);
+    };
+
+    Button.prototype.render = function(renderFunction) {
+        this.$description.render = renderFunction;
+        return this;
+    };
+
+    Button.prototype.rounded = function() {
+        this.$description.borderRadiusType = 'rounded';
+        return this;
+    };
+    Button.prototype.pill = function() {
+        this.$description.borderRadiusType = 'pill';
+        return this;
+    };
+    Button.prototype.circle = function() {
+        this.$description.borderRadiusType = 'circle';
+        return this;
+    };
+    Button.prototype.smooth = function() {
+        this.$description.borderRadiusType = 'smooth';
+        return this;
+    };
+    Button.prototype.block = function() {
+        this.$description.block = true;
+        return this;
+    };
+
+    Button.prototype.node = function() {
+        return this.$build();
+    };
+
+    Button.prototype.toNdElement = function() {
+        return this.$build();
+    };
+
     /**
      * Component for displaying user avatars with images, initials, or icons
      * @param {Observable<string>|string} source - The avatar source (image URL or observable)
-     * @param {{ src?: Observable<string>|string, alt?: string, name?: string, initials?: string, icon?: ValidChildren, size?: string|number, shape?: string, variant?: string, color?: string, textColor?: string, status?: string, render?: Function }} config - Configuration object
+     * @param {*} props - Props object
      * @class
      */
-    function Avatar(source, config = {}) {
+    function Avatar(source, props = {}) {
         if (!(this instanceof Avatar)) {
-            return new Avatar(source, config);
+            return new Avatar(source, props);
         }
 
         this.$description = {
-            src: Validator$1.isObservable(source) ? source : $(null),
+            src: BaseComponent.obs(source),
             alt: null,
             name: null,
             initials: null,
@@ -4917,7 +5088,7 @@ var NativeComponents = (function (exports) {
             textColor: null,
             status: null,
             render: null,
-            ...config
+            props
         };
     }
 
@@ -4933,6 +5104,21 @@ var NativeComponents = (function (exports) {
         Avatar.defaultTemplate = template.avatar;
     };
 
+    Avatar.preset = function(name, callback) {
+        if (Avatar.prototype[name] || Avatar[name]) {
+            console.warn(`Warning: the ${name} method already exists in Avatar.`);
+            return;
+        }
+        Avatar[name] = (label, props) => callback(new Avatar(label, props));
+    };
+
+    Avatar.presets = function(presets) {
+        for (const name in presets) {
+            Avatar.preset(name, presets[name]);
+        }
+    };
+
+
     /**
      * Registers a handler for the error event
      * @param {(error: Error, avatar: Avatar) => void} handler - The event handler
@@ -4967,6 +5153,9 @@ var NativeComponents = (function (exports) {
      */
     Avatar.prototype.name = function(name) {
         this.$description.name = name;
+        if(!this.$description.initials) {
+            this.$description.initials = name.split(' ').map(n => n[0]).join('');
+        }
         return this;
     };
 
@@ -5081,6 +5270,7 @@ var NativeComponents = (function (exports) {
      */
     Avatar.prototype.variant = function(variant) {
         this.$description.variant = variant;
+        return this;
     }; // 'primary' | 'secondary' | 'success' | etc.
 
     /**
@@ -5163,7 +5353,7 @@ var NativeComponents = (function (exports) {
 
     /**
      * Sets the position of the status indicator
-     * @param {string} position - The position (top-right, bottom-right, top-left, bottom-left)
+     * @param {string} position - The position (top-trailing, bottom-trailing, top-leading, bottom-leading)
      * @returns {Avatar}
      */
     Avatar.prototype.statusPosition = function(position) {
@@ -5265,47 +5455,155 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * Sets the render function for the entire avatar
-     * @param {(avatar: Avatar, sections: {image: ValidChildren, initials: ValidChildren, icon: ValidChildren, status: ValidChildren, badge: ValidChildren}) => ValidChildren} renderFn - Function to render the avatar
-     * @returns {Avatar}
+     * Mixin for managing a collection of items with manipulation methods
+     * @class
      */
-    Avatar.prototype.render = function(renderFn) {
-        this.$description.render = renderFn;
+    function HasItems() {}
+
+
+    HasItems.prototype.trailing = () => {};
+
+    /**
+     * Sets a dynamic observable array to store items
+     * @param {ObservableArray?} [observableArray=null] - Observable array to use, or creates a new one if null
+     * @returns {HasItems}
+     */
+    HasItems.prototype.dynamic = function(observableArray = null) {
+        this.$description.items = observableArray || $$1.array([]);
         return this;
     };
 
     /**
-     * Builds the avatar component
-     * @private
+     * Replaces all existing items with a new array of items
+     * @param {Array} items - Array of new items
+     * @returns {HasItems}
      */
-    Avatar.prototype.$build = function() {
+    HasItems.prototype.items = function(items) {
+        this.$description.items.splice(0, this.$description.items.length, ...items);
+        return this;
+    };
 
+
+    /**
+     * Clears all items from the collection
+     * @returns {HasItems}
+     */
+    HasItems.prototype.clear = function() {
+        const items = this.$description.items;
+        if(Array.isArray(items)) {
+            items.splice(0, items.length);
+            return this;
+        }
+        items.clear();
+        return this;
     };
 
-    function Badge(config = {}) {
-        if(!(this instanceof Badge)) {
-            return new Badge(config);
+    /**
+     * Removes a specific item from the collection
+     * @param {*} item - The item to remove
+     * @returns {HasItems}
+     */
+    HasItems.prototype.removeItem = function(item) {
+        const items = this.$description.items;
+        if(Array.isArray(items)) {
+            const index = items.indexOf(item);
+            if(index > -1) {
+                items.splice(index, 1);
+                return this;
+            }
+        }
+        items.removeItem(item);
+        return this;
+    };
+
+    /**
+     * Sets the render function for items
+     * @param {(element: *) => ValidChildren} renderFn - Render function to apply
+     * @returns {HasItems}
+     */
+    HasItems.prototype.render = function(renderFn) {
+        this.$description.render = renderFn;
+        return this;
+    };
+
+    function AvatarGroup(props = {}) {
+        if(!(this instanceof AvatarGroup)) {
+            return new AvatarGroup(props);
         }
 
         this.$description = {
-            style: null,
-            shape: null,
-            variant,
-            ...config
+            items: [],
+            overlap: 0,
+            max: 0,
+            props,
         };
+
     }
+    BaseComponent.extend(AvatarGroup);
 
-    BaseComponent.extends(Badge);
+    AvatarGroup.prototype.items = function() {
+        this.$description.items = Array.from(arguments);
+        return this;
+    };
 
-    Badge.defaultTemplate = null;
+    AvatarGroup.prototype.item = function(item) {
+        this.$description.items.push(item);
+        return this;
+    };
 
-    Badge.use = function(template) {};
+    AvatarGroup.prototype.overlap = function(value) {
+        this.$description.overlap = value;
+        return this;
+    };
 
-    Badge.prototype.variant = function(variant) {
-        this.$description.variant = variant;
+    AvatarGroup.prototype.max = function(max) {
+        this.$description.max = max;
         return this;
     };
-    Badge.prototype.primary = function() {
+
+    function Badge(content, props = {}) {
+        if(!(this instanceof Badge)) {
+            return new Badge(props);
+        }
+
+        BaseComponent.call(this, props);
+
+        this.$description = {
+            style: 'filled',
+            borderRadiusType: 'pill',
+            variant: 'primary',
+            size: 'medium',
+            onClick: null,
+            content,
+            props
+        };
+    }
+
+    BaseComponent.extends(Badge);
+
+    Badge.defaultTemplate = null;
+
+    Badge.use = function(template) {};
+
+    Badge.preset = function(name, callback) {
+        if (Badge.prototype[name] || Badge[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Badge.`);
+            return;
+        }
+        Badge[name] = (content, props) => callback(new Badge(content, props));
+    };
+
+    Badge.presets = function(presets) {
+        for (const name in presets) {
+            Badge.preset(name, presets[name]);
+        }
+    };
+
+    Badge.prototype.variant = function(variant) {
+        this.$description.variant = variant;
+        return this;
+    };
+    Badge.prototype.primary = function() {
         return this.variant('primary');
     };
     Badge.prototype.secondary = function() {
@@ -5339,15 +5637,21 @@ var NativeComponents = (function (exports) {
     };
 
     Badge.prototype.shape = function(shape) {
-        this.$description.shape = shape;
+        this.$description.borderRadiusType = shape;
         return this;
     };
 
     Badge.prototype.rounded = function() {
-        return this.shape('rounded');
+        this.$description.borderRadiusType = 'rounded';
+        return this;
     };
     Badge.prototype.pill = function() {
-        return this.shape('pill');
+        this.$description.borderRadiusType = 'pill';
+        return this;
+    };
+    Badge.prototype.circle = function() {
+        this.$description.borderRadiusType = 'circle';
+        return this;
     };
 
     Badge.prototype.style = function(style) {
@@ -5355,13 +5659,16 @@ var NativeComponents = (function (exports) {
         return this;
     };
     Badge.prototype.outline = function() {
-        return this.style('outline');
+        this.$description.style = 'outline';
+        return this;
     };
     Badge.prototype.filled = function() {
-        return this.style('filled');
+        this.$description.style = 'filled';
+        return this;
     };
     Badge.prototype.bordered = function() {
-        return this.style('bordered');
+        this.$description.style = 'bordered';
+        return this;
     };
 
     Badge.prototype.content = function(content) {
@@ -5369,19 +5676,11 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    Badge.prototype.clickable = function(handler) {};
-
-
-    Badge.prototype.render = function(renderFn) {
-        this.$description.render = renderFn;
+    Badge.prototype.onClick = function(handler) {
+        this.$description.onClick = handler;
         return this;
     };
 
-    Badge.prototype.$build = function() {
-
-    };
-    Badge.prototype.toNdElement = function() {};
-
     function Breadcrumb(config = {}) {
         if (!(this instanceof Breadcrumb)) {
             return new Breadcrumb(config);
@@ -5450,183 +5749,6 @@ var NativeComponents = (function (exports) {
     };
     Breadcrumb.prototype.toNdElement = function() {};
 
-    function Button(label, config = {}) {
-        if(!(this instanceof Button)) {
-            return new Button(label, config);
-        }
-
-        BaseComponent.call(this, config);
-
-        this.$description = {
-            label: label,
-            type: null,
-            variant: null,
-            size: null,
-            icon: null,
-            iconPosition: null,
-            loading: null,
-            disabled: null,
-            template: null,
-            block: null,
-            borderRadiusType: null,
-            outline: null,
-        };
-
-        this.$element = null;
-    }
-
-    Button.defaultTemplate = null;
-    Button.defaultLoaderTemplate = null;
-
-    Button.use = function(template = {}) {
-        Button.defaultTemplate = template.button;
-        Button.defaultLoaderTemplate = template.loader;
-    };
-
-    BaseComponent.extends(Button);
-
-    Button.prototype.type = function(type) {
-        this.$description.type = type;
-        return this;
-    };
-
-    Button.prototype.variant = function(variant) {
-        this.$description.variant = variant;
-        return this;
-    };
-    Button.prototype.primary = function() {
-        return this.variant('primary');
-    };
-    Button.prototype.secondary = function() {
-        return this.variant('secondary');
-    };
-    Button.prototype.danger = function() {
-        return this.variant('danger');
-    };
-    Button.prototype.success = function() {
-        return this.variant('success');
-    };
-    Button.prototype.warning = function() {
-        return this.variant('warning');
-    };
-    Button.prototype.ghost = function() {
-        return this.variant('ghost');
-    };
-    Button.prototype.link = function() {
-        return this.variant('link');
-    };
-    Button.prototype.outline = function() {
-        this.$description.outline = true;
-        return this;
-    };
-
-    Button.prototype.size = function(size) {
-        this.$description.size = size;
-        return this;
-    };
-    Button.prototype.small = function() {
-        return this.size('small');
-    };
-    Button.prototype.large = function() {
-        return this.size('large');
-    };
-    Button.prototype.medium = function() {
-        return this.size('medium');
-    };
-
-    Button.prototype.icon = function(icon, iconPosition = 'left') {
-        this.$description.icon = icon;
-        this.$description.iconPosition = iconPosition;
-        return this;
-    };
-
-    Button.prototype.iconAtLeft = function() {
-        this.$description.iconPosition = 'left';
-        return this;
-    };
-    Button.prototype.iconAtRight = function() {
-        this.$description.iconPosition = 'right';
-        return this;
-    };
-    Button.prototype.iconAtTop = function() {
-        this.$description.iconPosition = 'top';
-        return this;
-    };
-
-    Button.prototype.iconAtBottom = function() {
-        this.$description.iconPosition = 'bottom';
-        return this;
-    };
-
-    Button.prototype.iconOnly = function() {
-        this.$description.iconOnly = true;
-        return this;
-    };
-
-    Button.prototype.loading = function(loading = true) {
-        this.$description.loading = BaseComponent.obs(loading);
-        return this;
-    };
-
-    Button.prototype.disable = function(disabled = true) {
-        this.$description.disabled = BaseComponent.obs(disabled);
-        return this;
-    };
-
-    Button.prototype.enable = function() {
-        return this.disable(false);
-    };
-
-    Button.prototype.render = function(renderFunction) {
-        this.$description.render = renderFunction;
-        return this;
-    };
-
-    Button.prototype.rounded = function() {
-        this.$description.borderRadiusType = 'rounded';
-        return this;
-    };
-    Button.prototype.circle = function() {
-        this.$description.borderRadiusType = 'circle';
-        return this;
-    };
-    Button.prototype.pill = function() {
-        this.$description.shape = 'circle';
-        return this;
-    };
-    Button.prototype.smooth = function() {
-        this.$description.shape = 'smooth';
-        return this;
-    };
-    Button.prototype.block = function() {
-        this.$description.block = true;
-        return this;
-    };
-
-    Button.prototype.$build = function() {
-        if(this.$element) {
-            return this.$element;
-        }
-        const renderFn = this.$description.render || Button.defaultTemplate;
-
-        if(typeof renderFn === 'function') {
-            this.$element = renderFn(this);
-        }
-        else {
-            const props = {};
-            this.$element = Button$1(props, this.$description.label);
-        }
-        return this.$element;
-    };
-
-    Button.prototype.node = function() {
-        return this.$build();
-    };
-
-    Button.prototype.toNdElement = function() {
-        return this.$build();
-    };
-
     function Card(config = {}) {
         if(!(this instanceof Card)) {
             return new Card(config);
@@ -5735,89 +5857,14 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    /**
-     * Mixin for managing a collection of items with manipulation methods
-     * @class
-     */
-    function HasItems() {}
-
-    /**
-     * Sets a dynamic observable array to store items
-     * @param {ObservableArray?} [observableArray=null] - Observable array to use, or creates a new one if null
-     * @returns {HasItems}
-     */
-    HasItems.prototype.dynamic = function(observableArray = null) {
-        this.$description.items = observableArray || $$1.array([]);
-        return this;
-    };
-
-    /**
-     * Replaces all existing items with a new array of items
-     * @param {Array} items - Array of new items
-     * @returns {HasItems}
-     */
-    HasItems.prototype.items = function(items) {
-        this.$description.items.splice(0, this.$description.items.length, ...items);
-        return this;
-    };
-
-    /**
-     * Adds an item to the collection
-     * @param {*} item - The item to add
-     * @returns {HasItems}
-     */
-    HasItems.prototype.item = function(item) {
-        this.$description.items.push(item);
-        return this;
-    };
-
-    /**
-     * Clears all items from the collection
-     * @returns {HasItems}
-     */
-    HasItems.prototype.clear = function() {
-        const items = this.$description.items;
-        if(Array.isArray(items)) {
-            items.splice(0, items.length);
-            return this;
-        }
-        items.clear();
-        return this;
-    };
-
-    /**
-     * Removes a specific item from the collection
-     * @param {*} item - The item to remove
-     * @returns {HasItems}
-     */
-    HasItems.prototype.removeItem = function(item) {
-        const items = this.$description.items;
-        if(Array.isArray(items)) {
-            const index = items.indexOf(item);
-            if(index > -1) {
-                items.splice(index, 1);
-                return this;
-            }
-        }
-        items.removeItem(item);
-        return this;
-    };
-
-    /**
-     * Sets the render function for items
-     * @param {(element: *) => ValidChildren} renderFn - Render function to apply
-     * @returns {HasItems}
-     */
-    HasItems.prototype.render = function(renderFn) {
-        this.$description.render = renderFn;
-        return this;
-    };
-
-    function MenuDivider() {
+    function MenuDivider(props = {}) {
         if(!(this instanceof MenuDivider)) {
-            return new MenuDivider();
+            return new MenuDivider(props);
         }
 
+        this.$description = {
+            props
+        };
     }
 
     BaseComponent.extends(MenuDivider);
@@ -5826,16 +5873,12 @@ var NativeComponents = (function (exports) {
     MenuDivider.defaultTemplate = null;
 
     MenuDivider.use = function(template) {
-        MenuDivider.defaultTemplate = template.divider;
+        MenuDivider.defaultTemplate = template.menuDivider;
     };
 
-    MenuDivider.prototype.$build = function() {
-
-    };
-
-    function MenuGroup(label, config) {
+    function MenuGroup(label, props) {
         if(!(this instanceof MenuGroup)) {
-            return new MenuGroup(label, config);
+            return new MenuGroup(label, props);
         }
 
         this.$description = {
@@ -5843,7 +5886,7 @@ var NativeComponents = (function (exports) {
             data: null,
             items: [],
             render: null,
-            ...config
+            props
         };
     }
 
@@ -5871,10 +5914,118 @@ var NativeComponents = (function (exports) {
         return this.item(group);
     };
 
-    function Menu(config = {}) {
+    function MenuItem(props = {}) {
+        if(!(this instanceof MenuItem)) {
+            return new MenuItem(props);
+        }
+
+        this.$description = {
+            items: [],
+            action: null,
+            label: null,
+            icon: null,
+            shortcut: null,
+            disabled: false,
+            selected: false,
+            value: null,
+            data: null,
+            render: null,
+            trailing: null,
+            props
+        };
+
+    }
+
+    MenuItem.defaultTemplate = null;
+
+    MenuItem.use = function(template) {
+        MenuItem.defaultTemplate = template.menuItem;
+    };
+
+    BaseComponent.extends(MenuItem, HasItems);
+
+
+    MenuItem.prototype.label = function(label) {
+        this.$description.label = label;
+        return this;
+    };
+
+    MenuItem.prototype.icon = function(icon) {
+        this.$description.icon = icon;
+        return this;
+    };
+
+    MenuItem.prototype.trailing = function(trailing) {
+        this.$description.trailing = trailing;
+        return this;
+    };
+
+    MenuItem.prototype.shortcut = function(shortcut) {
+        this.$description.shortcut = shortcut;
+        return this;
+    };
+
+    MenuItem.prototype.disabled = function(disabled = true) {
+        this.$description.disabled = BaseComponent.obs(disabled);
+        return this;
+    };
+
+    MenuItem.prototype.selected = function(selected = true) {
+        this.$description.selected = BaseComponent.obs(selected);
+        return this;
+    };
+
+    MenuItem.prototype.value = function(value) {
+        this.$description.value = value;
+        return this;
+    };
+
+    MenuItem.prototype.action = function(action) {
+        this.$description.action = action;
+        return this;
+    };
+
+    MenuItem.prototype.data = function(data) {
+        this.$description.data = data;
+        return this;
+    };
+
+    MenuItem.prototype.divider = function() {
+        return this.item(new MenuDivider());
+    };
+
+    MenuItem.prototype.group = function(label, builder) {
+        const group = new MenuGroup(label);
+        builder && builder(group);
+        return this.item(group);
+    };
+
+    function MenuLink(props = {}) {
+        if(!(this instanceof MenuLink)) {
+            return new MenuLink(props);
+        }
+        MenuItem.call(this, props);
+    }
+
+    MenuLink.prototype = Object.create(MenuItem.prototype);
+    MenuLink.prototype.constructor = MenuLink;
+
+
+    MenuLink.defaultTemplate = null;
+
+    MenuLink.use = function(template) {
+        MenuLink.defaultTemplate = template.menuLink;
+    };
+
+    MenuLink.prototype.target = function (target) {
+        this.$description.target = target;
+        return this;
+    };
+
+    function Menu(props = {}) {
 
         if(!(this instanceof Menu)) {
-            return new Menu(config)
+            return new Menu(props)
         }
 
         this.$description = {
@@ -5883,7 +6034,8 @@ var NativeComponents = (function (exports) {
             orientation: 'horizontal',
             closeOnSelect: true,
             keyboardLoop: true,
-            ...config
+            active: null,
+            props
         };
 
     }
@@ -5896,6 +6048,11 @@ var NativeComponents = (function (exports) {
         Menu.defaultTemplate = template.menu;
     };
 
+    Menu.prototype.add = function(item) {
+        this.$description.items.push(item);
+        return this;
+    };
+
     Menu.prototype.title = function(title) {
         this.$description.title = title;
         return this;
@@ -5931,6 +6088,11 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    Menu.prototype.active = function(callback) {
+        this.$description.active = callback;
+        return this;
+    };
+
     Menu.prototype.onItemClick = function(handler) {
         this.on('itemClick', handler);
         return this;
@@ -5941,16 +6103,60 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    Menu.prototype.separator = function() {
+        return this.add(new MenuDivider());
+    };
 
 
-    Menu.prototype.divider = function() {
-        return this.item(new MenuDivider());
+    /**
+     * Adds an item to the collection
+     * @param {NdChild} label - The item to add
+     * @param {?NdChild} icon - The item to add
+     * @param {?Function} action - The item to add
+     * @param {?Function} configBuilder - The item to add
+     * @param {?*} props - The item to add
+     * @returns {HasItems}
+     */
+    Menu.prototype.item = function(label, icon, action, configBuilder, props = {}) {
+        const item = MenuItem();
+        item.icon(icon).label(label).onClick(action);
+        if(typeof configBuilder === 'function') {
+            configBuilder.length ? configBuilder(item) : this.trailing(item);
+        } else if(configBuilder) {
+            this.trailing(item);
+        }
+        this.$description.items.push(item);
+        return this;
     };
 
-    Menu.prototype.group = function(label, builder) {
-        const group = new MenuGroup(label);
+    /**
+     * Adds an item to the collection
+     * @param {NdChild} label - The item to add
+     * @param {?NdChild} icon - The item to add
+     * @param {?string|{to: string, params: ?*}} url - The item to add
+     * @param {?Function} configBuilder - The item to add
+     * @param {?*} props - The item to add
+     * @returns {HasItems}
+     */
+    Menu.prototype.link = function(label, icon, url, configBuilder, props = {}) {
+        const item = MenuLink(props);
+        item.icon(icon).label(label).action(url);
+        if(typeof configBuilder === 'function') {
+            configBuilder.length ? configBuilder(item) : this.trailing(item);
+        } else if(configBuilder) {
+            this.trailing(item);
+        }
+        this.$description.items.push(item);
+        return this;
+    };
+
+    Menu.prototype.divider = Menu.prototype.separator;
+
+    Menu.prototype.group = function(label, icon, builder, props = {}) {
+        const group = new MenuGroup(label, props);
+        group.icon(icon);
         builder && builder(group);
-        return this.item(group);
+        return this.add(group);
     };
 
     function ContextMenu(config = {}) {
@@ -6011,92 +6217,6 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    function MenuItem(config = {}) {
-        if(!(this instanceof MenuItem)) {
-            return new MenuItem(config);
-        }
-
-        this.$description = {
-            items: [],
-            link: null,
-            target: null,
-            label: null,
-            icon: null,
-            shortcut: null,
-            disabled: false,
-            selected: false,
-            value: null,
-            data: null,
-            render: null,
-            ...config
-        };
-
-    }
-
-    MenuItem.defaultTemplate = null;
-
-    MenuItem.use = function(template) {
-        MenuItem.defaultTemplate = template.menuItem;
-    };
-
-    BaseComponent.extends(MenuItem, HasItems);
-
-
-    MenuItem.prototype.label = function(label) {
-        this.$description.label = label;
-        return this;
-    };
-
-    MenuItem.prototype.link = function(link) {
-        this.$description.link = link;
-        return this;
-    };
-
-    MenuItem.prototype.target = function(target) {
-        this.$description.target = target;
-        return this;
-    };
-
-    MenuItem.prototype.icon = function(icon) {
-        this.$description.icon = icon;
-        return this;
-    };
-
-    MenuItem.prototype.shortcut = function(shortcut) {
-        this.$description.shortcut = shortcut;
-        return this;
-    };
-
-    MenuItem.prototype.disabled = function(disabled = true) {
-        this.$description.disabled = disabled;
-        return this;
-    };
-
-    MenuItem.prototype.selected = function(selected = true) {
-        this.$description.selected = selected;
-        return this;
-    };
-
-    MenuItem.prototype.value = function(value) {
-        this.$description.value = value;
-        return this;
-    };
-
-    MenuItem.prototype.data = function(data) {
-        this.$description.data = data;
-        return this;
-    };
-
-    MenuItem.prototype.divider = function() {
-        return this.item(new MenuDivider());
-    };
-
-    MenuItem.prototype.group = function(label, builder) {
-        const group = new MenuGroup(label);
-        builder && builder(group);
-        return this.item(group);
-    };
-
     function ContextMenuItem(config) {
         if(!(this instanceof ContextMenuItem)) {
             return new ContextMenuItem(config);
@@ -6127,17 +6247,17 @@ var NativeComponents = (function (exports) {
         ContextMenuGroup.defaultTemplate = template.contextMenuGroup;
     };
 
-    function Divider(config = {}) {
+    function Divider(label, props = {}) {
         if(!(this instanceof Divider)) {
-            return new Divider(config);
+            return new Divider(label, props);
         }
 
         this.$description = {
             orientation: 'horizontal',
             variant: 'solid',
-            thickness: null,
-            spacing: null,
-            label: null,
+            thickness: 1,
+            spacing: 16,
+            label,
             labelPosition: 'center',
             color: null,
             render: null,
@@ -6145,7 +6265,7 @@ var NativeComponents = (function (exports) {
             indent: null,
             leading: null,
             trailing: null,
-            ...config
+            props
         };
     }
 
@@ -6157,6 +6277,20 @@ var NativeComponents = (function (exports) {
         Divider.defaultTemplate = template.divider;
     };
 
+    Divider.preset = function(name, callback) {
+        if (Divider.prototype[name] || Divider[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Divider.`);
+            return;
+        }
+        Divider[name] = (label, props) => callback(new Divider(label, props));
+    };
+
+    Divider.presets = function(presets) {
+        for (const name in presets) {
+            Divider.preset(name, presets[name]);
+        }
+    };
+
     Divider.prototype.orientation = function(orientation) {
         this.$description.orientation = orientation;
         return this;
@@ -7151,7 +7285,7 @@ var NativeComponents = (function (exports) {
             }
             else if (typeof condition === 'function') {
                 isRequired = condition(allValues);
-            } else if (Validator$1.isObservable(condition)) {
+            } else if (Validator.isObservable(condition)) {
                 isRequired = condition.val();
             } else {
                 isRequired = !!condition;
@@ -7284,7 +7418,7 @@ var NativeComponents = (function (exports) {
     };
 
     Field.prototype.errors = function(errors) {
-        if(!Validator$1.isObservable(errors)) {
+        if(!Validator.isObservable(errors)) {
             throw new Error('Errors must be an observable');
         }
         this.$description.errors = errors;
@@ -7388,12 +7522,12 @@ var NativeComponents = (function (exports) {
 
     Field.prototype.value = function() {
         const value = this.$model();
-        return Validator$1.isObservable(value) ? value.val() : value;
+        return Validator.isObservable(value) ? value.val() : value;
     };
 
     Field.prototype.setValue = function(newValue) {
         const value = this.$model();
-        if(Validator$1.isObservable(value)) {
+        if(Validator.isObservable(value)) {
             value.set(newValue);
             return this;
         }
@@ -7563,7 +7697,7 @@ var NativeComponents = (function (exports) {
             return this;
         }
 
-        if(Validator$1.isObservable(dataSource)) {
+        if(Validator.isObservable(dataSource)) {
             field.model(dataSource);
             dataSource.subscribe(() => {
                 this.$isDirty.set(true);
@@ -8116,7 +8250,7 @@ var NativeComponents = (function (exports) {
 
     CheckboxField.prototype.checked = function() {
         const checked = this.$description.checked;
-        if(Validator$1.isObservable(checked)) {
+        if(Validator.isObservable(checked)) {
             return checked.val();
         }
         return checked;
@@ -8157,7 +8291,7 @@ var NativeComponents = (function (exports) {
 
     CheckboxField.prototype.checked = function() {
         const checked = this.$description.checked;
-        if(Validator$1.isObservable(checked)) {
+        if(Validator.isObservable(checked)) {
             return checked.val();
         }
         return checked;
@@ -8837,7 +8971,7 @@ var NativeComponents = (function (exports) {
         this.$description = {
             name: name,
             defaultItem: null,
-            value: (config?.data && Validator$1.isObservable(config.data))
+            value: (config?.data && Validator.isObservable(config.data))
                 ? config.data
                 : Observable$1.array(config?.data || []),
             rules: null,
@@ -8869,7 +9003,7 @@ var NativeComponents = (function (exports) {
             value.set(data);
             return;
         }
-        if(Validator$1.isObservable(data)) {
+        if(Validator.isObservable(data)) {
             field.model(data);
             return;
         }
@@ -8933,9 +9067,9 @@ var NativeComponents = (function (exports) {
 
         const defaultItem = this.$description.defaultItem;
         let defaultItemData = (typeof defaultItem === 'function' ? defaultItem(...args) : defaultItem) || '';
-        defaultItemData = Validator$1.isObservable(defaultItemData)
+        defaultItemData = Validator.isObservable(defaultItemData)
             ? defaultItemData
-            : Validator$1.isObject(defaultItemData)
+            : Validator.isObject(defaultItemData)
                 ? Observable$1.init(defaultItemData)
                 : Observable$1(defaultItemData);
 
@@ -8981,7 +9115,7 @@ var NativeComponents = (function (exports) {
     };
 
     FieldCollection.prototype.model = function(newValue) {
-        if(Validator$1.isObservable(newValue)) {
+        if(Validator.isObservable(newValue)) {
             this.$description.value?.cleanup?.();
             this.$description.value = newValue;
             return this;
@@ -8992,7 +9126,7 @@ var NativeComponents = (function (exports) {
 
     FieldCollection.prototype.value = function() {
         return this.$description.value.map((item) => {
-            return Validator$1.isObservable(item) ? item.val() : item;
+            return Validator.isObservable(item) ? item.val() : item;
         });
     };
 
@@ -9355,7 +9489,7 @@ var NativeComponents = (function (exports) {
 
     ListItem.prototype.selectable = function() {
         this.$description.selectable = true;
-        if(Validator$1.isObservable(this.$description.selected)) {
+        if(Validator.isObservable(this.$description.selected)) {
             return this;
         }
         this.$description.selected = $(false);
@@ -9363,7 +9497,7 @@ var NativeComponents = (function (exports) {
     };
 
     ListItem.prototype.selected = function(selected = true) {
-        if(Validator$1.isObservable(this.$description.selected)) {
+        if(Validator.isObservable(this.$description.selected)) {
             this.$description.selected.set(selected);
             return this;
         }
@@ -10094,11 +10228,13 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    function Progress(config = {}) {
+    function Progress(props = {}) {
         if (!(this instanceof Progress)) {
-            return new Progress(config);
+            return new Progress(props);
         }
 
+        BaseComponent.call(this, props);
+
         this.$description = {
             value: null,
             type: null,
@@ -10114,7 +10250,8 @@ var NativeComponents = (function (exports) {
             striped: null,
             animated: null,
             render: null,
-            ...config
+            borderRadiusType: null,
+            props
         };
     }
 
@@ -10122,13 +10259,32 @@ var NativeComponents = (function (exports) {
 
     Progress.defaultTemplate = null;
 
-    Progress.use = function(template) {};
+    Progress.use = function(template) {
+        Progress.defaultTemplate = template.progress;
+    };
+
+    Progress.preset = function(name, callback) {
+        if (Progress.prototype[name] || Progress[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Progress.`);
+            return;
+        }
+        Progress[name] = (props) => callback(new Progress(props));
+    };
+
+    Progress.presets = function(presets) {
+        for (const name in presets) {
+            Progress.preset(name, presets[name]);
+        }
+    };
+
 
     Progress.prototype.model = function(observable) {
         this.$description.value = observable;
         return this;
     };
 
+    Progress.prototype.bind = Progress.prototype.model;
+
     Progress.prototype.setCurrentStep = function(step) {
         this.$description.value?.set(step);
         this.emit('change', step);
@@ -10136,19 +10292,14 @@ var NativeComponents = (function (exports) {
 
     Progress.prototype.value = function() {
         const value = this.$description.value;
-        if(Validator$1.isObservable(value)) {
+        if(Validator.isObservable(value)) {
             return value.val();
         }
         return value;
     };
 
     Progress.prototype.setValue = function(newValue) {
-        const value = this.$description.value;
-        if(Validator$1.isObservable(value)) {
-            value.set(newValue);
-            return this;
-        }
-        this.$description.value = newValue;
+        this.setCurrentStep(newValue);
         return this;
     };
 
@@ -10174,6 +10325,11 @@ var NativeComponents = (function (exports) {
         return this.type('line');
     };
 
+    Progress.prototype.pill = function() {
+        this.$description.borderRadiusType = 'pill';
+        return this;
+    };
+
     // Variant
     Progress.prototype.variant = function(name) {
         this.$description.variant = name;
@@ -10311,24 +10467,47 @@ var NativeComponents = (function (exports) {
         return this.$build();
     };
 
-    function Skeleton(type = 'rect', config = {}) {
+    function Skeleton(props = {}) {
         if (!(this instanceof Skeleton)) {
-            return new Skeleton(config);
+            return new Skeleton(props);
         }
+
+        BaseComponent.call(this, props);
+
         this.$description = {
-            type,
+            type: 'rect',
+            variant: 'pulse',
+            borderRadiusType: 'rounded',
             lines: null,
             width: null,
             height: null,
             loading: null,
             repeat: null,
-            ...config
+            props
         };
     }
 
+    BaseComponent.extends(Skeleton);
+
     Skeleton.defaultTemplate = null;
 
-    Skeleton.use = function(template) {};
+    Skeleton.use = function(template) {
+        Skeleton.defaultTemplate = template.skeleton;
+    };
+
+    Skeleton.preset = function(name, callback) {
+        if (Skeleton.prototype[name] || Skeleton[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Skeleton.`);
+            return;
+        }
+        Skeleton[name] = (props) => callback(new Skeleton(props));
+    };
+
+    Skeleton.presets = function(presets) {
+        for (const name in presets) {
+            Skeleton.preset(name, presets[name]);
+        }
+    };
 
     Skeleton.prototype.type = function(type) {
         this.$description.type = type;
@@ -10351,6 +10530,21 @@ var NativeComponents = (function (exports) {
         return this.type('image');
     };
 
+    Skeleton.prototype.rounded = function() {
+        this.$description.borderRadiusType = 'rounded';
+        return this;
+    };
+
+    Skeleton.prototype.pill = function() {
+        this.$description.borderRadiusType = 'pill';
+        return this;
+    };
+
+    Skeleton.prototype.smooth = function() {
+        this.$description.borderRadiusType = 'smooth';
+        return this;
+    };
+
     Skeleton.prototype.width = function(width) {
         this.$description.width = width;
         return this;
@@ -10375,7 +10569,6 @@ var NativeComponents = (function (exports) {
     Skeleton.prototype.pulse = function() {
         return this.variant('pulse');
     };
-    Skeleton.prototype.rounded = function() {};
 
     Skeleton.prototype.loading = function(isLoading) {
         this.$description.loading = isLoading;
@@ -10590,14 +10783,14 @@ var NativeComponents = (function (exports) {
         return this.$build();
     };
 
-    function Spinner(config = {}) {
-        if (!(this instanceof Spinner)) {
-            return new Spinner(config);
+    function Spinner$1(props = {}) {
+        if (!(this instanceof Spinner$1)) {
+            return new Spinner$1(props);
         }
 
         this.$description = {
             type: 'circle',
-            variant: null,
+            variant: 'primary',
             color: null,
             size: 'small',
             label: null,
@@ -10606,32 +10799,48 @@ var NativeComponents = (function (exports) {
             backdrop: null,
             render: null,
             loading: null,
-            speed: null,
-            ...config
+            speed: 'normal',
+            props
         };
     }
 
-    Spinner.use = function(template) {};
-    Spinner.defaultTemplate = null;
+    Spinner$1.defaultTemplate = null;
+    Spinner$1.use = function(template) {
+        Spinner$1.defaultTemplate = template.spinner;
+    };
+
+    Spinner$1.preset = function(name, callback) {
+        if (Spinner$1.prototype[name] || Spinner$1[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Spinner.`);
+            return;
+        }
+        Spinner$1[name] = (props) => callback(new Spinner$1(props));
+    };
+
+    Spinner$1.presets = function(presets) {
+        for (const name in presets) {
+            Spinner$1.preset(name, presets[name]);
+        }
+    };
 
-    Spinner.prototype.type = function(type) {
+    Spinner$1.prototype.type = function(type) {
         this.$description.type = type;
         return this;
     };
 
-    Spinner.prototype.circle = function() {
+    Spinner$1.prototype.circle = function() {
         return this.type('circle');
     };
-    Spinner.prototype.dots = function() {
+    Spinner$1.prototype.dots = function() {
         return this.type('dots');
     };
-    Spinner.prototype.bars = function() {
+    Spinner$1.prototype.bars = function() {
         return this.type('bars');
     };
-    Spinner.prototype.pulse = function() {
+    Spinner$1.prototype.pulse = function() {
         return this.type('pulse');
     };
-    Spinner.prototype.ring = function() {
+    Spinner$1.prototype.ring = function() {
         return this.type('ring');
     };
 
@@ -10639,79 +10848,79 @@ var NativeComponents = (function (exports) {
      * @param {string|int} size
      * @returns {Spinner}
      */
-    Spinner.prototype.size = function(size) {
+    Spinner$1.prototype.size = function(size) {
         this.$description.size = size;
         return this;
     };
-    Spinner.prototype.extraSmall = function() {
+    Spinner$1.prototype.extraSmall = function() {
         return this.size('extra-small');
     };
-    Spinner.prototype.small = function() {
+    Spinner$1.prototype.small = function() {
         return this.size('small');
     };
-    Spinner.prototype.medium = function() {
+    Spinner$1.prototype.medium = function() {
         return this.size('medium');
     };
-    Spinner.prototype.large = function() {
+    Spinner$1.prototype.large = function() {
         return this.size('large');
     };
-    Spinner.prototype.extraLarge = function() {
+    Spinner$1.prototype.extraLarge = function() {
         return this.size('extra-large');
     };
 
-    Spinner.prototype.variant = function(name) {
+    Spinner$1.prototype.variant = function(name) {
         this.$description.variant = name;
         return this;
     };
-    Spinner.prototype.primary = function() {
+    Spinner$1.prototype.primary = function() {
         return this.variant('primary');
     };
-    Spinner.prototype.secondary = function() {
+    Spinner$1.prototype.secondary = function() {
         return this.variant('secondary');
     };
-    Spinner.prototype.success = function() {
+    Spinner$1.prototype.success = function() {
         return this.variant('success');
     };
-    Spinner.prototype.danger = function() {
+    Spinner$1.prototype.danger = function() {
         return this.variant('danger');
     };
-    Spinner.prototype.warning = function() {
+    Spinner$1.prototype.warning = function() {
         return this.variant('warning');
     };
-    Spinner.prototype.color = function(color) {
+    Spinner$1.prototype.color = function(color) {
         this.$description.color = color;
         return this;
     };
 
-    Spinner.prototype.label = function(label) {
+    Spinner$1.prototype.label = function(label) {
         this.$description.label = label;
         return this;
     };
-    Spinner.prototype.labelPosition = function(position) {
+    Spinner$1.prototype.labelPosition = function(position) {
         this.$description.labelPosition = position;
         return this;
     };
-    Spinner.prototype.labelAtTop = function() {
+    Spinner$1.prototype.labelAtTop = function() {
         return this.labelPosition('top');
     };
-    Spinner.prototype.labelAtBottom = function() {
+    Spinner$1.prototype.labelAtBottom = function() {
         return this.labelPosition('bottom');
     };
-    Spinner.prototype.labelAtLeft = function() {
+    Spinner$1.prototype.labelAtLeft = function() {
         return this.labelPosition('left');
     };
-    Spinner.prototype.labelAtRight = function() {
+    Spinner$1.prototype.labelAtRight = function() {
         return this.labelPosition('right');
     };
 
-    Spinner.prototype.overlay = function(enabled = true) {
+    Spinner$1.prototype.overlay = function(enabled = true) {
         this.$description.overlay = enabled;
         return this;
     };
-    Spinner.prototype.fullscreen = function() {
+    Spinner$1.prototype.fullscreen = function() {
         return this.overlay(true);
     };
-    Spinner.prototype.backdrop = function(enabled = true) {
+    Spinner$1.prototype.backdrop = function(enabled = true) {
         this.$description.backdrop = enabled;
         return this;
     };
@@ -10721,34 +10930,31 @@ var NativeComponents = (function (exports) {
      * @param {string|int} speed
      * @returns {Spinner}
      */
-    Spinner.prototype.speed = function(speed) {
+    Spinner$1.prototype.speed = function(speed) {
         this.$description.speed = speed;
         return this;
     };
-    Spinner.prototype.slow = function() {
+    Spinner$1.prototype.slow = function() {
         return this.speed('slow');
     };
-    Spinner.prototype.normal = function() {
+    Spinner$1.prototype.normal = function() {
         return this.speed('normal');
     };
-    Spinner.prototype.fast = function() {
+    Spinner$1.prototype.fast = function() {
         return this.speed('fast');
     };
-    Spinner.prototype.loading = function(isLoading) {
-        this.$description.loading = isLoading;
+    Spinner$1.prototype.loading = function(isLoading) {
+        this.$description.loading = BaseComponent.obs(isLoading);
         return this;
     };
+    Spinner$1.prototype.bind = Spinner$1.prototype.loading;
 
-    Spinner.prototype.show = function() {};
-    Spinner.prototype.hide = function() {};
-
-    Spinner.prototype.render = function(renderFn) {
-        this.$description.render = renderFn;
-        return this;
+    Spinner$1.prototype.show = function() {
+        this.$description.loading?.set(true);
+    };
+    Spinner$1.prototype.hide = function() {
+        this.$description.loading?.set(false);
     };
-
-    Spinner.prototype.$build = function() {};
-    Spinner.prototype.toNdElement = function() {};
 
     function Splitter(config = {}) {
         if(!(this instanceof Splitter)) {
@@ -10805,7 +11011,7 @@ var NativeComponents = (function (exports) {
     };
 
     Splitter.prototype.panels = function(panels) {
-        if(Validator$1.isObservable(this.$description.panels)) {
+        if(Validator.isObservable(this.$description.panels)) {
             this.$description.panels.set(panels);
             return this;
         }
@@ -10967,7 +11173,7 @@ var NativeComponents = (function (exports) {
     };
 
     Stepper.prototype.steps = function(steps) {
-        if(Validator$1.isObservable(steps)) {
+        if(Validator.isObservable(steps)) {
             this.$description.steps = steps;
             return this;
         }
@@ -12111,16 +12317,176 @@ var NativeComponents = (function (exports) {
     Tooltip.prototype.$build = function() {};
     Tooltip.prototype.toNdElement = function() {};
 
+    function Stack(content, props = {}) {
+        if (!(this instanceof Stack)) {
+            return new Stack(content, props);
+        }
+
+        BaseComponent.call(this, props);
+
+        this.$description = {
+            orientation: 'horizontal',
+            content: content,
+            spacing: 0,
+            alignment: 'center',
+            justifyContent: 'start',
+            props
+        };
+    }
+
+    BaseComponent.extends(Stack);
+
+    Stack.prototype.wrap = function(enabled = true) {
+        this.$description.wrap = enabled;
+        return this;
+    };
+
+    Stack.prototype.spacing = function(value) {
+        this.$description.spacing = value;
+        return this;
+    };
+
+    Stack.prototype.alignLeading = function() {
+        this.$description.alignment = 'leading';
+        return this;
+    };
+    Stack.prototype.alignCenter = function() {
+        this.$description.alignment = 'center';
+        return this;
+    };
+    Stack.prototype.alignTrailing = function() {
+        this.$description.alignment = 'trailing';
+        return this;
+    };
+    Stack.prototype.alignStretch = function() {
+        this.$description.alignment = 'stretch';
+        return this;
+    };
+
+    Stack.prototype.justifyStart = function() {
+        this.$description.justifyContent = 'start';
+        return this;
+    };
+    Stack.prototype.justifyCenter = function() {
+        this.$description.justifyContent = 'center';
+        return this;
+    };
+    Stack.prototype.justifyEnd = function() {
+        this.$description.justifyContent = 'end';
+        return this;
+    };
+    Stack.prototype.justifyBetween = function() {
+        this.$description.justifyContent = 'between';
+        return this;
+    };
+    Stack.prototype.justifyAround = function() {
+        this.$description.justifyContent = 'around';
+        return this;
+    };
+
+    Stack.prototype.center = function() {
+        this.alignCenter().justifyCenter();
+        return this;
+    };
+
+    function VStack(content, props = {}) {
+        if (!(this instanceof VStack)) return new VStack(content, props);
+
+        Stack.call(this, content, props);
+        this.$description.orientation = 'vertical';
+        this.$description.alignment = 'leading';
+    }
+    Stack.extends(VStack);
+
+    VStack.preset = function(name, callback) {
+        if (VStack.prototype[name] || VStack[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in VStack.`);
+            return;
+        }
+        VStack[name] = (content, props) => callback(new VStack(content, props));
+    };
+
+    VStack.presets = function(presets) {
+        for (const name in presets) {
+            VStack.preset(name, presets[name]);
+        }
+    };
+
+    function ZStack(content, props = {}) {
+        if (!(this instanceof ZStack)) {
+            return new ZStack(content, props);
+        }
+        BaseComponent.call(this, props);
+
+        this.$description = {
+            content: content,
+            alignment: 'center',
+            props
+        };
+    }
+
+    BaseComponent.extends(ZStack);
+
+    ZStack.preset = function(name, callback) {
+        if (ZStack.prototype[name] || ZStack[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in ZStack.`);
+            return;
+        }
+        ZStack[name] = (content, props) => callback(new ZStack(content, props));
+    };
+
+    ZStack.presets = function(presets) {
+        for (const name in presets) {
+            ZStack.preset(name, presets[name]);
+        }
+    };
+
+    ZStack.prototype.alignment = function(align) {
+        this.$description.alignment = align;
+        return this;
+    };
+
+    function HStack(content, props = {}) {
+        if (!(this instanceof HStack)) {
+            return new HStack(content, props);
+        }
+
+        Stack.call(this, content, props);
+        this.$description.orientation = 'horizontal';
+    }
+
+    Stack.extends(HStack);
+
+    HStack.preset = function(name, callback) {
+        if (HStack.prototype[name] || HStack[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in HStack.`);
+            return;
+        }
+        HStack[name] = (content, props) => callback(new HStack(content, props));
+    };
+
+    HStack.presets = function(presets) {
+        for (const name in presets) {
+            HStack.preset(name, presets[name]);
+        }
+    };
+
+    const Row = HStack;
+    const Col = VStack;
+    const Overlay = ZStack;
+
     exports.Accordion = Accordion;
     exports.AccordionItem = AccordionItem;
     exports.Alert = Alert;
     exports.AutocompleteField = AutocompleteField;
     exports.Avatar = Avatar;
+    exports.AvatarGroup = AvatarGroup;
     exports.Badge = Badge;
     exports.Breadcrumb = Breadcrumb;
     exports.Button = Button;
     exports.CheckboxField = CheckboxField;
     exports.CheckboxGroupField = CheckboxGroupField;
+    exports.Col = Col;
     exports.ColorField = ColorField;
     exports.ContextMenu = ContextMenu;
     exports.ContextMenuGroup = ContextMenuGroup;
@@ -12138,14 +12504,17 @@ var NativeComponents = (function (exports) {
     exports.FieldCollection = FieldCollection;
     exports.FileField = FileField;
     exports.FormControl = FormControl;
+    exports.HStack = HStack;
     exports.HiddenField = HiddenField;
     exports.ImageField = ImageField;
     exports.Menu = Menu;
     exports.MenuDivider = MenuDivider;
     exports.MenuGroup = MenuGroup;
     exports.MenuItem = MenuItem;
+    exports.MenuLink = MenuLink;
     exports.Modal = Modal;
     exports.NumberField = NumberField;
+    exports.Overlay = Overlay;
     exports.Pagination = Pagination;
     exports.PasswordField = PasswordField;
     exports.Popover = Popover;
@@ -12154,13 +12523,15 @@ var NativeComponents = (function (exports) {
     exports.Progress = Progress;
     exports.RadioField = RadioField;
     exports.RangeField = RangeField;
+    exports.Row = Row;
     exports.SelectField = SelectField;
     exports.SimpleTable = SimpleTable;
     exports.Skeleton = Skeleton;
     exports.Slider = Slider;
-    exports.Spinner = Spinner;
+    exports.Spinner = Spinner$1;
     exports.Splitter = Splitter;
     exports.SplitterPanel = SplitterPanel;
+    exports.Stack = Stack;
     exports.Stepper = Stepper;
     exports.StepperStep = StepperStep;
     exports.StringField = StringField;
@@ -12171,6 +12542,8 @@ var NativeComponents = (function (exports) {
     exports.Toast = Toast;
     exports.Tooltip = Tooltip;
     exports.UrlField = UrlField;
+    exports.VStack = VStack;
+    exports.ZStack = ZStack;
 
     return exports;