designkit-ai 1.0.0

package/components/app-mobile/food/cuisine-filter.html

@@ -0,0 +1,39 @@
+<!--
+  @name: Cuisine Filter Bar
+  @kit: app-mobile
+  @width: 360
+  @height: 72
+  @tags: cuisine, filter, category, food
+-->
+<div data-component="Cuisine Filter Bar" style="width:100%;max-width:360px;box-sizing:border-box;padding:8px 0 8px 16px;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);overflow-x:auto;display:flex;gap:16px;align-items:center">
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;cursor:pointer">
+    <div style="width:44px;height:44px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" 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>
+    <span style="font-size:11px;color:var(--kit-text-2, #475569);font-weight:var(--kit-font-medium, 500)">All</span>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;cursor:pointer">
+    <div style="width:44px;height:44px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;font-size:22px">&#127829;</div>
+    <span style="font-size:11px;color:var(--kit-text-2, #475569)">Pizza</span>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;cursor:pointer">
+    <div style="width:44px;height:44px;border-radius:var(--kit-radius-full, 9999px);background:rgba(99,102,241,0.1);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 0 0 2px var(--kit-primary, #6366F1)">&#127843;</div>
+    <span style="font-size:11px;color:var(--kit-primary, #6366F1);font-weight:var(--kit-font-semibold, 600)">Sushi</span>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;cursor:pointer">
+    <div style="width:44px;height:44px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;font-size:22px">&#127828;</div>
+    <span style="font-size:11px;color:var(--kit-text-2, #475569)">Burger</span>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;cursor:pointer">
+    <div style="width:44px;height:44px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;font-size:22px">&#127836;</div>
+    <span style="font-size:11px;color:var(--kit-text-2, #475569)">Thai</span>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;cursor:pointer">
+    <div style="width:44px;height:44px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;font-size:22px">&#127835;</div>
+    <span style="font-size:11px;color:var(--kit-text-2, #475569)">Indian</span>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;padding-right:16px">
+    <div style="width:44px;height:44px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;font-size:22px">&#127790;</div>
+    <span style="font-size:11px;color:var(--kit-text-2, #475569)">Mexican</span>
+  </div>
+</div>

package/components/app-mobile/food/menu-item.html

@@ -0,0 +1,25 @@
+<!--
+  @name: Menu Item Row
+  @kit: app-mobile
+  @width: 360
+  @height: 90
+  @tags: menu, item, food, dish
+-->
+<div data-component="Menu Item Row" style="display:flex;width:100%;max-width:360px;box-sizing:border-box;padding:10px 16px;gap:12px;font-family:var(--kit-font, Inter, system-ui, sans-serif);align-items:center;background:var(--kit-bg, #FFFFFF)">
+  <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)">Salmon Teriyaki Bowl</div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Fresh salmon glazed with teriyaki sauce, served over sushi rice</div>
+    <div style="display:flex;align-items:center;gap:8px;margin-top:8px">
+      <span style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$16.99</span>
+      <div style="display:flex;align-items:center;gap:2px;cursor:pointer;color:var(--kit-text-3, #94A3B8)">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+      </div>
+    </div>
+  </div>
+  <div style="position:relative;flex-shrink:0">
+    <img src="https://placehold.jp/72x72.png" alt="Salmon Teriyaki Bowl" style="width:72px;height:72px;border-radius:var(--kit-radius, 8px);object-fit:cover;display:block"/>
+    <div style="position:absolute;bottom:-6px;right:50%;transform:translateX(50%);width:28px;height:28px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.15)">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+    </div>
+  </div>
+</div>

package/components/app-mobile/food/order-tracker.html

