designkit-ai 1.0.0

package/components/app-mobile/healthcare/medication-reminder.html

@@ -0,0 +1,24 @@
+<!--
+  @name: Medication Reminder
+  @kit: app-mobile
+  @width: 360
+  @height: 100
+  @tags: medication, reminder, pill, healthcare
+-->
+<div data-component="Medication Reminder" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:14px 16px;display:flex;align-items:center;gap:12px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="width:44px;height:44px;border-radius:var(--kit-radius,8px);background:rgba(99,102,241,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary,#6366F1)" stroke-width="2"><path d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-6 9h6m-6 4h4"/></svg>
+  </div>
+  <div style="flex:1;min-width:0;">
+    <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Metformin 500mg</div>
+    <div style="display:flex;align-items:center;gap:8px;margin-top:2px;">
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-2,#475569);">1 tablet</span>
+      <span style="width:3px;height:3px;border-radius:50%;background:var(--kit-text-3,#94A3B8);"></span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">8:00 AM</span>
+    </div>
+  </div>
+  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
+    <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-3,#94A3B8);cursor:pointer;">Skip</span>
+    <div style="height:36px;padding:0 16px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);border-radius:var(--kit-radius,8px);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);cursor:pointer;">Take Now</div>
+  </div>
+</div>

package/components/app-mobile/healthcare/symptom-checker.html

@@ -0,0 +1,42 @@
+<!--
+  @name: Symptom Checker
+  @kit: app-mobile
+  @width: 360
+  @height: 320
+  @tags: symptom, checker, diagnosis, healthcare
+-->
+<div data-component="Symptom Checker" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:20px 16px;display:flex;flex-direction:column;gap:16px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="display:flex;align-items:center;gap:10px;">
+    <div style="width:36px;height:36px;border-radius:var(--kit-radius,8px);background:rgba(99,102,241,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary,#6366F1)" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+    </div>
+    <div>
+      <div style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">How are you feeling?</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Select your symptoms</div>
+    </div>
+  </div>
+  <div style="display:flex;flex-wrap:wrap;gap:8px;">
+    <span style="padding:6px 14px;border-radius:var(--kit-radius-full,9999px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);cursor:pointer;">Headache</span>
+    <span style="padding:6px 14px;border-radius:var(--kit-radius-full,9999px);background:var(--kit-primary,#6366F1);color:#FFFFFF;font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);cursor:pointer;">Fever</span>
+    <span style="padding:6px 14px;border-radius:var(--kit-radius-full,9999px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);cursor:pointer;">Cough</span>
+    <span style="padding:6px 14px;border-radius:var(--kit-radius-full,9999px);background:var(--kit-primary,#6366F1);color:#FFFFFF;font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);cursor:pointer;">Fatigue</span>
+    <span style="padding:6px 14px;border-radius:var(--kit-radius-full,9999px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);cursor:pointer;">Nausea</span>
+    <span style="padding:6px 14px;border-radius:var(--kit-radius-full,9999px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);cursor:pointer;">Dizziness</span>
+  </div>
+  <div>
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text,#0F172A);">Severity</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-primary,#6366F1);font-weight:var(--kit-font-semibold,600);">Moderate</span>
+    </div>
+    <div style="width:100%;height:6px;background:var(--kit-surface-2,#F1F5F9);border-radius:var(--kit-radius-full,9999px);position:relative;">
+      <div style="width:50%;height:100%;background:var(--kit-primary,#6366F1);border-radius:var(--kit-radius-full,9999px);"></div>
+      <div style="position:absolute;top:-4px;left:calc(50% - 7px);width:14px;height:14px;background:var(--kit-primary,#6366F1);border-radius:50%;border:2px solid var(--kit-bg,#FFFFFF);box-shadow:0 1px 3px rgba(0,0,0,0.15);"></div>
+    </div>
+    <div style="display:flex;justify-content:space-between;margin-top:6px;">
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Mild</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Moderate</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Severe</span>
+    </div>
+  </div>
+  <div style="width:100%;height:44px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);border-radius:var(--kit-radius,8px);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);cursor:pointer;">Check Symptoms</div>
+</div>

