@xlabs-store/core 0.0.1 → 0.0.2

package/dist/collection/components/x-finder/x-finder.js

@@ -51,7 +51,7 @@ export class XFinder {
         this.itemsResizeObserver?.disconnect();
     }
     initService(config) {
-        this.service = new FinderService(config, (newState) => {
+        this.service = new FinderService(config, newState => {
             this.state = { ...newState };
         });
         this.state = this.service.getState();
@@ -104,7 +104,7 @@ export class XFinder {
                 this.service.setFilterMode('images');
             } }, "Images"))), h("x-flex", { align: "center", gap: "16" }, h("div", null, h("x-input", { placeholder: "Search assets...", prefixIcon: "search", size: "small", style: { width: '240px' }, onXChange: (ev) => this.service.setSearchQuery(ev.detail.value) })), h("x-segmented", { value: this.state.viewMode, options: [
                 { label: 'Grid', value: 'grid', icon: 'grid_view' },
-                { label: 'List', value: 'list', icon: 'list' }
+                { label: 'List', value: 'list', icon: 'list' },
             ], onXChange: (ev) => this.service.setViewMode(ev.detail) }), h("x-flex", { align: "center", gap: "12" }, h("x-icon", { name: "settings", size: "18", color: "#64748b", class: "clickable", onClick: () => this.openSettings() }), h("x-icon", { name: "info", size: "18", color: "#64748b", class: "clickable", onClick: () => this.openInfo() }))))));
     }
     openSettings() {
@@ -143,7 +143,7 @@ export class XFinder {
                     this.service.setFilterMode(fm);
                 this.service.toggleDetails(sd);
                 return true;
-            }
+            },
         });
     }
     openInfo() {
@@ -162,7 +162,7 @@ export class XFinder {
           <div><strong>Selected:</strong> ${selected}</div>
           <div><strong>Storage:</strong> ${storage}</div>
         </div>
-      `
+      `,
         });
     }
     renderSidebar() {
@@ -191,7 +191,7 @@ export class XFinder {
         }));
         const treeData = [rootNode];
         const expandedKeys = ['__root__', ...trail.slice(1).map(t => String(t.id))];