@@ -0,0 +1,46 @@
+<!--
+  @name: Order Tracker
+  @kit: app-mobile
+  @width: 360
+  @height: 180
+  @tags: order, tracker, delivery, food
+-->
+<div data-component="Order Tracker" style="width:100%;max-width:360px;box-sizing:border-box;padding: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;justify-content:space-between;align-items:center;margin-bottom:14px">
+    <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Order #1234</span>
+    <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-primary, #6366F1)">Est. 15 min</span>
+  </div>
+  <div style="display:flex;align-items:center;gap:0;margin-bottom:6px">
+    <div style="display:flex;flex-direction:column;align-items:center;flex:1">
+      <div style="width:24px;height:24px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-success, #22C55E);display:flex;align-items:center;justify-content:center"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
+      <span style="font-size:10px;color:var(--kit-success, #22C55E);margin-top:4px;font-weight:var(--kit-font-medium, 500)">Confirmed</span>
+    </div>
+    <div style="flex:1;height:3px;background:var(--kit-success, #22C55E);margin:0 -8px;margin-top:-14px"></div>
+    <div style="display:flex;flex-direction:column;align-items:center;flex:1">
+      <div style="width:24px;height:24px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(99,102,241,0.2)"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"><path d="M12 6v6l4 2"/></svg></div>
+      <span style="font-size:10px;color:var(--kit-primary, #6366F1);margin-top:4px;font-weight:var(--kit-font-semibold, 600)">Preparing</span>
+    </div>
+    <div style="flex:1;height:3px;background:var(--kit-border, #E2E8F0);margin:0 -8px;margin-top:-14px"></div>
+    <div style="display:flex;flex-direction:column;align-items:center;flex:1">
+      <div style="width:24px;height:24px;border-radius:var(--kit-radius-full, 9999px);border:2px solid var(--kit-border, #E2E8F0);box-sizing:border-box"></div>
+      <span style="font-size:10px;color:var(--kit-text-3, #94A3B8);margin-top:4px">On the way</span>
+    </div>
+    <div style="flex:1;height:3px;background:var(--kit-border, #E2E8F0);margin:0 -8px;margin-top:-14px"></div>
+    <div style="display:flex;flex-direction:column;align-items:center;flex:1">
+      <div style="width:24px;height:24px;border-radius:var(--kit-radius-full, 9999px);border:2px solid var(--kit-border, #E2E8F0);box-sizing:border-box"></div>
+      <span style="font-size:10px;color:var(--kit-text-3, #94A3B8);margin-top:4px">Delivered</span>
+    </div>
+  </div>
+  <div style="display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--kit-border, #E2E8F0)">
+    <div style="width:36px;height:36px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;flex-shrink:0">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">David M.</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Your delivery driver</div>
+    </div>
+    <div style="width:32px;height:32px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;cursor:pointer">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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.72c.127.96.361 1.903.7 2.81a2 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-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+    </div>
+  </div>
+</div>

package/components/app-mobile/food/restaurant-card.html

@@ -0,0 +1,34 @@
+<!--
+  @name: Restaurant Card
+  @kit: app-mobile
+  @width: 340
+  @height: 260
+  @tags: restaurant, card, food, delivery
+-->
+<div data-component="Restaurant Card" style="width:100%;max-width:340px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);overflow:hidden;box-shadow:var(--kit-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))">
+  <div style="position:relative;width:100%;height:140px;overflow:hidden">
+    <img src="https://placehold.jp/340x140.png" alt="Sakura Sushi" style="width:100%;height:100%;object-fit:cover;display:block"/>
+    <span style="position:absolute;top:8px;left:8px;background:var(--kit-primary, #6366F1);color:#FFFFFF;font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);padding:4px 10px;border-radius:var(--kit-radius-full, 9999px)">Popular</span>
+  </div>
+  <div style="padding:12px 14px">
+    <div style="display:flex;justify-content:space-between;align-items:flex-start">
+      <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Sakura Sushi</div>
+      <div style="display:flex;align-items:center;gap:3px">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--kit-warning, #F59E0B)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+        <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">4.7</span>
+        <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">(128)</span>
+      </div>
+    </div>
+    <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:4px">Japanese &bull; Sushi</div>
+    <div style="display:flex;align-items:center;gap:12px;margin-top:10px">
+      <div style="display:flex;align-items:center;gap:4px">
+        <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"><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-2, #475569)">25-35 min</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:4px">
+        <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"><path d="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v2M17 14h4"/><circle cx="7.5" cy="15.5" r="3.5"/><circle cx="17.5" cy="15.5" r="3.5"/></svg>
+        <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569)">$2.99 delivery</span>
+      </div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/food/review-card.html

