atomicuilibrary 0.1.0 → 0.1.3

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

@@ -19,6 +19,7 @@ export function initCheckboxDemo() {
       <ui-button label="📖 Contextual Layouts"  onclick="showContextualLayouts()"></ui-button>
       <ui-button label="States"  onclick="showCheckboxStates()"></ui-button>
       <ui-button label="📋 Form Lab"  onclick="showCheckboxForm()"></ui-button>
+      <ui-button label="🃏 Variants" onclick="showCheckboxVariants()"></ui-button>
     </div>
 
     <div id="checkboxDemoContainer" style="margin-top: 20px;"></div>
@@ -41,7 +42,7 @@ export function initCheckboxDemo() {
     container.innerHTML = `
       <div class="demo-block reveal-fade-in">
         <h3 class="specimen-title">🎮 Interactive Playground</h3>
-        <div class="playground-settings" style="background: rgba(var(--primary-rgb, 139, 92, 246), 0.03); padding: 24px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); margin-bottom: 24px;">
+        <div class="playground-settings" style="padding: 24px; border-radius: 16px; margin-bottom: 24px;">
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;">
               <ui-input id="chkLabel" label="Label Text" value="Tactical Approval" size="md"></ui-input>
               <ui-input id="chkDesc" label="Description" value="Authorize deployment of new assets" size="md"></ui-input>
@@ -86,7 +87,7 @@ export function initCheckboxDemo() {
           </div>
         </div>
 
-        <div class="playground-preview" style="padding: 60px; background: var(--bg-page, white); border: 1px dashed #e2e8f0; border-radius: 24px; display: flex; justify-content: center; min-height: 200px; position: relative; overflow: hidden;">
+        <div class="playground-preview" style="padding: 60px; min-height: 200px; position: relative; overflow: hidden;">
           <div id="chkInteractivePreview"></div>
         </div>
 
@@ -233,8 +234,8 @@ export function initCheckboxDemo() {
            <div style="padding: 24px; background: rgba(var(--primary-rgb, 139, 92, 246), 0.03); border-radius: 16px;">
               <h4 style="margin: 0 0 16px 0; font-size: 13px; opacity: 0.5;">Image-Based Branding</h4>
               <div style="display: flex; flex-direction: column; gap: 16px;">
-                 <ui-checkbox label="User Verified" custom-image="https://cdn-icons-png.flaticon.com/512/7641/7641727.png" color="info" checked haptic></ui-checkbox>
-                 <ui-checkbox label="External Auth" custom-image="https://cdn-icons-png.flaticon.com/512/2991/2991148.png" color="primary" checked></ui-checkbox>
+                 <ui-checkbox label="User Verified" custom-image="/build/assets/images/logo.png" color="info" checked haptic></ui-checkbox>
+                 <ui-checkbox label="External Auth" custom-image="/build/assets/images/logo.png" color="primary" checked></ui-checkbox>
               </div>
               <p style="margin-top: 16px; font-size: 11px; opacity: 0.6;">Direct image substrate supports alpha transparency and custom object-fit.</p>
            </div>
@@ -310,7 +311,7 @@ export function initCheckboxDemo() {
         <p class="specimen-description">High-fidelity visual archetypes designed for premium interfaces.</p>
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px;">
-           <div style="padding: 32px; background: #0f172a; border-radius: 20px; color: white;">
+           <div style="padding: 32px; background: var(--bg-tertiary, #f1f5f9); border-radius: 20px; color: var(--text-primary); border: 1px solid var(--border-default);">
               <h4 style="margin: 0 0 20px 0; font-size: 14px; opacity: 0.6; text-transform: uppercase;">Glassmorphism</h4>
               <ui-checkbox 
                 label="Frosted Transmission" 
@@ -320,7 +321,7 @@ export function initCheckboxDemo() {
                 glow 
                 checked>
               </ui-checkbox>
-              <div style="margin-top: 16px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 8px; font-size: 12px;">
+              <div style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, rgba(0,0,0,0.04)); border-radius: 8px; font-size: 12px;">
                  Perfect for overlaying on rich imagery or vibrant gradients.
               </div>
            </div>
@@ -433,6 +434,59 @@ export function initCheckboxDemo() {
     `;
   };
 
+  window.showCheckboxStates = function () {
+    updateActiveBtn('showCheckboxStates');
+    const container = document.getElementById('checkboxDemoContainer');
+    if (!container) return;
+    container.innerHTML = `
+      <div class="demo-block reveal-slide-up">
+        <h3 class="specimen-title">Standard Interactive States</h3>
+
+        <div style="display: flex; flex-direction: column; gap: 32px;">
+
+          <div>
+            <p style="font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary,#64748b); margin: 0 0 14px;">Core States</p>
+            <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 20px; background: var(--bg-secondary,#f8fafc); border-radius: 12px;">
+              <ui-checkbox label="Default" size="md"></ui-checkbox>
+              <ui-checkbox label="Checked" checked size="md"></ui-checkbox>
+              <ui-checkbox label="Indeterminate" indeterminate size="md"></ui-checkbox>
+              <ui-checkbox label="Disabled" disabled size="md"></ui-checkbox>
+              <ui-checkbox label="Disabled Checked" disabled checked size="md"></ui-checkbox>
+              <ui-checkbox label="Readonly" readonly checked size="md"></ui-checkbox>
+            </div>
+          </div>
+
+          <div>
+            <p style="font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary,#64748b); margin: 0 0 14px;">Validation States</p>
+            <div style="display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; padding: 20px; background: var(--bg-secondary,#f8fafc); border-radius: 12px;">
+              <ui-checkbox label="Invalid (unchecked)" invalid size="md" error-message="This field is required"></ui-checkbox>
+              <ui-checkbox label="Invalid (checked)" invalid checked size="md" error-message="Value not allowed"></ui-checkbox>
+              <ui-checkbox label="With helper text" size="md" helper-text="Optional — you can skip this"></ui-checkbox>
+            </div>
+          </div>
+
+          <div>
+            <p style="font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary,#64748b); margin: 0 0 14px;">Skeleton Loading</p>
+            <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 20px; background: var(--bg-secondary,#f8fafc); border-radius: 12px;">
+              <ui-checkbox label="Loading..." skeleton size="xs"></ui-checkbox>
+              <ui-checkbox label="Loading..." skeleton size="md"></ui-checkbox>
+              <ui-checkbox label="Loading..." skeleton size="xl"></ui-checkbox>
+            </div>
+          </div>
+
+          <div>
+            <p style="font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary,#64748b); margin: 0 0 14px;">RTL (Right-to-Left)</p>
+            <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 20px; background: #fff1f2; border-radius: 12px;" dir="rtl">
+              <ui-checkbox label="تفعيل الإشعارات" rtl checked color="danger" glow size="md"></ui-checkbox>
+              <ui-checkbox label="حفظ كلمة المرور" rtl color="primary" size="md"></ui-checkbox>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    `;
+  };
+
   window.showCheckboxForm = function () {
     updateActiveBtn('showCheckboxForm');
     const container = document.getElementById('checkboxDemoContainer');
@@ -469,7 +523,7 @@ export function initCheckboxDemo() {
     `;
 
     const form = document.getElementById('checkboxTestForm');
-    form.addEventListener('submit', e => {
+    if (form) form.addEventListener('submit', e => {
       e.preventDefault();
       const fd = new FormData(form);
       const data = {};
@@ -485,5 +539,68 @@ export function initCheckboxDemo() {
     });
   };
 
+  window.showCheckboxVariants = function () {
+    updateActiveBtn('showCheckboxVariants');
+    const container = document.getElementById('checkboxDemoContainer');
+    if (!container) return;
+    container.innerHTML = `
+      <div style="display: flex; flex-direction: column; gap: 40px;">
+
+        <div class="demo-block">
+          <h3 class="specimen-title">🃏 All Variants Side-by-Side</h3>
+          <p class="specimen-description">Every built-in <code>variant</code> in unchecked, checked, and indeterminate states.</p>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px;">
+            ${['default','filled','bordered','glass','raised','tick-only','round-color'].map(v => `
+            <div style="padding: 16px; background: ${v === 'glass' ? '#1e293b' : 'var(--bg-secondary,#f8fafc)'}; border-radius: 12px; border: 1px solid var(--border-default,#e2e8f0);" ${v === 'glass' ? 'class="dark"' : ''}>
+              <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: ${v === 'glass' ? 'rgba(255,255,255,0.4)' : 'var(--text-secondary,#64748b)'}; margin: 0 0 10px;">${v}</p>
+              <div style="display: flex; flex-direction: column; gap: 8px;">
+                <ui-checkbox label="Off" variant="${v}" color="primary"></ui-checkbox>
+                <ui-checkbox label="On" variant="${v}" color="primary" checked></ui-checkbox>
+                <ui-checkbox label="Mixed" variant="${v}" color="primary" indeterminate></ui-checkbox>
+              </div>
+            </div>`).join('')}
+          </div>
+        </div>
+
+        <div class="demo-block">
+          <h3 class="specimen-title">🔲 Button Mode (<code>is-button</code>)</h3>
+          <p class="specimen-description">Renders checkboxes as pill/button chips — ideal for tag filters and multi-select pickers.</p>
+          <div style="display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--bg-secondary,#f8fafc); border-radius: 12px;">
+            <div>
+              <p style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 10px;">Filter chips</p>
+              <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                <ui-checkbox name="filter" value="new" label="New" is-button checked color="primary"></ui-checkbox>
+                <ui-checkbox name="filter" value="sale" label="On Sale" is-button color="danger"></ui-checkbox>
+                <ui-checkbox name="filter" value="trending" label="Trending" is-button checked color="warning"></ui-checkbox>
+                <ui-checkbox name="filter" value="top" label="Top Rated" is-button color="success"></ui-checkbox>
+              </div>
+            </div>
+            <div>
+              <p style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 10px;">With icons</p>
+              <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                <ui-checkbox name="feat" value="wifi" label="WiFi" is-button icon="wifi" checked color="info"></ui-checkbox>
+                <ui-checkbox name="feat" value="bt" label="Bluetooth" is-button icon="bluetooth" color="info"></ui-checkbox>
+                <ui-checkbox name="feat" value="nfc" label="NFC" is-button icon="radio" checked color="info"></ui-checkbox>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="demo-block">
+          <h3 class="specimen-title">🏷️ Label Positions</h3>
+          <p class="specimen-description">The <code>label-position</code> prop controls where the label appears relative to the checkbox.</p>
+          <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px; background: var(--bg-secondary,#f8fafc); border-radius: 12px;">
+            ${['right','left','top','bottom'].map(pos => `
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+              <span style="font-size: 10px; font-weight: 700; color: var(--text-secondary,#64748b); font-family: monospace;">${pos}</span>
+              <ui-checkbox label="Accept" label-position="${pos}" checked color="primary"></ui-checkbox>
+            </div>`).join('')}
+          </div>
+        </div>
+
+      </div>
+    `;
+  };
+
   setTimeout(() => window.showInteractiveCheckbox(), 50);
 }