atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/assets/js/demos/advanced-data-table-demo.js

@@ -1540,45 +1540,45 @@ export function initAdvancedDataTableDemo() {
       if (bSpin) bSpin.addEventListener('click', () => loadWithSpinner());
       loadWithSkeleton();
     }, 100);
-  }
-
-  function loadWithSkeleton() {
-    const container = document.getElementById('skeletonDemo');
-    if (container) {
-      container.innerHTML = '<ui-advanced-data-table id="skeletonTable" loading="true" show-skeleton="true" skeleton-rows="5"></ui-advanced-data-table>';
 
-      setTimeout(() => {
-        const table = document.getElementById('skeletonTable');
-        if (table) {
-          table.columns = columns.slice(0, 5);
+    function loadWithSkeleton() {
+      const container = document.getElementById('skeletonDemo');
+      if (container) {
+        container.innerHTML = '<ui-advanced-data-table id="skeletonTable" loading="true" show-skeleton="true" skeleton-rows="5"></ui-advanced-data-table>';
 
-          setTimeout(() => {
-            table.data = sampleData.slice(0, 5);
-            table.loading = false;
-            table.pagination = false;
-          }, 2000);
-        }
-      }, 100);
+        setTimeout(() => {
+          const table = document.getElementById('skeletonTable');
+          if (table) {
+            table.columns = columns.slice(0, 5);
+
+            setTimeout(() => {
+              table.data = sampleData.slice(0, 5);
+              table.loading = false;
+              table.pagination = false;
+            }, 2000);
+          }
+        }, 100);
+      }
     }
-  }
 
-  function loadWithSpinner() {
-    const container = document.getElementById('skeletonDemo');
-    if (container) {
-      container.innerHTML = '<ui-advanced-data-table id="spinnerTable" loading="true" show-skeleton="false"></ui-advanced-data-table>';
+    function loadWithSpinner() {
+      const container = document.getElementById('skeletonDemo');
+      if (container) {
+        container.innerHTML = '<ui-advanced-data-table id="spinnerTable" loading="true" show-skeleton="false"></ui-advanced-data-table>';
 
-      setTimeout(() => {
-        const table = document.getElementById('spinnerTable');
-        if (table) {
-          table.columns = columns.slice(0, 5);
-
-          setTimeout(() => {
-            table.data = sampleData.slice(0, 5);
-            table.loading = false;
-            table.pagination = false;
-          }, 2000);
-        }
-      }, 100);
+        setTimeout(() => {
+          const table = document.getElementById('spinnerTable');
+          if (table) {
+            table.columns = columns.slice(0, 5);
+
+            setTimeout(() => {
+              table.data = sampleData.slice(0, 5);
+              table.loading = false;
+              table.pagination = false;
+            }, 2000);
+          }
+        }, 100);
+      }
     }
   }
 
@@ -1694,32 +1694,32 @@ export function initAdvancedDataTableDemo() {
         if (bClear) bClear.addEventListener('click', () => clearGrouping());
       }
     }, 100);
-  }
 