@@ -0,0 +1,35 @@
+<!--
+  @name: Review Card
+  @kit: app-mobile
+  @width: 360
+  @height: 150
+  @tags: review, rating, feedback, food
+-->
+<div data-component="Review Card" 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;align-items:center;gap:10px;margin-bottom:8px">
+    <div style="width:36px;height:36px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);overflow:hidden;flex-shrink:0"><img src="https://placehold.jp/36x36.png" alt="Avatar" 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)">Emma Wilson</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">2 days ago</div>
+    </div>
+    <div style="display:flex;gap:2px">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--kit-warning, #F59E0B)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--kit-warning, #F59E0B)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--kit-warning, #F59E0B)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--kit-warning, #F59E0B)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--kit-border, #E2E8F0)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+    </div>
+  </div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">Amazing sushi! The salmon was incredibly fresh and the presentation was beautiful. Service was attentive and friendly.</div>
+  <div style="display:flex;align-items:center;justify-content:space-between">
+    <div style="display:flex;align-items:center;gap:6px;cursor:pointer">
+      <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"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
+      <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Helpful (12)</span>
+    </div>
+    <div style="display:flex;gap:4px">
+      <img src="https://placehold.jp/32x32.png" alt="Food photo" style="width:32px;height:32px;border-radius:var(--kit-radius-sm, 4px);object-fit:cover;display:block"/>
+      <img src="https://placehold.jp/32x32.png" alt="Food photo" style="width:32px;height:32px;border-radius:var(--kit-radius-sm, 4px);object-fit:cover;display:block"/>
+      <img src="https://placehold.jp/32x32.png" alt="Food photo" style="width:32px;height:32px;border-radius:var(--kit-radius-sm, 4px);object-fit:cover;display:block"/>
+    </div>
+  </div>
+</div>

package/components/app-mobile/food/table-reservation.html

@@ -0,0 +1,42 @@
+<!--
+  @name: Table Reservation
+  @kit: app-mobile
+  @width: 360
+  @height: 320
+  @tags: reservation, booking, table, restaurant
+-->
+<div data-component="Table Reservation" style="width:100%;max-width:360px;box-sizing:border-box;padding: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;align-items:center;gap:10px;margin-bottom:16px">
+    <img src="https://placehold.jp/44x44.png" alt="Restaurant" style="width:44px;height:44px;border-radius:var(--kit-radius, 8px);object-fit:cover;display:block"/>
+    <div>
+      <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Sakura Sushi</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Japanese &bull; Downtown</div>
+    </div>
+  </div>
+  <div style="display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius, 8px);margin-bottom:12px">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" 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>
+    <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Friday, Mar 28, 2026</span>
+  </div>
+  <div style="margin-bottom:12px">
+    <div style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);margin-bottom:8px">Select Time</div>
+    <div style="display:flex;gap:8px">
+      <div style="flex:1;padding:8px 0;text-align:center;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);cursor:pointer">6:00</div>
+      <div style="flex:1;padding:8px 0;text-align:center;font-size:var(--kit-text-sm, 14px);color:#FFFFFF;background:var(--kit-primary, #6366F1);border:1px solid var(--kit-primary, #6366F1);border-radius:var(--kit-radius, 8px);font-weight:var(--kit-font-semibold, 600);cursor:pointer">6:30</div>
+      <div style="flex:1;padding:8px 0;text-align:center;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);cursor:pointer">7:00</div>
+      <div style="flex:1;padding:8px 0;text-align:center;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);cursor:pointer">7:30</div>
+    </div>
+  </div>
+  <div style="margin-bottom:12px">
+    <div style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);margin-bottom:8px">Guests</div>
+    <div style="display:flex;align-items:center;gap:0;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);overflow:hidden;width:fit-content">
+      <div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+      <div style="width:44px;height:36px;display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);border-left:1px solid var(--kit-border, #E2E8F0);border-right:1px solid var(--kit-border, #E2E8F0)">2</div>
+      <div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+    </div>
+  </div>
+  <div style="margin-bottom:14px">
+    <div style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);margin-bottom:6px">Special Requests</div>
+    <div style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8);min-height:40px">Window seat preferred...</div>
+  </div>
+  <button style="width:100%;padding:12px 0;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer">Reserve Table</button>
+</div>