package/components/app-mobile/healthcare/vitals-dashboard.html

@@ -0,0 +1,56 @@
+<!--
+  @name: Vitals Dashboard
+  @kit: app-mobile
+  @width: 360
+  @height: 260
+  @tags: vitals, health, dashboard, metrics
+-->
+<div data-component="Vitals Dashboard" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);padding:16px;display:flex;flex-direction:column;gap:12px;">
+  <div style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">Vitals</div>
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
+    <!-- Heart Rate -->
+    <div style="background:var(--kit-bg,#FFFFFF);border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius-md,12px);padding:14px;box-sizing:border-box;">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
+        <div style="width:32px;height:32px;border-radius:var(--kit-radius,8px);background:rgba(239,68,68,0.1);display:flex;align-items:center;justify-content:center;">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+        </div>
+        <svg width="40" height="16" viewBox="0 0 40 16" fill="none"><polyline points="0,12 8,10 16,6 24,8 32,4 40,6" stroke="#EF4444" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </div>
+      <div style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">72</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">bpm</div>
+    </div>
+    <!-- Blood Pressure -->
+    <div style="background:var(--kit-bg,#FFFFFF);border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius-md,12px);padding:14px;box-sizing:border-box;">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
+        <div style="width:32px;height:32px;border-radius:var(--kit-radius,8px);background:rgba(59,130,246,0.1);display:flex;align-items:center;justify-content:center;">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#3B82F6" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+        </div>
+        <svg width="40" height="16" viewBox="0 0 40 16" fill="none"><polyline points="0,8 8,6 16,10 24,7 32,9 40,5" stroke="#3B82F6" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </div>
+      <div style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">120/80</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">mmHg</div>
+    </div>
+    <!-- SpO2 -->
+    <div style="background:var(--kit-bg,#FFFFFF);border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius-md,12px);padding:14px;box-sizing:border-box;">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
+        <div style="width:32px;height:32px;border-radius:var(--kit-radius,8px);background:rgba(34,197,94,0.1);display:flex;align-items:center;justify-content:center;">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
+        </div>
+        <svg width="40" height="16" viewBox="0 0 40 16" fill="none"><polyline points="0,6 8,5 16,4 24,5 32,4 40,3" stroke="#22C55E" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </div>
+      <div style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">98%</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">SpO2</div>
+    </div>
+    <!-- Temperature -->
+    <div style="background:var(--kit-bg,#FFFFFF);border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius-md,12px);padding:14px;box-sizing:border-box;">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
+        <div style="width:32px;height:32px;border-radius:var(--kit-radius,8px);background:rgba(245,158,11,0.1);display:flex;align-items:center;justify-content:center;">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>
+        </div>
+        <svg width="40" height="16" viewBox="0 0 40 16" fill="none"><polyline points="0,8 8,7 16,8 24,7 32,8 40,7" stroke="#F59E0B" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </div>
+      <div style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">98.6</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">°F</div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/inputs/date-picker.html

