npm - atomicuilibrary - Versions diffs - 0.1.0 → 0.1.3 - Mend

atomicuilibrary 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/dist/collection/assets/js/demos/home-components.js CHANGED Viewed

@@ -1,4 +1,4 @@
-// Component Library Home Demo Data and Functions
+// Component Library Home Demo Data and Functions
 export const componentData = [
   {
@@ -240,7 +240,7 @@ export const componentData = [
     demo: {
       type: 'custom',
       html: `
-        <div id="homeScrollDemo" style="position: relative; height: 100px; overflow-y: auto; border: 1px solid #e5e7eb;">
+        <div id="homeScrollDemo" style="position: relative; height: 100px; overflow-y: auto; border:1px solid var(--border-default,#e5e7eb);">
           <p style="font-size: 11px; margin: 4px 0;">Scroll down to see button...</p>
           <p style="font-size: 11px; margin: 4px 0;">Line 1</p><p style="font-size: 11px; margin: 4px 0;">Line 2</p><p style="font-size: 11px; margin: 4px 0;">Line 3</p>
           <p style="font-size: 11px; margin: 4px 0;">Line 4</p><p style="font-size: 11px; margin: 4px 0;">Line 5</p><p style="font-size: 11px; margin: 4px 0;">Line 6</p>

package/dist/collection/assets/js/demos/horizontal-nav-demo.js CHANGED Viewed

@@ -1,4 +1,4 @@
-// Horizontal Nav Demo
+// Horizontal Nav Demo
 export function initHorizontalNavDemo() {
   const section = document.getElementById('horizontal-nav');
   if (!section) return;
@@ -128,11 +128,11 @@ export function initHorizontalNavDemo() {
           <h3>List Display Format</h3>
           <p>Display navigation items as a vertical list, perfect for sidebars or menu panels.</p>
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 20px;">
-            <div style="background: #f9fafb; padding: 16px; border-radius: 8px; border: 1px solid #e5e7eb;">
+            <div style="background:var(--bg-secondary,#f9fafb); padding: 16px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
               <h4 style="margin: 0 0 12px;">Default List</h4>
               <ui-horizontal-nav id="listNav1" display-as="list"></ui-horizontal-nav>
             </div>
-            <div style="background: #f9fafb; padding: 16px; border-radius: 8px; border: 1px solid #e5e7eb;">
+            <div style="background:var(--bg-secondary,#f9fafb); padding: 16px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
               <h4 style="margin: 0 0 12px;">Pills List</h4>
               <ui-horizontal-nav id="listNav2" display-as="list" variant="pills"></ui-horizontal-nav>
             </div>
@@ -153,7 +153,7 @@ export function initHorizontalNavDemo() {
       if (!container) return;
       container.innerHTML = `
-        <div style="background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
+        <div style="background-color:var(--bg-primary,white); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
           <h3>🎮 Interactive Playground</h3>
           <div style="display: flex; gap: 30px; flex-wrap: wrap; margin-top: 20px;">
             <div style="flex: 1; min-width: 300px;">
@@ -200,7 +200,7 @@ export function initHorizontalNavDemo() {
               </div>
             </div>
-            <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; display: flex; flex-direction: column;">
+            <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb); display: flex; flex-direction: column;">
               <h4 style="margin-top: 0;">Preview:</h4>
               <div id="interactiveNavContainer" style="flex: 1;"></div>
@@ -252,7 +252,7 @@ export function initHorizontalNavDemo() {
           codeBlock.innerText = `<ui-horizontal-nav${props}></ui-horizontal-nav>\n<script>\n  const nav = document.querySelector('ui-horizontal-nav');\n  nav.items = ${itemsText};\n</script>`;
         }
       } catch (error) {
-        container.innerHTML = `<p style="color: #ef4444;">Invalid JSON: ${error.message}</p>`;
+        container.innerHTML = `<p style="color:var(--accent-red,#ef4444);">Invalid JSON: ${error.message}</p>`;
       }
     };

package/dist/collection/assets/js/demos/icon-demo.js CHANGED Viewed

@@ -53,7 +53,7 @@ export function initIconDemo() {
       <!-- 4. Lucide Icons -->
       <div class="demo-card">
-        <div class="badge" style="float: right; background: #6366f1; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;">CLEAN</div>
+        <div class="badge" style="float: right; background: var(--accent-indigo,#6366f1); color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;">CLEAN</div>
         <h3>Lucide</h3>
         <p>Beautiful & consistent icons (Feather fork).</p>
         <div style="display: flex; gap: 16px; align-items: center; margin-top: 16px;">
@@ -123,7 +123,7 @@ export function initIconDemo() {
       <!-- 9. Remix Icon -->
       <div class="demo-card">
-        <div class="badge" style="float: right; background: #6366f1; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;">REMIX</div>
+        <div class="badge" style="float: right; background: var(--accent-indigo,#6366f1); color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;">REMIX</div>
         <h3>Remix Icon</h3>
         <p>Beautiful, neutral-style open-source icons.</p>
         <div style="display: flex; gap: 16px; align-items: center; margin-top: 16px;">
@@ -166,13 +166,13 @@ export function initIconDemo() {
             <h3>FontAwesome Gallery</h3>
             <p>A comprehensive set of icons categorized by style. Use the <code>library="fontawesome"</code> prop.</p>
           </div>
-          <a href="https://fontawesome.com/icons" target="_blank" style="color: #6366f1; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid rgba(99, 102, 241, 0.2); padding: 4px 12px; border-radius: 6px;">Browse All Icons →</a>
+          <a href="https://fontawesome.com/icons" target="_blank" style="color:var(--accent-indigo,#6366f1); font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid rgba(99, 102, 241, 0.2); padding: 4px 12px; border-radius: 6px;">Browse All Icons →</a>
         </div>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px;">
           <!-- Solid -->
           <div>
-            <h4 style="font-size: 12px; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.05em; margin-bottom: 16px;">Solid Icons</h4>
+            <h4 style="font-size: 12px; text-transform: uppercase; color:var(--text-secondary,#64748b); letter-spacing: 0.05em; margin-bottom: 16px;">Solid Icons</h4>
             <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">
               <div class="icon-box" title="fa-house"><ui-icon library="fontawesome" name="fa-solid fa-house" size="20px"></ui-icon></div>
               <div class="icon-box" title="fa-user"><ui-icon library="fontawesome" name="fa-solid fa-user" size="20px"></ui-icon></div>
@@ -187,7 +187,7 @@ export function initIconDemo() {
           <!-- Regular / Outline -->
           <div>
-            <h4 style="font-size: 12px; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.05em; margin-bottom: 16px;">Regular (Outline)</h4>
+            <h4 style="font-size: 12px; text-transform: uppercase; color:var(--text-secondary,#64748b); letter-spacing: 0.05em; margin-bottom: 16px;">Regular (Outline)</h4>
             <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">
               <div class="icon-box" title="fa-face-smile"><ui-icon library="fontawesome" name="fa-regular fa-face-smile" size="20px"></ui-icon></div>
               <div class="icon-box" title="fa-circle-check"><ui-icon library="fontawesome" name="fa-regular fa-circle-check" size="20px"></ui-icon></div>
@@ -202,7 +202,7 @@ export function initIconDemo() {
           <!-- Brands -->
           <div>
-            <h4 style="font-size: 12px; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.05em; margin-bottom: 16px;">Brand Icons</h4>
+            <h4 style="font-size: 12px; text-transform: uppercase; color:var(--text-secondary,#64748b); letter-spacing: 0.05em; margin-bottom: 16px;">Brand Icons</h4>
             <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">
               <div class="icon-box" style="color: #1877f2;"><ui-icon library="fontawesome" name="fa-brands fa-facebook" size="20px"></ui-icon></div>
               <div class="icon-box" style="color: #4cd964;"><ui-icon library="fontawesome" name="fa-brands fa-whatsapp" size="20px"></ui-icon></div>
@@ -288,14 +288,14 @@ export function initIconDemo() {
             <div>
               <label style="display: block; font-weight: 600; margin-bottom: 4px;">Icon Name / Content</label>
               <ui-input type="text" id="playgroundName" class="demo-input" value="🚀">
-              <small style="color: #64748b; margin-top: 4px; display: block;">e.g., 'house' (se), 'fa-star' (fa), '🚀' (emoji), or an SVG path</small>
+              <small style="color:var(--text-secondary,#64748b); margin-top: 4px; display: block;">e.g., 'house' (se), 'fa-star' (fa), '🚀' (emoji), or an SVG path</small>
             </div>
             <div>
               <label style="display: block; font-weight: 600; margin-bottom: 4px;">Color</label>
               <ui-input type="color" id="playgroundColor" class="demo-input" value="#6366f1" style="height: 42px; padding: 2px;">
             </div>
           </div>
-          <div style="flex: 1; min-width: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8fafc; border-radius: 12px; border: 2px dashed #e2e8f0; padding: 40px;">
+          <div style="flex: 1; min-width: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; background:var(--bg-secondary,#f8fafc); border-radius: 12px; border: 2px dashed #e2e8f0; padding: 40px;">
             <div id="playgroundPreview">
               <ui-icon name="🚀" size="4rem" color="#6366f1"></ui-icon>
             </div>
@@ -307,15 +307,15 @@ export function initIconDemo() {
     <style>
       .demo-header { margin-bottom: 32px; }
-      .demo-header h2 { font-size: 1.8rem; font-weight: 800; color: #1e293b; }
-      .demo-header p { color: #64748b; font-size: 1.1rem; }
-      .demo-card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
-      .demo-card h3 { margin: 0 0 8px 0; color: #1e293b; font-size: 1.1rem; font-weight: 700; }
-      .demo-card p { margin: 0 0 16px 0; color: #64748b; font-size: 0.9rem; }
-      .demo-code { background: #f1f5f9; padding: 12px; border-radius: 8px; font-size: 12px; margin-top: 16px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; }
-      .demo-input { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; background: white; }
-      .icon-box { display: flex; align-items: center; justify-content: center; background: white; border: 1px solid #f1f5f9; border-radius: 8px; padding: 12px; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
-      .icon-box:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-color: #6366f1; cursor: pointer; }
+      .demo-header h2 { font-size: 1.8rem; font-weight: 800; color:var(--text-primary,#1e293b); }
+      .demo-header p { color:var(--text-secondary,#64748b); font-size: 1.1rem; }
+      .demo-card { background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); border-radius: 16px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
+      .demo-card h3 { margin: 0 0 8px 0; color:var(--text-primary,#1e293b); font-size: 1.1rem; font-weight: 700; }
+      .demo-card p { margin: 0 0 16px 0; color:var(--text-secondary,#64748b); font-size: 0.9rem; }
+      .demo-code { background:var(--bg-tertiary,#f1f5f9); padding: 12px; border-radius: 8px; font-size: 12px; margin-top: 16px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; }
+      .demo-input { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; background:var(--bg-primary,white); }
+      .icon-box { display: flex; align-items: center; justify-content: center; background:var(--bg-primary,white); border:1px solid var(--border-subtle,#f1f5f9); border-radius: 8px; padding: 12px; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
+      .icon-box:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-color:var(--accent-indigo,#6366f1); cursor: pointer; }
     </style>
   `;