package/components/app-mobile/forms/form-address.html

@@ -0,0 +1,41 @@
+<!--
+  @name: Form — Address
+  @kit: app-mobile
+  @width: 360
+  @height: 380
+  @tags: form, address, shipping, delivery
+-->
+<div data-component="Form — Address" style="width:100%;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);padding:var(--kit-space-6, 24px);box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:var(--kit-space-5, 20px)">Shipping Address</div>
+  <form style="display:flex;flex-direction:column;gap:var(--kit-space-4, 16px)">
+    <div style="display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+      <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Street Address</label>
+      <input type="text" placeholder="123 Main Street" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+      <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Apt / Suite (optional)</label>
+      <input type="text" placeholder="Apt 4B" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+    </div>
+    <div style="display:flex;gap:var(--kit-space-3, 12px)">
+      <div style="flex:1;display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+        <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">City</label>
+        <input type="text" placeholder="New York" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+      </div>
+      <div style="flex:1;display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+        <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">State</label>
+        <input type="text" placeholder="NY" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+      </div>
+    </div>
+    <div style="display:flex;gap:var(--kit-space-3, 12px)">
+      <div style="flex:1;display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+        <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">ZIP Code</label>
+        <input type="text" placeholder="10001" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+      </div>
+      <div style="flex:1;display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+        <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Country</label>
+        <input type="text" placeholder="United States" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+      </div>
+    </div>
+    <button type="submit" style="height:46px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);cursor:pointer;font-family:var(--kit-font, Inter, system-ui, sans-serif)">Save Address</button>
+  </form>
+</div>

package/components/app-mobile/forms/form-payment.html

@@ -0,0 +1,37 @@
+<!--
+  @name: Form — Payment Card
+  @kit: app-mobile
+  @width: 360
+  @height: 280
+  @tags: form, payment, credit card, checkout
+-->
+<div data-component="Form — Payment Card" style="width:100%;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);padding:var(--kit-space-6, 24px);box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:var(--kit-space-5, 20px)">Payment Details</div>
+  <form style="display:flex;flex-direction:column;gap:var(--kit-space-4, 16px)">
+    <div style="display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+      <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Card Number</label>
+      <div style="position:relative">
+        <input type="text" placeholder="1234 5678 9012 3456" style="width:100%;height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 44px 0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+        <div style="position:absolute;right:12px;top:50%;transform:translateY(-50%);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"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg></div>
+      </div>
+    </div>
+    <div style="display:flex;gap:var(--kit-space-3, 12px)">
+      <div style="flex:1;display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+        <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Expiry</label>
+        <input type="text" placeholder="MM / YY" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+      </div>
+      <div style="flex:1;display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+        <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">CVC</label>
+        <input type="text" placeholder="123" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+      </div>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+      <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Cardholder Name</label>
+      <input type="text" placeholder="Name on card" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+    </div>
+    <button type="submit" style="height:46px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);cursor:pointer;font-family:var(--kit-font, Inter, system-ui, sans-serif);display:flex;align-items:center;justify-content:center;gap:8px">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+      Pay Now
+    </button>
+  </form>
+</div>

package/components/app-mobile/forms/form-profile.html