-        return (h("x-sider", { class: "finder-sidebar", width: 240, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", style: { height: '100%' }, justify: 'space-between', gap: "12" }, h("x-button", { type: "primary", style: { width: '100%' }, block: true, size: "large", onClick: () => this.fileInput.click() }, h("x-icon", { slot: "icon", name: "cloud_upload" }), "Upload"))), h("x-layout", { hasSiderProp: false, fixed: true }, h("div", { class: "sidebar-section" }, h("div", { class: "section-title" }, "FOLDERS"), h("x-tree", { treeData: treeData, selectedKeys: [selectedKey], expandedKeys: expandedKeys, showIcon: true, blockNode: true, onXSelect: (ev) => {
+        return (h("x-sider", { class: "finder-sidebar", width: 240, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", style: { height: '100%' }, justify: "space-between", gap: "12" }, h("x-button", { type: "primary", style: { width: '100%' }, block: true, size: "large", onClick: () => this.fileInput.click() }, h("x-icon", { slot: "icon", name: "cloud_upload" }), "Upload"))), h("x-layout", { hasSiderProp: false, fixed: true }, h("div", { class: "sidebar-section" }, h("div", { class: "section-title" }, "FOLDERS"), h("x-tree", { treeData: treeData, selectedKeys: [selectedKey], expandedKeys: expandedKeys, showIcon: true, blockNode: true, onXSelect: (ev) => {
                 if (ev && ev.stopPropagation) {
                     ev.stopPropagation();
                 }
@@ -202,7 +202,7 @@ export class XFinder {
             } }))))));
     }
     renderBreadcrumbs() {
-        return (h("div", null, h("x-breadcrumb", null, this.state.pathTrail.map(p => (h("x-breadcrumb-item", { onClick: (e) => {
+        return (h("div", null, h("x-breadcrumb", null, this.state.pathTrail.map(p => (h("x-breadcrumb-item", { onClick: e => {
                 if (e && e.stopPropagation)
                     e.stopPropagation();
                 this.service.navigateTo(p.id, p.name);
@@ -298,12 +298,12 @@ export class XFinder {
     }
     renderItemThumb(item, isSelected, size) {
         if (item.type === 'folder') {
-            return (h("x-icon", { name: "folder", size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) }));
+            return h("x-icon", { name: "folder", size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) });
         }
         if (this.isImageFile(item) && (item.thumbnail || item.url)) {
-            return (h("x-image", { src: item.thumbnail || item.url, alt: item.name, width: "100%", height: "100%", loading: "lazy", preview: false, style: { pointerEvents: 'none' } }));
+            return h("x-image", { src: item.thumbnail || item.url, alt: item.name, width: "100%", height: "100%", loading: "lazy", preview: false, style: { pointerEvents: 'none' } });
         }
-        return (h("x-icon", { name: this.getFileIconName(item), size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) }));
+        return h("x-icon", { name: this.getFileIconName(item), size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) });
     }
     renderGridItem(item) {
         const isSelected = this.state.selectedItems.some(i => i.id === item.id);
@@ -319,12 +319,12 @@ export class XFinder {
             }, onDblClick: (e) => {
                 e.stopPropagation();
                 item.type === 'folder' ? this.service.navigateTo(item.id, item.name) : this.service.download(item);
-            } }, h("div", { class: "thumbnail", slot: 'cover' }, this.renderItemThumb(item, isSelected, 48), isSelected && h("div", { class: "badge" }, h("x-icon", { name: "check", size: 12 }))), h("div", { class: "info" }, h("div", { class: "name", title: item.name }, displayName), h("div", { class: "meta" }, item.size ? `${item.size} MB` : '-', " \u2022 ", item.mimeType || (item.type === 'folder' ? 'Folder' : ''))))));
+            } }, h("div", { class: "thumbnail", slot: "cover" }, this.renderItemThumb(item, isSelected, 48), isSelected && (h("div", { class: "badge" }, h("x-icon", { name: "check", size: 12 })))), h("div", { class: "info" }, h("div", { class: "name", title: item.name }, displayName), h("div", { class: "meta" }, item.size ? `${item.size} MB` : '-', " \u2022 ", item.mimeType || (item.type === 'folder' ? 'Folder' : ''))))));
     }
     renderListItem(item) {
         const isSelected = this.state.selectedItems.some(i => i.id === item.id);
         const displayName = this.formatMiddleEllipsis(item.name, 28, 16);
-        return (h("div", { class: `list-item ${isSelected ? 'selected' : ''}`, onClick: (e) => {
+        return (h("div", { class: `list-item ${isSelected ? 'selected' : ''}`, onClick: e => {
                 e.stopPropagation();
                 const multi = e.ctrlKey || e.metaKey;
                 if (item.type === 'folder' && !multi) {
@@ -332,7 +332,7 @@ export class XFinder {
                     return;
                 }
                 this.service.selectItem(item, multi);
-            }, onDblClick: (e) => {
+            }, onDblClick: e => {
                 e.stopPropagation();
                 item.type === 'folder' ? this.service.navigateTo(item.id, item.name) : this.service.download(item);
             } }, h("x-flex", { align: "center", gap: "12", style: { flex: '1', minWidth: '0' } }, h("x-icon", { name: this.getFileIconName(item), size: "20", color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) }), h("span", { class: "name", title: item.name }, displayName)), h("span", { class: "type" }, item.mimeType || item.type), h("span", { class: "size" }, item.size ? `${item.size} MB` : '-'), h("span", { class: "date" }, this.formatDate(item.updatedAt))));
@@ -345,18 +345,27 @@ export class XFinder {
         const end = Math.min(items.length - 1, Math.ceil((this.itemsViewportScrollTop + this.itemsViewportHeight) / itemHeight) + overscan);
         const visibleItems = items.slice(start, end + 1);
         const offsetY = start * itemHeight;
-        return (h("div", { class: "virtual-spacer", style: { height: `${totalHeight}px` } }, h("div", { class: "virtual-items", style: { transform: `translateY(${offsetY}px)` } }, visibleItems.map((item) => (h("div", { key: String(item.id), style: { height: `${itemHeight}px` } }, this.renderListItem(item)))))));
+        return (h("div", { class: "virtual-spacer", style: { height: `${totalHeight}px` } }, h("div", { class: "virtual-items", style: { transform: `translateY(${offsetY}px)` } }, visibleItems.map(item => (h("div", { key: String(item.id), style: { height: `${itemHeight}px` } }, this.renderListItem(item)))))));
     }
     renderDetails() {
         if (!this.state.showDetails || this.state.selectedItems.length === 0)
             return null;
         const item = this.state.selectedItems[0];
         const displayName = this.formatMiddleEllipsis(item.name, 28, 16);
-        return (h("x-sider", { class: "details-sidebar", width: 320, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", justify: 'space-between', gap: "12" }, h("x-flex", { flex: '1', align: "center", gap: "4" }, h("x-typography", { type: 'title', level: 4 }, "Details")), h("x-icon", { name: "close", onClick: () => this.service.toggleDetails(false), class: "clickable" }))), h("x-layout", { hasSiderProp: false, fixed: true }, h("x-content", null, h("div", { class: "details-content" }, h("div", { class: "preview" }, this.isImageFile(item) && (item.url || item.thumbnail) ? (h("x-image", { src: item.url || item.thumbnail, alt: item.name, width: "100%", height: "100%", loading: "lazy", placeholder: true, preview: true })) : (h("x-icon", { name: item.type === 'folder' ? 'folder' : this.getFileIconName(item), size: "80", color: "#cbd5e1" }))), h("div", { class: "info-section" }, h("x-flex", { align: "center", gap: "8", style: { marginBottom: '4px', minWidth: '0' } }, h("x-icon", { name: "description", size: 16, color: "var(--x-color-primary)" }), h("div", { class: "filename", title: item.name }, displayName)), h("div", { class: "time" }, item.updatedAt ? `MODIFIED ${this.formatDate(item.updatedAt)}` : '')), h("x-descriptions", { column: 1, size: "small", style: { marginTop: '24px' } }, h("x-descriptions-item", { label: "Type" }, item.mimeType || item.type), h("x-descriptions-item", { label: "Size" }, item.size ? `${item.size} MB` : '-'), h("x-descriptions-item", { label: "Dimensions" }, item.dimensions || '-'), h("x-descriptions-item", { label: "Created" }, this.formatDate(item.createdAt)), h("x-descriptions-item", { label: "Modified" }, this.formatDate(item.updatedAt)))))), h("x-footer", null, h("div", { class: "actions" }, h("div", { class: "label" }, "QUICK ACTIONS"), h("x-flex", { justify: "space-around", style: { marginTop: '16px' } }, h("div", { class: "action-btn", onClick: (e) => { e.stopPropagation(); this.service.download(item); } }, h("x-icon", { name: "download", size: 20 }), h("span", null, "Download")), h("div", { class: "action-btn", onClick: (e) => { e.stopPropagation(); this.service.rename(item); } }, h("x-icon", { name: "edit", size: 20 }), h("span", null, "Rename")), h("div", { class: "action-btn danger", onClick: (e) => { e.stopPropagation(); this.service.delete(item); } }, h("x-icon", { name: "delete", size: 20 }), h("span", null, "Delete"))))))));
+        return (h("x-sider", { class: "details-sidebar", width: 320, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", justify: "space-between", gap: "12" }, h("x-flex", { flex: "1", align: "center", gap: "4" }, h("x-typography", { type: "title", level: 4 }, "Details")), h("x-icon", { name: "close", onClick: () => this.service.toggleDetails(false), class: "clickable" }))), h("x-layout", { hasSiderProp: false, fixed: true }, h("x-content", null, h("div", { class: "details-content" }, h("div", { class: "preview" }, this.isImageFile(item) && (item.url || item.thumbnail) ? (h("x-image", { src: item.url || item.thumbnail, alt: item.name, width: "100%", height: "100%", loading: "lazy", placeholder: true, preview: true })) : (h("x-icon", { name: item.type === 'folder' ? 'folder' : this.getFileIconName(item), size: "80", color: "#cbd5e1" }))), h("div", { class: "info-section" }, h("x-flex", { align: "center", gap: "8", style: { marginBottom: '4px', minWidth: '0' } }, h("x-icon", { name: "description", size: 16, color: "var(--x-color-primary)" }), h("div", { class: "filename", title: item.name }, displayName)), h("div", { class: "time" }, item.updatedAt ? `MODIFIED ${this.formatDate(item.updatedAt)}` : '')), h("x-descriptions", { column: 1, size: "small", style: { marginTop: '24px' } }, h("x-descriptions-item", { label: "Type" }, item.mimeType || item.type), h("x-descriptions-item", { label: "Size" }, item.size ? `${item.size} MB` : '-'), h("x-descriptions-item", { label: "Dimensions" }, item.dimensions || '-'), h("x-descriptions-item", { label: "Created" }, this.formatDate(item.createdAt)), h("x-descriptions-item", { label: "Modified" }, this.formatDate(item.updatedAt)))))), h("x-footer", null, h("div", { class: "actions" }, h("div", { class: "label" }, "QUICK ACTIONS"), h("x-flex", { justify: "space-around", style: { marginTop: '16px' } }, h("div", { class: "action-btn", onClick: e => {
+                e.stopPropagation();
+                this.service.download(item);
+            } }, h("x-icon", { name: "download", size: 20 }), h("span", null, "Download")), h("div", { class: "action-btn", onClick: e => {
+                e.stopPropagation();
+                this.service.rename(item);
+            } }, h("x-icon", { name: "edit", size: 20 }), h("span", null, "Rename")), h("div", { class: "action-btn danger", onClick: e => {
+                e.stopPropagation();
+                this.service.delete(item);
+            } }, h("x-icon", { name: "delete", size: 20 }), h("span", null, "Delete"))))))));
     }
     renderFooter() {
         const hasSelection = this.state.selectedItems.length > 0;
-        return (h("x-footer", { class: "selection-footer" }, h("x-flex", { justify: "space-between", align: "center", style: { width: '100%' } }, h("x-flex", { align: "center", gap: "8" }, hasSelection && (h(Fragment, null, h("x-icon", { name: "check_circle", size: "18", color: "var(--x-color-primary)" }), h("span", { class: "text" }, this.state.selectedItems.length, " items selected")))), h("x-flex", { align: "center", gap: "8" }, h("x-space", null, h("x-button", { type: "text", onClick: (e) => {
+        return (h("x-footer", { class: "selection-footer" }, h("x-flex", { justify: "space-between", align: "center", style: { width: '100%' } }, h("x-flex", { align: "center", gap: "8" }, hasSelection && (h(Fragment, null, h("x-icon", { name: "check_circle", size: "18", color: "var(--x-color-primary)" }), h("span", { class: "text" }, this.state.selectedItems.length, " items selected")))), h("x-flex", { align: "center", gap: "8" }, h("x-space", null, h("x-button", { type: "text", onClick: e => {
                 e.stopPropagation();
                 this.service.clearSelection();
                 if (this.displayMode === 'dialog') {
@@ -368,12 +377,12 @@ export class XFinder {
     render() {
         const isGrid = this.state.viewMode === 'grid';
         const items = this.state.filteredItems || [];
-        const content = (h("x-layout", { key: '5094b9695720b295e038e97f3f18726e926970ba', class: "finder-container", fixed: true }, this.renderHeader(), h("x-layout", { key: '123f21a544c21a73658e4ff9a98458bb691e9104', hasSiderProp: true, fixed: false }, this.renderSidebar(), h("x-layout", { key: 'aea9694a8167a070dd16102dcaa1a8262d580dcd', hasSiderProp: true, fixed: true }, h("x-content", { key: '5f27961a6e0dbe85b16b5ad590429bcb0515eaf5', class: "main-content" }, this.renderBreadcrumbs(), h("div", { key: '07ca6371d162b9f0a3f99e5db0c1f2e514765b47', class: {
+        const content = (h("x-layout", { key: '5fb749654a407a02bb02ae79874980b88f5684b2', class: "finder-container", fixed: true }, this.renderHeader(), h("x-layout", { key: 'fece82e9563ec289707611eaa6b8fd5fb893e076', hasSiderProp: true, fixed: false }, this.renderSidebar(), h("x-layout", { key: 'b1a10e0b023d40a6d8366163e9d59ed40d119af9', hasSiderProp: true, fixed: true }, h("x-content", { key: '7bc1a35be5c52d40153f505a1ee326b3c78b8a40', class: "main-content" }, this.renderBreadcrumbs(), h("div", { key: '325d305b5a4b1164e775ae6af33098804b5cb710', class: {
                 'items-viewport': true,
                 'items-viewport-grid': isGrid,
                 'items-viewport-list': !isGrid,
-            }, ref: this.setItemsViewportRef, onScroll: this.handleItemsViewportScroll }, h("x-spin", { key: '61612ab7ff99bfb22649673f8c791ce95a749007', spinning: this.state.loading, style: { width: '100%' } }, items.length === 0 ? (h("div", { class: "empty-center" }, h("x-empty", { description: "No items found" }))) : isGrid ? (h("div", { class: "items-grid" }, h("x-row", { gutter: 24 }, items.map((item) => this.renderGridItem(item))))) : (h("div", { class: "items-list" }, this.renderVirtualList(items))))))), this.renderDetails()), this.renderFooter(), h("input", { key: 'a613a663e1cf46ea33b807544a853bdbcb7f9c05', type: "file", ref: (el) => (this.fileInput = el), style: { display: 'none' }, onChange: this.handleFileSelected })));
-        return (h(Host, { key: 'ee145b2cabb7020bf1db35477ed2299774408844' }, h("div", { key: 'f56a8f764b044a4842c5cb121e393475db16b762', class: "page-wrapper" }, content)));
+            }, ref: this.setItemsViewportRef, onScroll: this.handleItemsViewportScroll }, h("x-spin", { key: '4d1ea5d41d6dd9131792ac6e02541a069847d9f1', spinning: this.state.loading, style: { width: '100%' } }, items.length === 0 ? (h("div", { class: "empty-center" }, h("x-empty", { description: "No items found" }))) : isGrid ? (h("div", { class: "items-grid" }, h("x-row", { gutter: 24 }, items.map(item => this.renderGridItem(item))))) : (h("div", { class: "items-list" }, this.renderVirtualList(items))))))), this.renderDetails()), this.renderFooter(), h("input", { key: 'deeba5f21ec0045934b51c5921e286a355d11142', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: this.handleFileSelected })));
+        return (h(Host, { key: '8e6023d093104d8c80071a725aca32fe21c8414b' }, h("div", { key: '02308f43892839e45acac1fbdfd6346208dce7d5', class: "page-wrapper" }, content)));
     }
     static get is() { return "x-finder"; }
     static get encapsulation() { return "shadow"; }
@@ -408,7 +417,7 @@ export class XFinder {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Interface mode for the finder. \n'page' takes up full height/width of container.\n'dialog' shows up in a modal."
+                    "text": "Interface mode for the finder.\n'page' takes up full height/width of container.\n'dialog' shows up in a modal."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/x-flex/x-flex.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-flex/x-flex.js

@@ -82,13 +82,11 @@ export class XFlex {
             style['--x-flex-flex'] = flex;
         // Convert numeric gap (or numeric string) to px, otherwise keep raw.
         if (gap !== undefined) {
-            style['--x-flex-gap'] = typeof gap === 'number' || ((typeof gap === 'string' && /^[0-9]+$/.test(gap)))
-                ? `${gap}px`
-                : gap;
+            style['--x-flex-gap'] = typeof gap === 'number' || (typeof gap === 'string' && /^[0-9]+$/.test(gap)) ? `${gap}px` : gap;
         }
         // Render with configurable tag name.
         const Tag = component;
-        return (h(Host, { key: 'b51bfd9b202bf108f0df07a7d5a75b1dd073882b' }, h(Tag, { key: '3913f415824f8b22c2c7528438a75bb07c392fa8', class: "x-flex", style: style }, h("slot", { key: '93823b9e3240bade5e929c86253974247e5e35be' }))));
+        return (h(Host, { key: '14edd343a4bc3d52af6675389fdb9a27f92d1f11' }, h(Tag, { key: 'da7ef1589c12346269af220d8d31466adfeb7dd1', class: "x-flex", style: style }, h("slot", { key: '261f3fa4834c746042191c05ed5dba8dcd314c00' }))));
     }
     static get is() { return "x-flex"; }
     static get encapsulation() { return "shadow"; }
@@ -113,7 +111,7 @@ export class XFlex {
                     "references": {
                         "FlexAlign": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-flex/x-flex.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-flex/x-flex.tsx",
                             "id": "src/components/x-flex/x-flex.tsx::FlexAlign"
                         }
                     }
@@ -141,7 +139,7 @@ export class XFlex {
                     "references": {
                         "FlexJustify": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-flex/x-flex.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-flex/x-flex.tsx",
                             "id": "src/components/x-flex/x-flex.tsx::FlexJustify"
                         }
                     }
@@ -192,7 +190,7 @@ export class XFlex {
                     "references": {
                         "FlexWrap": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-flex/x-flex.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-flex/x-flex.tsx",
                             "id": "src/components/x-flex/x-flex.tsx::FlexWrap"
                         }
                     }

package/dist/collection/components/x-float-button/x-float-button.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-float-button/x-float-button.js

@@ -69,10 +69,10 @@ export class XFloatButton {
             [`x-float-btn-${type}`]: true,
             [`x-float-btn-${shape}`]: true,
         };
-        const content = (h("div", { key: '6578a1485b4ac4435173e705e70cf11443563681', class: "x-float-btn-body" }, h("div", { key: '718fe35102bed51d9444c5a9726efef149e2a4fe', class: "x-float-btn-content" }, h("div", { key: 'dcd91a0e83f2e973c88546525aafe2c8574c582e', class: "x-float-btn-icon" }, h("slot", { key: '4ea0892ea7e6135a206d4fb9fecb37ff2f73f12c', name: "icon" })), description && h("div", { key: '080657e737995cfd8389b350c0a0ce447594762b', class: "x-float-btn-description" }, description), h("slot", { key: '1bb44cab04c8d259c90bf7b52ccda9e88efb4884', name: "description" }))));
+        const content = (h("div", { key: 'c7d230e97efbcae2f9dedfa4a2313e2b4e75889b', class: "x-float-btn-body" }, h("div", { key: '42baa91c3a658ae63bd8df20685d8f453381296c', class: "x-float-btn-content" }, h("div", { key: '1d87b8a5cd7bcd98b53148394d2c3b1ad36ecedb', class: "x-float-btn-icon" }, h("slot", { key: 'c89a98690ac977549c26f12625557d8edaf9f79c', name: "icon" })), description && h("div", { key: '1c21a35aff6f78cb72208a148c2f4137d5ce74f3', class: "x-float-btn-description" }, description), h("slot", { key: '7eafd16a6a77874596ee56e1e69a41fba245c5a4', name: "description" }))));
         const Element = href ? 'a' : 'button';
         const attrs = href ? { href, target } : { type: 'button' };
-        return (h(Host, { key: '1141e40b36259b15c3b8b57380e9d45f6a5f0bc9', title: tooltip }, h(Element, { key: '18f2891c388c8473db1d693a1557731bac8fbfdf', class: classes, ...attrs, onClick: this.handleClick }, content)));
+        return (h(Host, { key: '1f9b5f62b1434a377b1f125ee02f4e38c2de641f', title: tooltip }, h(Element, { key: '6f3d7b67cec99f0e6e1c00c0bc62af3b1b6a302e', class: classes, ...attrs, onClick: this.handleClick }, content)));
     }
     static get is() { return "x-float-button"; }
     static get encapsulation() { return "shadow"; }
@@ -119,7 +119,7 @@ export class XFloatButton {
                     "references": {
                         "FloatButtonType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-float-button/x-float-button.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-float-button/x-float-button.tsx",
                             "id": "src/components/x-float-button/x-float-button.tsx::FloatButtonType"
                         }
                     }
@@ -148,7 +148,7 @@ export class XFloatButton {
                     "references": {
                         "FloatButtonShape": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-float-button/x-float-button.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-float-button/x-float-button.tsx",
                             "id": "src/components/x-float-button/x-float-button.tsx::FloatButtonShape"
                         }
                     }

package/dist/collection/components/x-footer/x-footer.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-footer/x-footer.js

@@ -12,7 +12,7 @@ export class XFooter {
      * </x-footer>
      */
     render() {
-        return (h(Host, { key: 'fca5067b1a4ed92c02acae453f5d9424bf633ceb' }, h("footer", { key: '8be6dbeb9ecf630fef0313c2eda67ab9a800d985', class: "x-layout-footer" }, h("slot", { key: 'c000b07be1ac3b31581061d96cfb243a653d29bf' }))));
+        return (h(Host, { key: '766c5266d4faacb07d956acc3b1c4d0946cb13f9' }, h("footer", { key: '1b0f4c58b3725f80e4bef59605f5af530ec76cad', class: "x-layout-footer" }, h("slot", { key: 'f980ab89799e58f459a60ba407e281fc616bbc3c' }))));
     }
     static get is() { return "x-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-form/x-form.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-form/x-form.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { FormGroup } from "../../utils/form/core/form-group";
 export class XForm {
+    el;
     /**
      * Form layout
      * @example
@@ -45,6 +46,10 @@ export class XForm {
      * Trigger after submitting the form and verifying data failed
      */
     xFinishFailed;
+    /**
+     * Trigger after resetting the form
+     */
+    xReset;
     /**
      * Submit the form
      */
@@ -63,6 +68,15 @@ export class XForm {
             }
         }
     }
+    /**
+     * Reset the form
+     */
+    async reset() {
+        if (this.form) {
+            this.form.reset(this.initialValues);
+            this.xReset.emit();
+        }
+    }
     getErrorFields() {
         if (!this.form)
             return [];
@@ -82,6 +96,39 @@ export class XForm {
         e.preventDefault();
         this.submit();
     };
+    handleReset = (e) => {
+        e.preventDefault();
+        this.reset();
+    };
+    handleHostClick(ev) {
+        const path = ev.composedPath();
+        for (const el of path) {
+            if (el instanceof HTMLElement) {
+                const tagName = el.tagName.toUpperCase();
+                const isNativeSubmit = tagName === 'BUTTON' && el.type === 'submit';
+                const isXSubmit = tagName === 'X-BUTTON' && (el.htmlType === 'submit' || el.getAttribute('html-type') === 'submit');
+                if (isNativeSubmit || isXSubmit) {
+                    this.submit();
+                    break;
+                }
+                const isNativeReset = tagName === 'BUTTON' && el.type === 'reset';
+                const isXReset = tagName === 'X-BUTTON' && (el.htmlType === 'reset' || el.getAttribute('html-type') === 'reset');
+                if (isNativeReset || isXReset) {
+                    this.reset();
+                    break;
+                }
+            }
+        }
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Enter' && !ev.defaultPrevented) {
+            const target = ev.target;
+            const tagName = target.tagName.toUpperCase();
+            if (tagName !== 'TEXTAREA' && tagName !== 'X-TEXTAREA') {
+                this.submit();
+            }
+        }
+    }
     handleInitialValuesChange(newValue) {
         if (this.form && newValue) {
             this.form.patchValue(newValue, { emitEvent: true });
@@ -94,12 +141,12 @@ export class XForm {
         this.handleInitialValuesChange(this.initialValues);
     }
     render() {
-        return (h(Host, { key: 'ebb7831eae382b4924a330a515ce6fbcd5740a5e', class: {
+        return (h(Host, { key: 'd6f8a01dd1a3b4f592de43b6a55a7d23fb39d75c', class: {
                 'x-form': true,
                 [`x-form-${this.layout}`]: true,
                 [`x-form-${this.size}`]: true,
                 'x-form-hide-required-mark': this.hideRequiredMark,
-            } }, h("form", { key: 'fdce9f05232a5f9323bd10264d078cc6c6f25bcf', name: this.name, onSubmit: this.handleSubmit }, h("slot", { key: '12fbc506ce06538757fa6e51846108ddb886235a' }))));
+            } }, h("form", { key: '8cebba32c468fa27c72d71bc4455c7c7f543d77a', name: this.name, onSubmit: this.handleSubmit, onReset: this.handleReset }, h("slot", { key: '32f5b3c4b4521977c4da7de889719f67a2bb127a' }))));
     }
     static get is() { return "x-form"; }
     static get encapsulation() { return "shadow"; }
@@ -306,7 +353,7 @@ export class XForm {
                     "text": "Trigger after submitting the form and verifying data failed"
                 },
                 "complexType": {
-                    "original": "{\r\n    values: Record<string, unknown>;\r\n    errorFields: Array<{ name: string[]; errors: string[] }>;\r\n    outOfDate: boolean;\r\n  }",
+                    "original": "{\n    values: Record<string, unknown>;\n    errorFields: Array<{ name: string[]; errors: string[] }>;\n    outOfDate: boolean;\n  }",
                     "resolved": "{ values: Record<string, unknown>; errorFields: { name: string[]; errors: string[]; }[]; outOfDate: boolean; }",
                     "references": {
                         "Record": {
@@ -319,6 +366,21 @@ export class XForm {
                         }
                     }
                 }
+            }, {
+                "method": "xReset",
+                "name": "xReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger after resetting the form"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -343,13 +405,46 @@ export class XForm {
                     "text": "Submit the form",
                     "tags": []
                 }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset the form",
+                    "tags": []
+                }
             }
         };
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "initialValues",
                 "methodName": "handleInitialValuesChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleHostClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/x-form-builder/services/apis/api-client.js

@@ -61,7 +61,7 @@ export class ApiClient {
         if (!queryParams?.length)
             return url;
         const urlObj = new URL(url);
-        queryParams.forEach((p) => {
+        queryParams.forEach(p => {
             if (p.enabled)
                 urlObj.searchParams.append(p.key, p.value);
         });
@@ -75,7 +75,7 @@ export class ApiClient {
         const options = {
             method,
             headers: this.buildHeaders(),
-            ...(method && !['GET', 'HEAD'].includes(method) ? { body: this.buildBody() } : {})
+            ...(method && !['GET', 'HEAD'].includes(method) ? { body: this.buildBody() } : {}),
         };
         return options;
     }
@@ -84,7 +84,7 @@ export class ApiClient {
      */
     buildHeaders() {
         const headers = {};
-        this.config.headers?.forEach((h) => {
+        this.config.headers?.forEach(h => {
             if (h.enabled)
                 headers[h.key] = h.value;
         });
@@ -116,10 +116,14 @@ export class ApiClient {
      */
     getContentType() {
         switch (this.config.bodyType) {
-            case 'form-data': return 'multipart/form-data';
-            case 'x-www-form-urlencoded': return 'application/x-www-form-urlencoded';
-            case 'raw': return 'application/json';
-            default: return 'application/json';
+            case 'form-data':
+                return 'multipart/form-data';
+            case 'x-www-form-urlencoded':
+                return 'application/x-www-form-urlencoded';
+            case 'raw':
+                return 'application/json';
+            default:
+                return 'application/json';
         }
     }
     /**
@@ -128,11 +132,16 @@ export class ApiClient {
     buildBody() {
         const { bodyType, bodyContent } = this.config;
         switch (bodyType) {
-            case 'none': return null;
-            case 'raw': return bodyContent ?? '';
-            case 'form-data': return this.buildFormData();
-            case 'x-www-form-urlencoded': return this.buildUrlEncoded();
-            default: return null;
+            case 'none':
+                return null;
+            case 'raw':
+                return bodyContent ?? '';
+            case 'form-data':
+                return this.buildFormData();
+            case 'x-www-form-urlencoded':
+                return this.buildUrlEncoded();
+            default:
+                return null;
         }
     }
     /**
@@ -140,7 +149,7 @@ export class ApiClient {
      */
     buildFormData() {
         const formData = new FormData();
-        this.config.bodyParams?.forEach((param) => {
+        this.config.bodyParams?.forEach(param => {
             if (param.enabled) {
                 if (param.type === 'file') {
                     // Xử lý file upload - giá trị phải là File object
@@ -157,7 +166,7 @@ export class ApiClient {
      */
     buildUrlEncoded() {
         const params = new URLSearchParams();
-        this.config.bodyParams?.forEach((param) => {
+        this.config.bodyParams?.forEach(param => {
             if (param.enabled)
                 params.append(param.key, param.value);
         });
@@ -180,7 +189,7 @@ export class ApiClient {
      * Delay helper for retry
      */
     delay(ms) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
+        return new Promise(resolve => setTimeout(resolve, ms));
     }
     /**
      * Cancel request

package/dist/collection/components/x-form-builder/services/forms/form-array.js

@@ -14,7 +14,7 @@ export class FormArray extends AbstractControl {
         }
         super(validators, asyncValidatorsList);
         this._controls = controls;
-        controls.forEach((control) => {
+        controls.forEach(control => {
             control.setParent(this);
         });
         this.updateValueAndValidity({ emitEvent: false });
@@ -23,9 +23,7 @@ export class FormArray extends AbstractControl {
         return this._controls;
     }
     get value() {
-        return this._controls
-            .filter((control) => !control.disabled)
-            .map((control) => control.value);
+        return this._controls.filter(control => !control.disabled).map(control => control.value);
     }
     get length() {
         return this._controls.length;
@@ -87,6 +85,6 @@ export class FormArray extends AbstractControl {
         this.updateValueAndValidity(options);
     }
     getRawValue() {
-        return this._controls.map((control) => control.value);
+        return this._controls.map(control => control.value);
     }
 }