@@ -0,0 +1,68 @@
+<!--
+  @name: Date Picker — Calendar Modal
+  @category: inputs
+  @kit: app-mobile
+  @width: 328
+  @height: 460
+  @tags: date, picker, calendar, modal, form
+-->
+<div data-component="Date Picker — Calendar Modal" style="width:328px;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-xl, 28px);box-shadow:var(--kit-shadow-lg, 0 10px 24px rgba(0,0,0,0.08));font-family:var(--kit-font, system-ui, -apple-system, sans-serif);overflow:hidden;box-sizing:border-box">
+  <div style="background:var(--kit-primary, #6366F1);padding:16px 24px 20px">
+    <div style="font-size:12px;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Select date</div>
+    <div style="font-size:30px;font-weight:400;color:#FFFFFF">Wed, Mar 25</div>
+  </div>
+  <div style="padding:16px 12px">
+    <div style="display:flex;align-items:center;justify-content:space-between;padding:0 12px;margin-bottom:12px">
+      <div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">March 2026</div>
+      <div style="display:flex;gap:4px">
+        <div style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></div>
+        <div style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></div>
+      </div>
+    </div>
+    <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:0;text-align:center">
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--kit-text-3, #94A3B8)">S</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--kit-text-3, #94A3B8)">M</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--kit-text-3, #94A3B8)">T</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--kit-text-3, #94A3B8)">W</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--kit-text-3, #94A3B8)">T</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--kit-text-3, #94A3B8)">F</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--kit-text-3, #94A3B8)">S</div>
+      <div style="height:36px"></div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">1</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">2</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">3</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">4</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">5</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">6</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">7</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">8</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">9</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">10</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">11</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">12</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">13</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">14</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">15</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">16</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">17</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">18</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">19</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">20</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">21</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">22</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">23</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">24</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;width:36px;margin:0 auto;border-radius:18px;background:var(--kit-primary, #6366F1);color:#FFFFFF;font-weight:500">25</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">26</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">27</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">28</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">29</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">30</div>
+      <div style="height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">31</div>
+    </div>
+  </div>
+  <div style="display:flex;justify-content:flex-end;padding:8px 12px 12px;gap:8px">
+    <div style="padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;color:var(--kit-primary, #6366F1);cursor:pointer">Cancel</div>
+    <div style="padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;color:var(--kit-primary, #6366F1);cursor:pointer">OK</div>
+  </div>
+</div>

package/components/app-mobile/inputs/file-upload.html

@@ -0,0 +1,13 @@
+<!--
+  @name: File Upload Area
+  @category: inputs
+  @kit: app-mobile
+  @width: 360
+  @height: 120
+  @tags: file, upload, drop, area, form
+-->
+<div data-component="File Upload Area" style="width:100%;height:120px;border:2px dashed var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:40px;height:40px;border-radius:20px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;color:var(--kit-primary, #6366F1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-primary, #6366F1);font-weight:var(--kit-font-medium, 500)">Upload file</div>
+  <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">PNG, JPG, PDF up to 10MB</div>
+</div>

package/components/app-mobile/inputs/otp-input.html

@@ -0,0 +1,16 @@
+<!--
+  @name: OTP Input — 6 Digit
+  @category: inputs
+  @kit: app-mobile
+  @width: 360
+  @height: 56
+  @tags: otp, verification, code, digits, form
+-->
+<div data-component="OTP Input — 6 Digit" style="display:flex;gap:8px;justify-content:center;width:100%;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:48px;height:56px;border:2px solid var(--kit-primary, #6366F1);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:var(--kit-text, #0F172A)">4</div>
+  <div style="width:48px;height:56px;border:2px solid var(--kit-primary, #6366F1);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:var(--kit-text, #0F172A)">2</div>
+  <div style="width:48px;height:56px;border:2px solid var(--kit-primary, #6366F1);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:var(--kit-text, #0F172A)">8</div>
+  <div style="width:48px;height:56px;border:2px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center"></div>
+  <div style="width:48px;height:56px;border:2px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center"></div>
+  <div style="width:48px;height:56px;border:2px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center"></div>
+</div>

package/components/app-mobile/inputs/password-field.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Password Field — with Toggle
+  @category: inputs
+  @kit: app-mobile
+  @width: 360
+  @height: 56
+  @tags: password, input, toggle, eye, form, security
+-->
+<div data-component="Password Field — with Toggle" style="position:relative;width:100%;height:56px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;align-items:center;width:100%;height:56px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-sm, 4px);padding:0 48px 0 16px;box-sizing:border-box;font-size:var(--kit-text-md, 16px);color:var(--kit-text, #0F172A);letter-spacing:4px">••••••••</div>
+  <div style="position:absolute;top:-8px;left:12px;background:var(--kit-bg, #FFFFFF);padding:0 4px;font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">Password</div>
+  <div style="position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--kit-text-3, #94A3B8);display:flex;align-items:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg></div>
+</div>

package/components/app-mobile/inputs/search-bar.html

@@ -0,0 +1,17 @@
+<!--
+  @name: Search Bar
+  @category: inputs
+  @kit: app-mobile
+  @width: 360
+  @height: 48
+  @tags: search, input, bar
+-->
+<div data-component="Search Bar" style="display:flex;align-items:center;width:100%;height:48px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-full, 9999px);padding:0 16px;gap:12px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="color:var(--kit-text-3, #94A3B8);display:flex;align-items:center">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+  </div>
+  <div style="flex:1;font-size:var(--kit-text-md, 16px);color:var(--kit-text-3, #94A3B8)">Search here...</div>
+  <div style="color:var(--kit-text-3, #94A3B8);display:flex;align-items:center">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/></svg>
+  </div>
+</div>

package/components/app-mobile/inputs/select.html

@@ -0,0 +1,17 @@
+<!--
+  @name: Select / Dropdown
+  @category: inputs
+  @kit: app-mobile
+  @width: 360
+  @height: 56
+  @tags: select, dropdown, form
+-->
+<div data-component="Select / Dropdown" style="position:relative;width:100%;height:56px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;align-items:center;width:100%;height:56px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-sm, 4px);padding:0 16px;box-sizing:border-box;cursor:pointer">
+    <div style="flex:1;font-size:var(--kit-text-md, 16px);color:var(--kit-text, #0F172A)">Selected option</div>
+    <div style="color:var(--kit-text-2, #475569)">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+    </div>
+  </div>
+  <div style="position:absolute;top:-8px;left:12px;background:var(--kit-bg, #FFFFFF);padding:0 4px;font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">Label</div>
+</div>

package/components/app-mobile/inputs/text-field-filled.html

@@ -0,0 +1,12 @@
+<!--
+  @name: Text Field — Filled
+  @category: inputs
+  @kit: app-mobile
+  @width: 360
+  @height: 56
+  @tags: input, text-field, filled, form
+-->
+<div data-component="Text Field — Filled" style="width:100%;height:56px;background:var(--kit-surface-2, #F1F5F9);border-radius:var(--kit-radius-sm, 4px) var(--kit-radius-sm, 4px) 0 0;border-bottom:2px solid var(--kit-border, #E2E8F0);padding:8px 16px 0;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569);margin-bottom:2px">Label</div>
+  <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text, #0F172A)">Input text</div>
+</div>

package/components/app-mobile/inputs/text-field-outlined.html

@@ -0,0 +1,12 @@
+<!--
+  @name: Text Field — Outlined
+  @category: inputs
+  @kit: app-mobile
+  @width: 360
+  @height: 56
+  @tags: input, text-field, outlined, form
+-->
+<div data-component="Text Field — Outlined" style="position:relative;width:100%;height:56px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:100%;height:56px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-sm, 4px);padding:16px;box-sizing:border-box;font-size:var(--kit-text-md, 16px);color:var(--kit-text, #0F172A);background:transparent">Placeholder text</div>
+  <div style="position:absolute;top:-8px;left:12px;background:var(--kit-bg, #FFFFFF);padding:0 4px;font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">Label</div>
+</div>

package/components/app-mobile/inputs/textarea.html

@@ -0,0 +1,12 @@
+<!--
+  @name: Text Area — Multi-line
+  @category: inputs
+  @kit: app-mobile
+  @width: 360
+  @height: 120
+  @tags: textarea, input, multiline, form
+-->
+<div data-component="Text Area — Multi-line" style="position:relative;width:100%;height:120px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:100%;height:100%;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-sm, 4px);padding:16px;box-sizing:border-box;font-size:var(--kit-text-md, 16px);color:var(--kit-text, #0F172A);line-height:1.5">Multi-line text input area for longer content...</div>
+  <div style="position:absolute;top:-8px;left:12px;background:var(--kit-bg, #FFFFFF);padding:0 4px;font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">Description</div>
+</div>

package/components/app-mobile/inputs/time-picker.html

@@ -0,0 +1,33 @@
+<!--
+  @name: Time Picker — Clock
+  @category: inputs
+  @kit: app-mobile
+  @width: 328
+  @height: 400
+  @tags: time, picker, clock, modal, form
+-->
+<div data-component="Time Picker — Clock" style="width:328px;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-xl, 28px);box-shadow:var(--kit-shadow-lg, 0 10px 24px rgba(0,0,0,0.08));font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:24px;box-sizing:border-box">
+  <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px">Select time</div>
+  <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px">
+    <div style="width:80px;height:64px;background:var(--kit-surface-2, #F1F5F9);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:400;color:var(--kit-primary, #6366F1)">10</div>
+    <div style="font-size:40px;color:var(--kit-text-2, #475569)">:</div>
+    <div style="width:80px;height:64px;background:var(--kit-surface-2, #F1F5F9);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:400;color:var(--kit-text, #0F172A)">30</div>
+    <div style="display:flex;flex-direction:column;gap:2px;margin-left:8px">
+      <div style="padding:4px 12px;border-radius:var(--kit-radius-sm, 4px);background:var(--kit-secondary, #64748B);color:var(--kit-secondary-fg, #FFFFFF);font-size:12px;font-weight:500;text-align:center">AM</div>
+      <div style="padding:4px 12px;border-radius:var(--kit-radius-sm, 4px);border:1px solid var(--kit-border, #E2E8F0);font-size:12px;color:var(--kit-text-2, #475569);text-align:center;cursor:pointer">PM</div>
+    </div>
+  </div>
+  <div style="width:200px;height:200px;border-radius:100px;background:var(--kit-surface-2, #F1F5F9);margin:0 auto 20px;position:relative">
+    <div style="position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:4px;background:var(--kit-primary, #6366F1);transform:translate(-50%,-50%)"></div>
+    <div style="position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:14px;color:var(--kit-text, #0F172A)">12</div>
+    <div style="position:absolute;top:50%;right:12px;transform:translateY(-50%);font-size:14px;color:var(--kit-text, #0F172A)">3</div>
+    <div style="position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:14px;color:var(--kit-text, #0F172A)">6</div>
+    <div style="position:absolute;top:50%;left:12px;transform:translateY(-50%);font-size:14px;color:var(--kit-text, #0F172A)">9</div>
+    <div style="position:absolute;top:12px;left:50%;width:2px;height:88px;background:var(--kit-primary, #6366F1);transform-origin:bottom center;transform:translateX(-50%) rotate(-60deg)"></div>
+    <div style="position:absolute;top:3px;left:50%;transform:translate(-50%,0) rotate(-60deg);transform-origin:center 97px"><div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:14px;font-weight:500">10</div></div>
+  </div>
+  <div style="display:flex;justify-content:flex-end;gap:8px">
+    <div style="padding:8px 16px;border-radius:20px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1);cursor:pointer">Cancel</div>
+    <div style="padding:8px 16px;border-radius:20px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1);cursor:pointer">OK</div>
+  </div>
+</div>

package/components/app-mobile/job/application-status.html

@@ -0,0 +1,18 @@
+<!--
+  @name: Application Status
+  @kit: app-mobile
+  @width: 360
+  @height: 80
+  @tags: application, status, tracking, job
+-->
+<div data-component="Application Status" style="width:100%;max-width:360px;box-sizing:border-box;padding:14px 16px;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);border:1px solid var(--kit-border, #E2E8F0);display:flex;align-items:center;gap:12px;cursor:pointer">
+  <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:var(--kit-surface-2, #F1F5F9);overflow:hidden;flex-shrink:0">
+    <img src="https://placehold.jp/36x36.png" alt="Acme Corp" style="width:100%;height:100%;object-fit:cover;display:block"/>
+  </div>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Acme Corp - Senior Designer</div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px">Applied Mar 15</div>
+  </div>
+  <span style="padding:4px 10px;background:rgba(99,102,241,0.1);color:var(--kit-primary, #6366F1);font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);border-radius:var(--kit-radius-full, 9999px);flex-shrink:0">Interview</span>
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><polyline points="9 18 15 12 9 6"/></svg>
+</div>

package/components/app-mobile/job/interview-schedule.html

@@ -0,0 +1,32 @@
+<!--
+  @name: Interview Schedule
+  @kit: app-mobile
+  @width: 360
+  @height: 140
+  @tags: interview, schedule, calendar, job
+-->
+<div data-component="Interview Schedule" style="width:100%;max-width:360px;box-sizing:border-box;padding:14px 16px;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);border:1px solid var(--kit-border, #E2E8F0)">
+  <div style="display:flex;gap:12px">
+    <div style="width:44px;height:44px;border-radius:var(--kit-radius, 8px);background:rgba(99,102,241,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0">
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+    </div>
+    <div style="flex:1;min-width:0">
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Acme Corp</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569);margin-top:2px">Senior Designer</div>
+    </div>
+    <span style="padding:4px 10px;background:rgba(59,130,246,0.1);color:var(--kit-info, #3B82F6);font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);border-radius:var(--kit-radius-full, 9999px);height:fit-content">Video Call</span>
+  </div>
+  <div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--kit-border, #E2E8F0)">
+    <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+      <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);font-weight:var(--kit-font-medium, 500)">Mar 28 at 2:00 PM</span>
+    </div>
+    <div style="display:flex;align-items:center;justify-content:space-between">
+      <div style="display:flex;align-items:center;gap:6px">
+        <div style="width:24px;height:24px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);overflow:hidden"><img src="https://placehold.jp/24x24.png" alt="Interviewer" style="width:100%;height:100%;object-fit:cover;display:block"/></div>
+        <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">Sarah Chen - Design Lead</span>
+      </div>
+      <button style="padding:6px 16px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer">Join Call</button>
+    </div>
+  </div>
+</div>

package/components/app-mobile/lists/list-item-1line.html

@@ -0,0 +1,14 @@
+<!--
+  @name: List Item — 1 Line
+  @category: lists
+  @kit: app-mobile
+  @width: 360
+  @height: 56
+  @tags: list, item, single-line
+-->
+<div data-component="List Item — 1 Line" style="display:flex;align-items:center;width:100%;height:56px;padding:0 var(--kit-space-4, 16px);gap:var(--kit-space-4, 16px);box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);cursor:pointer">
+  <div style="width:24px;height:24px;color:var(--kit-text-2, #475569);display:flex;align-items:center;justify-content:center">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+  </div>
+  <div style="flex:1;font-size:var(--kit-text-md, 16px);color:var(--kit-text, #0F172A)">List item text</div>
+</div>

package/components/app-mobile/lists/list-item-2line.html

@@ -0,0 +1,20 @@
+<!--
+  @name: List Item — 2 Lines
+  @category: lists
+  @kit: app-mobile
+  @width: 360
+  @height: 72
+  @tags: list, item, two-line, subtitle
+-->
+<div data-component="List Item — 2 Lines" style="display:flex;align-items:center;width:100%;height:72px;padding:0 var(--kit-space-4, 16px);gap:var(--kit-space-4, 16px);box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);cursor:pointer">
+  <div style="width:40px;height:40px;border-radius:20px;background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text-2, #475569);display:flex;align-items:center;justify-content:center;flex-shrink:0">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+  </div>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text, #0F172A)">Primary text</div>
+    <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:2px">Secondary text</div>
+  </div>
+  <div style="color:var(--kit-text-3, #94A3B8)">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+  </div>
+</div>

package/components/app-mobile/lists/list-item-3line.html

@@ -0,0 +1,17 @@
+<!--
+  @name: List Item — 3 Lines
+  @category: lists
+  @kit: app-mobile
+  @width: 360
+  @height: 88
+  @tags: list, item, three-line, description
+-->
+<div data-component="List Item — 3 Lines" style="display:flex;align-items:flex-start;width:100%;height:88px;padding:var(--kit-space-3, 12px) var(--kit-space-4, 16px);gap:var(--kit-space-4, 16px);box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);cursor:pointer">
+  <div style="width:40px;height:40px;border-radius:20px;background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text-2, #475569);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+  </div>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text, #0F172A)">Primary text</div>
+    <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">Secondary text that may span multiple lines with supporting information.</div>
+  </div>
+</div>

package/components/app-mobile/logistics/delivery-map.html

@@ -0,0 +1,40 @@
+<!--
+  @name: Delivery Map
+  @category: logistics
+  @kit: app-mobile
+  @width: 360
+  @height: 250
+  @tags: delivery, map, tracking, driver, logistics
+-->
+<div data-component="Delivery Map" style="width:100%;height:250px;position:relative;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);border-radius:var(--kit-radius, 12px);overflow:hidden;box-sizing:border-box">
+  <div style="width:100%;height:100%;background:var(--kit-surface-2, #F1F5F9);position:relative">
+    <!-- Map placeholder with subtle grid -->
+    <svg width="100%" height="100%" style="position:absolute;top:0;left:0;opacity:0.15"><pattern id="mapGrid" width="40" height="40" patternUnits="userSpaceOnUse"><line x1="0" y1="0" x2="0" y2="40" stroke="#94A3B8" stroke-width="0.5"/><line x1="0" y1="0" x2="40" y2="0" stroke="#94A3B8" stroke-width="0.5"/></pattern><rect width="100%" height="100%" fill="url(#mapGrid)"/></svg>
+    <!-- Delivery pin -->
+    <div style="position:absolute;top:30%;left:35%;transform:translate(-50%,-100%)">
+      <div style="width:32px;height:32px;border-radius:16px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(99,102,241,0.4)">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4m10-10h-4M6 12H2"/></svg>
+      </div>
+    </div>
+    <!-- Destination pin -->
+    <div style="position:absolute;top:55%;left:70%;transform:translate(-50%,-100%)">
+      <div style="width:32px;height:32px;border-radius:16px;background:var(--kit-success, #22C55E);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(34,197,94,0.4)">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+      </div>
+    </div>
+    <!-- Dashed route line -->
+    <svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none"><line x1="35%" y1="32%" x2="70%" y2="53%" stroke="var(--kit-primary, #6366F1)" stroke-width="2" stroke-dasharray="6 4" opacity="0.5"/></svg>
+  </div>
+  <!-- Driver info bar -->
+  <div style="position:absolute;bottom:0;left:0;right:0;background:var(--kit-bg, #FFFFFF);padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 -2px 12px rgba(0,0,0,0.08)">
+    <div style="width:40px;height:40px;border-radius:20px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;flex-shrink:0">MT</div>
+    <div style="flex:1;min-width:0">
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Mike T.</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-success, #22C55E);font-weight:500">8 min away</div>
+    </div>
+    <div style="display:flex;gap:8px">
+      <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-primary, #6366F1)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div>
+      <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-primary, #6366F1)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/logistics/driver-card.html

@@ -0,0 +1,25 @@
+<!--
+  @name: Driver Card
+  @category: logistics
+  @kit: app-mobile
+  @width: 360
+  @height: 100
+  @tags: driver, card, courier, logistics
+-->
+<div data-component="Driver Card" style="display:flex;align-items:center;width:100%;padding:16px;gap:12px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius, 12px)">
+  <div style="width:48px;height:48px;border-radius:24px;background:var(--kit-primary, #6366F1);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex-shrink:0">MT</div>
+  <div style="flex:1;min-width:0">
+    <div style="display:flex;align-items:center;gap:6px">
+      <span style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Mike T.</span>
+      <div style="display:flex;align-items:center;gap:2px">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+        <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">4.9</span>
+      </div>
+    </div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px">Toyota Camry &bull; ABC 1234</div>
+  </div>
+  <div style="display:flex;gap:8px">
+    <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-primary, #6366F1)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div>
+    <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-primary, #6366F1)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+  </div>
+</div>