@@ -0,0 +1,39 @@
+<!--
+  @name: Form — Profile Edit
+  @kit: app-mobile
+  @width: 360
+  @height: 450
+  @tags: form, profile, edit, account
+-->
+<div data-component="Form — Profile Edit" style="width:100%;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);padding:var(--kit-space-6, 24px);box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;flex-direction:column;align-items:center;margin-bottom:var(--kit-space-6, 24px)">
+    <div style="position:relative;margin-bottom:var(--kit-space-2, 8px)">
+      <div style="width:80px;height:80px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;overflow:hidden">
+        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><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="position:absolute;bottom:0;right:0;width:28px;height:28px;background:var(--kit-primary, #6366F1);border-radius:var(--kit-radius-full, 9999px);display:flex;align-items:center;justify-content:center;border:2px solid var(--kit-bg, #FFFFFF);cursor:pointer">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+      </div>
+    </div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-primary, #6366F1);font-weight:var(--kit-font-medium, 500)">Change Photo</div>
+  </div>
+  <form style="display:flex;flex-direction:column;gap:var(--kit-space-4, 16px)">
+    <div style="display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+      <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Full Name</label>
+      <input type="text" value="Alex Johnson" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+      <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Username</label>
+      <input type="text" value="@alexjohnson" style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+      <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Bio</label>
+      <textarea rows="3" placeholder="Tell us about yourself..." style="border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:10px 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);background:var(--kit-bg, #FFFFFF);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);resize:none;box-sizing:border-box">Designer and creative thinker based in San Francisco.</textarea>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:var(--kit-space-1, 4px)">
+      <label style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">Email</label>
+      <input type="email" value="alex@example.com" disabled style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8);background:var(--kit-surface, #F8FAFC);outline:none;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box;cursor:not-allowed" />
+    </div>
+    <button type="submit" style="height:46px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);cursor:pointer;font-family:var(--kit-font, Inter, system-ui, sans-serif)">Save Changes</button>
+  </form>
+</div>

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

@@ -0,0 +1,28 @@
+<!--
+  @name: Time Picker
+  @kit: app-mobile
+  @width: 280
+  @height: 200
+  @tags: time, picker, clock, input
+-->
+<div data-component="Time Picker" style="width:100%;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);padding:var(--kit-space-5, 20px);box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);text-align:center;margin-bottom:var(--kit-space-4, 16px)">Select Time</div>
+  <div style="display:flex;align-items:center;justify-content:center;gap:var(--kit-space-3, 12px);margin-bottom:var(--kit-space-5, 20px)">
+    <div style="display:flex;flex-direction:column;align-items:center;gap:var(--kit-space-1, 4px)">
+      <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8);padding:2px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg></div>
+      <div style="width:56px;height:48px;background:var(--kit-surface, #F8FAFC);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-2xl, 24px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">09</div>
+      <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8);padding:2px"><svg width="16" height="16" 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="font-size:var(--kit-text-2xl, 24px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);padding-bottom:4px">:</div>
+    <div style="display:flex;flex-direction:column;align-items:center;gap:var(--kit-space-1, 4px)">
+      <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8);padding:2px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg></div>
+      <div style="width:56px;height:48px;background:var(--kit-surface, #F8FAFC);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-2xl, 24px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">30</div>
+      <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8);padding:2px"><svg width="16" height="16" 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="display:flex;flex-direction:column;gap:var(--kit-space-1, 4px);margin-left:var(--kit-space-2, 8px)">
+      <div style="width:44px;height:32px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border-radius:var(--kit-radius-sm, 4px);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);cursor:pointer">AM</div>
+      <div style="width:44px;height:32px;background:var(--kit-surface, #F8FAFC);border:1px solid var(--kit-border, #E2E8F0);color:var(--kit-text-2, #475569);border-radius:var(--kit-radius-sm, 4px);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);cursor:pointer">PM</div>
+    </div>
+  </div>
+  <button type="button" style="width:100%;height:40px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);cursor:pointer;font-family:var(--kit-font, Inter, system-ui, sans-serif)">Confirm</button>
+</div>

package/components/app-mobile/healthcare/appointment-card.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Appointment Card
+  @kit: app-mobile
+  @width: 360
+  @height: 120
+  @tags: appointment, doctor, booking, healthcare
+-->
+<div data-component="Appointment Card" 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);">
+  <img src="https://placehold.jp/48x48.png" style="width:48px;height:48px;border-radius:var(--kit-radius-full,9999px);object-fit:cover;flex-shrink:0;display:block;" alt="Doctor"/>
+  <div style="flex:1;min-width:0;">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Dr. Sarah Chen</span>
+      <span style="padding:2px 8px;background:rgba(34,197,94,0.1);color:var(--kit-success,#22C55E);font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);border-radius:var(--kit-radius-full,9999px);">Confirmed</span>
+    </div>
+    <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-2,#475569);margin-bottom:8px;">Cardiologist</div>
+    <div style="display:flex;align-items:center;justify-content:space-between;">
+      <div style="display:flex;align-items:center;gap:4px;color:var(--kit-text-3,#94A3B8);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="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>
+        <span style="font-size:var(--kit-text-xs,12px);">Mar 28, 2:30 PM</span>
+      </div>
+      <div style="width:32px;height:32px;border-radius:var(--kit-radius,8px);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"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
+      </div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/healthcare/doctor-profile.html