-  const groupByDepartment = function () {
-    const table = document.getElementById('rowGroupTable');
-    if (table) {
-      table.groupBy = 'department';
-      table.expandGroupsByDefault = true;
-      table.showGroupCount = true;
+    function groupByDepartment() {
+      const table = document.getElementById('rowGroupTable');
+      if (table) {
+        table.groupBy = 'department';
+        table.expandGroupsByDefault = true;
+        table.showGroupCount = true;
+      }
     }
-  };
 
-  const groupByStatus = function () {
-    const table = document.getElementById('rowGroupTable');
-    if (table) {
-      table.groupBy = 'status';
-      table.expandGroupsByDefault = true;
-      table.showGroupCount = true;
+    function groupByStatus() {
+      const table = document.getElementById('rowGroupTable');
+      if (table) {
+        table.groupBy = 'status';
+        table.expandGroupsByDefault = true;
+        table.showGroupCount = true;
+      }
     }
-  };
 
-  const clearGrouping = function () {
-    const table = document.getElementById('rowGroupTable');
-    if (table) {
-      table.groupBy = '';
+    function clearGrouping() {
+      const table = document.getElementById('rowGroupTable');
+      if (table) {
+        table.groupBy = '';
+      }
     }
-  };
+  }
 
   function showInputTypes() {
     tableContainer.innerHTML = `
@@ -1837,185 +1837,184 @@ export function initAdvancedDataTableDemo() {
 
       loadCombinedDemo();
     }, 100);
-  }
 
-  function loadCombinedDemo() {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.loading = true;
-      updatePlaygroundStatus();
+    function loadCombinedDemo() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.loading = true;
+        updatePlaygroundStatus();
 
-      setTimeout(() => {
-        table.columns = [
-          { id: 'id', field: 'id', label: 'ID', width: '70px', sortable: true },
-          {
-            id: 'personal',
-            label: 'Personal Info',
-            children: [
-              {
-                id: 'avatar',
-                field: 'avatar',
-                label: 'Avatar',
-                type: 'image',
-                align: 'center',
-                width: '80px',
-                imageStyle: { width: '40px', height: '40px', borderRadius: '50%' },
-              },
-              { id: 'name', field: 'name', label: 'Name', sortable: true, editable: true },
-              { id: 'email', field: 'email', label: 'Email', type: 'email', editable: true },
-            ],
-          },
-          {
-            id: 'work',
-            label: 'Work Details',
-            children: [
-              { id: 'department', field: 'department', label: 'Department', sortable: true, groupable: true },
-              { id: 'role', field: 'role', label: 'Role' },
-              {
-                id: 'salary',
-                field: 'salary',
-                label: 'Salary',
-                format: function (v) {
-                  return '$' + v.toLocaleString();
+        setTimeout(() => {
+          table.columns = [
+            { id: 'id', field: 'id', label: 'ID', width: '70px', sortable: true },
+            {
+              id: 'personal',
+              label: 'Personal Info',
+              children: [
+                {
+                  id: 'avatar',
+                  field: 'avatar',
+                  label: 'Avatar',
+                  type: 'image',
+                  align: 'center',
+                  width: '80px',
+                  imageStyle: { width: '40px', height: '40px', borderRadius: '50%' },
                 },
-              },
-            ],
-          },
-          {
-            id: 'status_group',
-            label: 'Status & Performance',
-            children: [
-              { id: 'status', field: 'status', label: 'Status', groupable: true },
-              { id: 'rating', field: 'rating', label: 'Rating', type: 'rating', editable: true, maxRating: 5, align: 'center' },
-              { id: 'active', field: 'active', label: 'Active', type: 'switch', editable: true, align: 'center' },
-            ],
-          },
-        ];
-        table.data = sampleData;
-        table.loading = false;
-        table.columnGrouping = true;
-        table.sortable = true;
-        table.filterable = true;
-        table.searchable = true;
-        table.pagination = true;
-        table.pageSize = 5;
-        table.editable = false;
-        table.groupBy = '';
-        table.showActions = false;
-        updatePlaygroundStatus();
-      }, 2000);
+                { id: 'name', field: 'name', label: 'Name', sortable: true, editable: true },
+                { id: 'email', field: 'email', label: 'Email', type: 'email', editable: true },
+              ],
+            },
+            {
+              id: 'work',
+              label: 'Work Details',
+              children: [
+                { id: 'department', field: 'department', label: 'Department', sortable: true, groupable: true },
+                { id: 'role', field: 'role', label: 'Role' },
+                {
+                  id: 'salary',
+                  field: 'salary',
+                  label: 'Salary',
+                  format: function (v) {
+                    return '$' + v.toLocaleString();
+                  },
+                },
+              ],
+            },
+            {
+              id: 'status_group',
+              label: 'Status & Performance',
+              children: [
+                { id: 'status', field: 'status', label: 'Status', groupable: true },
+                { id: 'rating', field: 'rating', label: 'Rating', type: 'rating', editable: true, maxRating: 5, align: 'center' },
+                { id: 'active', field: 'active', label: 'Active', type: 'switch', editable: true, align: 'center' },
+              ],
+            },
+          ];
+          table.data = sampleData;
+          table.loading = false;
+          table.columnGrouping = true;
+          table.sortable = true;
+          table.filterable = true;
+          table.searchable = true;
+          table.pagination = true;
+          table.pageSize = 5;
+          table.editable = false;
+          table.groupBy = '';
+          table.showActions = false;
+          updatePlaygroundStatus();
+        }, 2000);
+      }
     }
-  }
 
-  function updatePlaygroundStatus() {
-    const table = document.getElementById('combinedTable');
-    const statusText = document.getElementById('statusText');
-    if (!table || !statusText) return;
-
-    const features = [];
-    if (table.loading) features.push('Loading');
-    if (table.selectable) features.push('Selection');
-    if (table.editable) features.push('Editable');
-    if (table.groupBy) features.push('Grouped by ' + table.groupBy);
-    if (table.showActions) features.push('Row Actions');
-    if (table.columnGrouping) features.push('Column Groups');
-    if (table.sortable) features.push('Sortable');
-    if (table.filterable) features.push('Filterable');
-    if (table.filterable) features.push('Filterable');
-    if (table.pagination) features.push('Pagination');
-    if (table.treeData) features.push('Tree Data');
-
-    statusText.textContent = features.length > 0 ? features.join(', ') : 'None';
-  }
-
-  const toggleSkeleton = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.loading = !table.loading;
-      updatePlaygroundStatus();
+    function updatePlaygroundStatus() {
+      const table = document.getElementById('combinedTable');
+      const statusText = document.getElementById('statusText');
+      if (!table || !statusText) return;
+
+      const features = [];
+      if (table.loading) features.push('Loading');
+      if (table.selectable) features.push('Selection');
+      if (table.editable) features.push('Editable');
+      if (table.groupBy) features.push('Grouped by ' + table.groupBy);
+      if (table.showActions) features.push('Row Actions');
+      if (table.columnGrouping) features.push('Column Groups');
+      if (table.sortable) features.push('Sortable');
+      if (table.filterable) features.push('Filterable');
+      if (table.pagination) features.push('Pagination');
+      if (table.treeData) features.push('Tree Data');
+
+      statusText.textContent = features.length > 0 ? features.join(', ') : 'None';
     }
-  };
 
-  const toggleGrouping = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      if (table.groupBy) {
-        table.groupBy = '';
-      } else {
-        table.groupBy = 'department';
-        table.expandGroupsByDefault = true;
-        table.showGroupCount = true;
+    function toggleSkeleton() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.loading = !table.loading;
+        updatePlaygroundStatus();
       }
-      updatePlaygroundStatus();
     }
-  };
 
-  const toggleSelection = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.selectable = !table.selectable;
-      updatePlaygroundStatus();
+    function toggleGrouping() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        if (table.groupBy) {
+          table.groupBy = '';
+        } else {
+          table.groupBy = 'department';
+          table.expandGroupsByDefault = true;
+          table.showGroupCount = true;
+        }
+        updatePlaygroundStatus();
+      }
     }
-  };
 
-  const toggleActions = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.showActions = !table.showActions;
-      updatePlaygroundStatus();
+    function toggleSelection() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.selectable = !table.selectable;
+        updatePlaygroundStatus();
+      }
     }
-  };
 
-  const toggleEditable = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.editable = !table.editable;
-      updatePlaygroundStatus();
+    function toggleActions() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.showActions = !table.showActions;
+        updatePlaygroundStatus();
+      }
     }
-  };
 
-  const toggleTreeMode = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.treeData = !table.treeData;
+    function toggleEditable() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.editable = !table.editable;
+        updatePlaygroundStatus();
+      }
+    }
 
-      if (table.treeData) {
-        // Switch to tree data structure
-        table.data = [
-          {
-            id: 'd1',
-            name: 'Engineering',
-            role: 'Department',
-            status: 'Active',
-            children: [
-              { id: 1, name: 'John Doe', role: 'Senior Developer', status: 'Active' },
-              { id: 2, name: 'Jane Smith', role: 'Junior Developer', status: 'Active' },
-            ],
-          },
-          {
-            id: 'd2',
-            name: 'Marketing',
-            role: 'Department',
-            status: 'Active',
-            children: [{ id: 4, name: 'Alice Williams', role: 'Sales Rep', status: 'On Leave' }],
-          },
-        ];
-        // Simplified columns for tree view
-        table.columns = [
-          { id: 'name', field: 'name', label: 'Name', sortable: true, width: '250px' },
-          { id: 'role', field: 'role', label: 'Role', sortable: true },
-          { id: 'status', field: 'status', label: 'Status', sortable: true },
-        ];
-        table.pagination = false;
-      } else {
-        // Revert to sample flat data
-        table.data = sampleData;
-        table.columns = columns; // Reset to full columns
-        table.pagination = true;
+    function toggleTreeMode() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.treeData = !table.treeData;
+
+        if (table.treeData) {
+          // Switch to tree data structure
+          table.data = [
+            {
+              id: 'd1',
+              name: 'Engineering',
+              role: 'Department',
+              status: 'Active',
+              children: [
+                { id: 1, name: 'John Doe', role: 'Senior Developer', status: 'Active' },
+                { id: 2, name: 'Jane Smith', role: 'Junior Developer', status: 'Active' },
+              ],
+            },
+            {
+              id: 'd2',
+              name: 'Marketing',
+              role: 'Department',
+              status: 'Active',
+              children: [{ id: 4, name: 'Alice Williams', role: 'Sales Rep', status: 'On Leave' }],
+            },
+          ];
+          // Simplified columns for tree view
+          table.columns = [
+            { id: 'name', field: 'name', label: 'Name', sortable: true, width: '250px' },
+            { id: 'role', field: 'role', label: 'Role', sortable: true },
+            { id: 'status', field: 'status', label: 'Status', sortable: true },
+          ];
+          table.pagination = false;
+        } else {
+          // Revert to sample flat data
+          table.data = sampleData;
+          table.columns = columns; // Reset to full columns
+          table.pagination = true;
+        }
+        updatePlaygroundStatus();
       }
-      updatePlaygroundStatus();
     }
-  };
+  }
 
   // NEW ADVANCED FEATURES DEMOS
 

package/dist/collection/assets/js/demos/aside-panel-demo.js

@@ -48,14 +48,14 @@ export function initAsidePanelDemo() {
          <h4 style="margin: 0 0 8px; font-size: 10px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.1em;">🎬 Animation Mastery</h4>
          <div style="display: grid; grid-template-columns: 1fr; gap: 6px;">
            <div style="display: flex; gap: 4px;">
-             <ui-button id="btnAnimSlide" variant="outline" color="success" label="Slide In-Out" size="md"yle="flex:1"></ui-button>
-             <ui-button id="btnAnimFade" variant="outline" color="secondary" label="Fade" size="md"yle="flex:1"></ui-button>
-             <ui-button id="btnAnimScale" variant="outline" color="secondary" label="Scale" size="md"yle="flex:1"></ui-button>
+             <ui-button id="btnAnimSlide" variant="outline" color="success" label="Slide In-Out" size="md" style="flex:1"></ui-button>
+             <ui-button id="btnAnimFade" variant="outline" color="secondary" label="Fade" size="md" style="flex:1"></ui-button>
+             <ui-button id="btnAnimScale" variant="outline" color="secondary" label="Scale" size="md" style="flex:1"></ui-button>
            </div>
            <div style="display: flex; gap: 4px;">
-             <ui-button id="btnSpeed01" variant="outline" color="secondary" label="⚡ 0.1s" size="md"yle="flex:1"></ui-button>
-             <ui-button id="btnSpeed1" variant="outline" color="success" label="🎯 1s" size="md"yle="flex:1"></ui-button>
-             <ui-button id="btnSpeed2" variant="outline" color="secondary" label="🎬 2s" size="md"yle="flex:1"></ui-button>
+             <ui-button id="btnSpeed01" variant="outline" color="secondary" label="⚡ 0.1s" size="md" style="flex:1"></ui-button>
+             <ui-button id="btnSpeed1" variant="outline" color="success" label="🎯 1s" size="md" style="flex:1"></ui-button>
+             <ui-button id="btnSpeed2" variant="outline" color="secondary" label="🎬 2s" size="md" style="flex:1"></ui-button>
            </div>
          </div>
        </div>

package/dist/collection/assets/js/demos/button-demo.js

@@ -174,7 +174,9 @@ function showButtonSizes() {
               
               <ui-button size="${s.id}" variant="${s.variant}" icon="${s.icon}" icon-library="lucide" label="With Icon"></ui-button>
               
-              <ui-button size="${s.id}" variant="${s.variant}" icon="${s.icon}" icon-library="lucide" label="With Badge" badge="8"></ui-button>
+              <ui-button size="${s.id}" variant="${s.variant}" icon="${s.icon}" icon-library="lucide" label="With Badge" badge="8" badge-color="danger"></ui-button>
+
+              <ui-button size="${s.id}" variant="${s.variant}" label="With Counter" counter="5" counter-color="info"></ui-button>
               
               <ui-button size="${s.id}" variant="${s.variant}" icon="${s.icon}" icon-library="lucide" icon-only shape="circle"></ui-button>
 
@@ -352,6 +354,27 @@ function showButtonIcons() {
                </div>
             </div>
 
+            <!-- Inline Counters (Inside Button on Right Side) -->
+            <div style="display: flex; flex-direction: column; gap: 12px;">
+               <h4 style="margin: 0; font-size: 13px; color: #64748b;">INLINE COUNTERS</h4>
+               <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+                  <ui-button label="Inbox" counter="12" variant="outline" counter-color="primary"></ui-button>
+                  <ui-button label="Alerts" counter="!" variant="outline" counter-color="danger"></ui-button>
+                  <ui-button label="Done" counter="✓" variant="outline" counter-color="success"></ui-button>
+                  <ui-button label="Custom" counter="Premium" variant="outline" counter-custom-color="#8b5cf6" counter-custom-text-color="#ffffff"></ui-button>
+               </div>
+            </div>
+
+            <!-- Both Overlay Badge and Inline Counter together with different colors -->
+            <div style="display: flex; flex-direction: column; gap: 12px;">
+               <h4 style="margin: 0; font-size: 13px; color: #64748b;">BOTH BADGE (OVERLAY) & COUNTER (INLINE)</h4>
+               <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+                  <ui-button label="Inbox" badge="9+" badge-color="danger" counter="12" variant="outline" counter-color="primary"></ui-button>
+                  <ui-button label="Notifications" badge="New" badge-color="success" counter="5" variant="outline" counter-color="info"></ui-button>
+                  <ui-button label="Custom Styles" badge="PRO" badge-custom-color="#8b5cf6" badge-custom-text-color="#ffffff" counter="Hot" variant="outline" counter-color="warning"></ui-button>
+               </div>
+            </div>
+
          </div>
       </div>
 
@@ -593,6 +616,32 @@ function showInteractiveButton() {
                 ]' size="md" variant="outlined"></ui-dropdown>
                 <ui-input id="btnBadge" label="Overlay Badge" value="" size="md" variant="outlined" placeholder="e.g. 9+"></ui-input>
               </div>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+                <ui-dropdown id="btnBadgeColor" label="Badge Color" value="danger" options='[
+                  {"label": "Primary", "value": "primary"},
+                  {"label": "Secondary", "value": "secondary"},
+                  {"label": "Success", "value": "success"},
+                  {"label": "Danger", "value": "danger"},
+                  {"label": "Warning", "value": "warning"},
+                  {"label": "Info", "value": "info"}
+                ]' size="md" variant="outlined"></ui-dropdown>
+                <ui-input id="btnCounter" label="Inline Counter" value="" size="md" variant="outlined" placeholder="e.g. 5"></ui-input>
+              </div>
+              <div style="display: grid; grid-template-columns: 1fr; gap: 12px;">
+                <ui-dropdown id="btnCounterColor" label="Counter Color" value="" options='[
+                  {"label": "Default", "value": ""},
+                  {"label": "Primary", "value": "primary"},
+                  {"label": "Secondary", "value": "secondary"},
+                  {"label": "Success", "value": "success"},
+                  {"label": "Danger", "value": "danger"},
+                  {"label": "Warning", "value": "warning"},
+                  {"label": "Info", "value": "info"}
+                ]' size="md" variant="outlined"></ui-dropdown>
+              </div>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+                <ui-input id="btnCounterCustomColor" label="Custom Bg" value="" size="md" variant="outlined" placeholder="e.g. #8b5cf6"></ui-input>
+                <ui-input id="btnCounterCustomTextColor" label="Custom Text" value="" size="md" variant="outlined" placeholder="e.g. #ffffff"></ui-input>
+              </div>
             </div>
           </div>
 
@@ -687,6 +736,11 @@ function updateInteractiveButton() {
   const iconLib = document.getElementById('btnIconLibrary')?.value || 'lucide';
   const iconPos = document.getElementById('btnIconPosition')?.value || 'left';
   const badge = document.getElementById('btnBadge')?.value || '';
+  const badgeColor = document.getElementById('btnBadgeColor')?.value || '';
+  const counter = document.getElementById('btnCounter')?.value || '';
+  const counterColor = document.getElementById('btnCounterColor')?.value || '';
+  const counterCustomColor = document.getElementById('btnCounterCustomColor')?.value || '';
+  const counterCustomTextColor = document.getElementById('btnCounterCustomTextColor')?.value || '';
 
   const loading = document.getElementById('btnLoading')?.checked;
   const disabled = document.getElementById('btnDisabled')?.checked;
@@ -705,6 +759,11 @@ function updateInteractiveButton() {
   if (iconLib !== 'lucide') props += ` icon-library="${iconLib}"`;
   if (iconPos !== 'left') props += ` icon-position="${iconPos}"`;
   if (badge) props += ` badge="${badge}"`;
+  if (badgeColor && badgeColor !== 'danger') props += ` badge-color="${badgeColor}"`;
+  if (counter) props += ` counter="${counter}"`;
+  if (counterColor) props += ` counter-color="${counterColor}"`;
+  if (counterCustomColor) props += ` counter-custom-color="${counterCustomColor}"`;
+  if (counterCustomTextColor) props += ` counter-custom-text-color="${counterCustomTextColor}"`;
   if (loading) props += ' loading';
   if (disabled) props += ' disabled';
   if (iconOnly) props += ' icon-only';