@@ -0,0 +1,32 @@
+<!--
+  @name: Doctor Profile Card
+  @kit: app-mobile
+  @width: 360
+  @height: 180
+  @tags: doctor, profile, healthcare, medical
+-->
+<div data-component="Doctor Profile Card" 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;gap:14px;align-items:center;">
+    <img src="https://placehold.jp/72x72.png" style="width:72px;height:72px;border-radius:var(--kit-radius-full,9999px);object-fit:cover;flex-shrink:0;display:block;" alt="Doctor"/>
+    <div style="flex:1;min-width:0;">
+      <div style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);margin-bottom:2px;">Dr. Sarah Chen</div>
+      <div style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);margin-bottom:2px;">Cardiologist</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);margin-bottom:6px;">Mount Sinai Hospital</div>
+      <div style="display:flex;align-items:center;gap:4px;">
+        <svg width="14" height="14" 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-semibold,600);color:var(--kit-text,#0F172A);">4.9</span>
+      </div>
+    </div>
+  </div>
+  <div style="display:flex;gap:8px;align-items:center;">
+    <div style="flex:1;text-align:center;padding:8px 0;background:var(--kit-surface,#F8FAFC);border-radius:var(--kit-radius,8px);">
+      <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">12</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Years Exp.</div>
+    </div>
+    <div style="flex:1;text-align:center;padding:8px 0;background:var(--kit-surface,#F8FAFC);border-radius:var(--kit-radius,8px);">
+      <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">2.4K</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Patients</div>
+    </div>
+    <div style="flex:2;height:40px;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;">Book Appointment</div>
+  </div>
+</div>

package/components/app-mobile/healthcare/health-metric-chart.html

@@ -0,0 +1,51 @@
+<!--
+  @name: Health Metric Chart
+  @kit: app-mobile
+  @width: 360
+  @height: 220
+  @tags: health, metric, chart, graph
+-->
+<div data-component="Health Metric Chart" 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;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;">
+    <div>
+      <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Heart Rate</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);margin-top:2px;">Last 7 days</div>
+    </div>
+    <div style="text-align:right;">
+      <div style="font-size:var(--kit-text-2xl,24px);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 avg</div>
+    </div>
+  </div>
+  <svg width="100%" height="120" viewBox="0 0 328 120" preserveAspectRatio="none" style="display:block;margin-top:8px;">
+    <defs>
+      <linearGradient id="hrGrad" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" style="stop-color:#EF4444;stop-opacity:0.15"/>
+        <stop offset="100%" style="stop-color:#EF4444;stop-opacity:0.01"/>
+      </linearGradient>
+    </defs>
+    <!-- Grid lines -->
+    <line x1="0" y1="30" x2="328" y2="30" stroke="var(--kit-border,#E2E8F0)" stroke-width="0.5" stroke-dasharray="4,4"/>
+    <line x1="0" y1="60" x2="328" y2="60" stroke="var(--kit-border,#E2E8F0)" stroke-width="0.5" stroke-dasharray="4,4"/>
+    <line x1="0" y1="90" x2="328" y2="90" stroke="var(--kit-border,#E2E8F0)" stroke-width="0.5" stroke-dasharray="4,4"/>
+    <!-- Area -->
+    <path d="M0,55 L55,40 L110,60 L165,35 L220,50 L275,30 L328,45 L328,100 L0,100 Z" fill="url(#hrGrad)"/>
+    <!-- Line -->
+    <polyline points="0,55 55,40 110,60 165,35 220,50 275,30 328,45" fill="none" stroke="#EF4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <!-- Data points -->
+    <circle cx="0" cy="55" r="3" fill="#EF4444"/>
+    <circle cx="55" cy="40" r="3" fill="#EF4444"/>
+    <circle cx="110" cy="60" r="3" fill="#EF4444"/>
+    <circle cx="165" cy="35" r="3" fill="#EF4444"/>
+    <circle cx="220" cy="50" r="3" fill="#EF4444"/>
+    <circle cx="275" cy="30" r="3" fill="#EF4444"/>
+    <circle cx="328" cy="45" r="3" fill="#EF4444"/>
+    <!-- Labels -->
+    <text x="0" y="116" font-size="10" fill="var(--kit-text-3,#94A3B8)" font-family="var(--kit-font,Inter,system-ui,sans-serif)">Mon</text>
+    <text x="46" y="116" font-size="10" fill="var(--kit-text-3,#94A3B8)" font-family="var(--kit-font,Inter,system-ui,sans-serif)">Tue</text>
+    <text x="98" y="116" font-size="10" fill="var(--kit-text-3,#94A3B8)" font-family="var(--kit-font,Inter,system-ui,sans-serif)">Wed</text>
+    <text x="151" y="116" font-size="10" fill="var(--kit-text-3,#94A3B8)" font-family="var(--kit-font,Inter,system-ui,sans-serif)">Thu</text>
+    <text x="210" y="116" font-size="10" fill="var(--kit-text-3,#94A3B8)" font-family="var(--kit-font,Inter,system-ui,sans-serif)">Fri</text>
+    <text x="264" y="116" font-size="10" fill="var(--kit-text-3,#94A3B8)" font-family="var(--kit-font,Inter,system-ui,sans-serif)">Sat</text>
+    <text x="313" y="116" font-size="10" fill="var(--kit-text-3,#94A3B8)" font-family="var(--kit-font,Inter,system-ui,sans-serif)">Sun</text>
+  </svg>
+</div>

package/components/app-mobile/healthcare/insurance-card.html

@@ -0,0 +1,35 @@
+<!--
+  @name: Insurance Card
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: insurance, card, health, healthcare
+-->
+<div data-component="Insurance Card" style="width:100%;max-width:360px;height:200px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:linear-gradient(135deg,var(--kit-primary,#6366F1),#818CF8);border-radius:var(--kit-radius-lg,16px);padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:#FFFFFF;position:relative;overflow:hidden;">
+  <div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.1);"></div>
+  <div style="position:absolute;bottom:-40px;right:40px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,0.06);"></div>
+  <div style="display:flex;justify-content:space-between;align-items:flex-start;">
+    <div>
+      <div style="font-size:var(--kit-text-xs,12px);opacity:0.8;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;">Health Insurance</div>
+      <div style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);">Premium PPO</div>
+    </div>
+    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+  </div>
+  <div>
+    <div style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);margin-bottom:8px;">John Smith</div>
+    <div style="display:flex;gap:24px;">
+      <div>
+        <div style="font-size:10px;opacity:0.7;text-transform:uppercase;letter-spacing:0.5px;">Member ID</div>
+        <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);margin-top:1px;">INS-2024-001234</div>
+      </div>
+      <div>
+        <div style="font-size:10px;opacity:0.7;text-transform:uppercase;letter-spacing:0.5px;">Group</div>
+        <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);margin-top:1px;">CORP-500</div>
+      </div>
+      <div>
+        <div style="font-size:10px;opacity:0.7;text-transform:uppercase;letter-spacing:0.5px;">Valid Thru</div>
+        <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);margin-top:1px;">12/2026</div>
+      </div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/healthcare/lab-results.html

@@ -0,0 +1,23 @@
+<!--
+  @name: Lab Results Row
+  @kit: app-mobile
+  @width: 360
+  @height: 72
+  @tags: lab, results, test, healthcare
+-->
+<div data-component="Lab Results Row" 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;">
+  <div style="width:40px;height:40px;border-radius:var(--kit-radius,8px);background:var(--kit-surface,#F8FAFC);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--kit-text-2,#475569);">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+  </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);">Blood Glucose</div>
+    <div style="display:flex;align-items:center;gap:6px;margin-top:2px;">
+      <span style="width:6px;height:6px;border-radius:50%;background:var(--kit-success,#22C55E);flex-shrink:0;"></span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Normal (70–100)</span>
+    </div>
+  </div>
+  <div style="text-align:right;flex-shrink:0;">
+    <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">95 mg/dL</div>
+    <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);margin-top:1px;">Mar 25</div>
+  </div>
+</div>