designkit-ai 1.0.0

package/components/app-mobile/logistics/package-tracker.html

@@ -0,0 +1,42 @@
+<!--
+  @name: Package Tracker
+  @category: logistics
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: package, tracker, delivery, shipping, logistics
+-->
+<div data-component="Package Tracker" style="width:100%;padding:16px;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="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
+    <div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px">Tracking #</div>
+      <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-top:2px">PKG-8294-7153</div>
+    </div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">FedEx Express</div>
+  </div>
+  <div style="display:flex;align-items:center;gap:0;margin-bottom:14px;position:relative">
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1">
+      <div style="width:24px;height:24px;border-radius:12px;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="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
+      <div style="font-size:10px;color:var(--kit-success, #22C55E);font-weight:500">Ordered</div>
+    </div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1">
+      <div style="width:24px;height:24px;border-radius:12px;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="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
+      <div style="font-size:10px;color:var(--kit-success, #22C55E);font-weight:500">Shipped</div>
+    </div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1">
+      <div style="width:24px;height:24px;border-radius:12px;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)"><div style="width:8px;height:8px;border-radius:4px;background:#fff"></div></div>
+      <div style="font-size:10px;color:var(--kit-primary, #6366F1);font-weight:600">In Transit</div>
+    </div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1">
+      <div style="width:24px;height:24px;border-radius:12px;border:2px solid var(--kit-border, #E2E8F0);box-sizing:border-box;background:var(--kit-surface, #F8FAFC)"></div>
+      <div style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Delivered</div>
+    </div>
+    <div style="position:absolute;top:12px;left:12%;right:12%;height:2px;background:var(--kit-border, #E2E8F0);z-index:0">
+      <div style="width:66%;height:100%;background:var(--kit-success, #22C55E)"></div>
+    </div>
+  </div>
+  <div style="display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--kit-border, #E2E8F0)">
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Estimated Delivery</div>
+    <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Mar 28, 2026</div>
+  </div>
+</div>

package/components/app-mobile/logistics/shipment-row.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Shipment Row
+  @category: logistics
+  @kit: app-mobile
+  @width: 360
+  @height: 64
+  @tags: shipment, order, tracking, logistics
+-->
+<div data-component="Shipment Row" style="display:flex;align-items:center;width:100%;padding:12px 16px;gap:12px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:40px;height:40px;border-radius:10px;background:var(--kit-surface-2, #F1F5F9);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" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 9.4l-9-5.19"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></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)">Order #SHP-4521</div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:1px">San Francisco, CA</div>
+  </div>
+  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
+    <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-info, #3B82F6);background:rgba(59,130,246,0.1);padding:2px 8px;border-radius:4px">In Transit</span>
+    <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Mar 26</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"><polyline points="9 18 15 12 9 6"/></svg>
+  </div>
+</div>

package/components/app-mobile/media/audio-player.html

@@ -0,0 +1,38 @@
+<!--
+  @name: Audio Player
+  @kit: app-mobile
+  @width: 360
+  @height: 80
+  @tags: audio, player, music, podcast
+-->
+<div data-component="Audio Player" 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:12px;display:flex;flex-direction:row;align-items:center;gap:12px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="width:56px;min-width:56px;height:56px;border-radius:var(--kit-radius,8px);overflow:hidden;">
+    <img src="https://placehold.jp/56x56" alt="Album art" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+  <div style="flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;">
+    <div style="display:flex;flex-direction:column;gap:1px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Midnight Serenade</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Luna Waves</span>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:4px;">
+      <div style="width:100%;height:4px;background:var(--kit-surface-2,#F1F5F9);border-radius:var(--kit-radius-full,9999px);">
+        <div style="width:40%;height:100%;background:var(--kit-primary,#6366F1);border-radius:var(--kit-radius-full,9999px);"></div>
+      </div>
+      <div style="display:flex;justify-content:space-between;">
+        <span style="font-size:10px;color:var(--kit-text-3,#94A3B8);font-variant-numeric:tabular-nums;">1:23</span>
+        <span style="font-size:10px;color:var(--kit-text-3,#94A3B8);font-variant-numeric:tabular-nums;">3:45</span>
+      </div>
+    </div>
+  </div>
+  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
+    <button style="border:none;background:none;cursor:pointer;padding:0;display:flex;align-items: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"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg>
+    </button>
+    <button style="width:36px;height:36px;border-radius:var(--kit-radius-full,9999px);background:var(--kit-primary,#6366F1);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--kit-bg,#FFFFFF)" stroke="none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+    </button>
+    <button style="border:none;background:none;cursor:pointer;padding:0;display:flex;align-items: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"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
+    </button>
+  </div>
+</div>

package/components/app-mobile/media/image-carousel.html

@@ -0,0 +1,28 @@
+<!--
+  @name: Image Carousel
+  @kit: app-mobile
+  @width: 360
+  @height: 250
+  @tags: carousel, slider, images, gallery
+-->
+<div data-component="Image Carousel" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);position:relative;display:flex;flex-direction:column;gap:12px;">
+  <div style="width:100%;height:200px;border-radius:var(--kit-radius-md,12px);overflow:hidden;position:relative;">
+    <img src="https://placehold.jp/360x200" alt="Carousel slide" style="width:100%;height:100%;object-fit:cover;display:block;" />
+    <!-- Left arrow -->
+    <button style="position:absolute;left:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:var(--kit-radius-full,9999px);background:rgba(255,255,255,0.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.1);">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text,#0F172A)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+    </button>
+    <!-- Right arrow -->
+    <button style="position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:var(--kit-radius-full,9999px);background:rgba(255,255,255,0.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.1);">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text,#0F172A)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+    </button>
+  </div>
+  <!-- Dot indicators -->
+  <div style="display:flex;align-items:center;justify-content:center;gap:6px;">
+    <div style="width:8px;height:8px;border-radius:var(--kit-radius-full,9999px);background:var(--kit-border,#E2E8F0);"></div>
+    <div style="width:8px;height:8px;border-radius:var(--kit-radius-full,9999px);background:var(--kit-primary,#6366F1);"></div>
+    <div style="width:8px;height:8px;border-radius:var(--kit-radius-full,9999px);background:var(--kit-border,#E2E8F0);"></div>
+    <div style="width:8px;height:8px;border-radius:var(--kit-radius-full,9999px);background:var(--kit-border,#E2E8F0);"></div>
+    <div style="width:8px;height:8px;border-radius:var(--kit-radius-full,9999px);background:var(--kit-border,#E2E8F0);"></div>
+  </div>
+</div>

package/components/app-mobile/menus/menu-context.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Menu — Context
+  @category: menus
+  @kit: app-mobile
+  @width: 180
+  @height: 144
+  @tags: menu, context, right-click, popup
+-->
+<div data-component="Menu — Context" style="width:180px;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-sm, 4px);box-shadow:var(--kit-shadow-lg, 0 10px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.04));padding:8px 0;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="padding:0 12px;height:40px;display:flex;align-items:center;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);cursor:pointer">Cut</div>
+  <div style="padding:0 12px;height:40px;display:flex;align-items:center;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);cursor:pointer">Copy</div>
+  <div style="padding:0 12px;height:40px;display:flex;align-items:center;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);cursor:pointer">Paste</div>
+</div>

package/components/app-mobile/menus/menu-dropdown.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Menu — Dropdown
+  @category: menus
+  @kit: app-mobile
+  @width: 200
+  @height: 200
+  @tags: menu, dropdown, popup, context
+-->
+<div data-component="Menu — Dropdown" style="width:200px;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-sm, 4px);box-shadow:var(--kit-shadow-lg, 0 10px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.04));padding:8px 0;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;align-items:center;gap:12px;padding:0 12px;height:48px;cursor:pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)">Edit</span></div>
+  <div style="display:flex;align-items:center;gap:12px;padding:0 12px;height:48px;cursor:pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)">Copy</span></div>
+  <div style="height:1px;background:var(--kit-border, #E2E8F0);margin:4px 0"></div>
+  <div style="display:flex;align-items:center;gap:12px;padding:0 12px;height:48px;cursor:pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-danger, #EF4444)" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-danger, #EF4444)">Delete</span></div>
+</div>

package/components/app-mobile/native/gesture-nav-bar.html

@@ -0,0 +1,11 @@
+<!--
+  @name: Gesture Navigation Bar — Android
+  @category: native
+  @kit: app-mobile
+  @width: 360
+  @height: 20
+  @tags: gesture-nav, system, android, native, home-indicator
+-->
+<div data-component="Gesture Navigation Bar — Android" style="display:flex;justify-content:center;align-items:flex-end;width:100%;height:20px;padding-bottom:4px;box-sizing:border-box">
+  <div style="width:134px;height:5px;border-radius:3px;background:var(--kit-text, #0F172A);opacity:0.2"></div>
+</div>

package/components/app-mobile/native/ios-action-sheet.html

@@ -0,0 +1,19 @@
+<!--
+  @name: iOS Action Sheet
+  @category: native
+  @kit: app-mobile
+  @width: 360
+  @height: 260
+  @tags: ios, action-sheet, bottom, modal, options, native
+-->
+<div data-component="iOS Action Sheet" style="width:100%;font-family:-apple-system, SF Pro, system-ui, sans-serif;padding:0 8px">
+  <div style="background:var(--kit-bg, #FFFFFF);border-radius:14px;overflow:hidden;margin-bottom:8px">
+    <div style="padding:14px 16px;text-align:center;font-size:13px;color:var(--kit-text-3, #94A3B8);border-bottom:0.5px solid var(--kit-border, #E2E8F0)">Choose an option</div>
+    <div style="padding:16px;text-align:center;font-size:20px;color:var(--kit-primary, #6366F1);border-bottom:0.5px solid var(--kit-border, #E2E8F0);cursor:pointer">Share</div>
+    <div style="padding:16px;text-align:center;font-size:20px;color:var(--kit-primary, #6366F1);border-bottom:0.5px solid var(--kit-border, #E2E8F0);cursor:pointer">Copy Link</div>
+    <div style="padding:16px;text-align:center;font-size:20px;color:var(--kit-danger, #EF4444);cursor:pointer">Delete</div>
+  </div>
+  <div style="background:var(--kit-bg, #FFFFFF);border-radius:14px;overflow:hidden">
+    <div style="padding:16px;text-align:center;font-size:20px;font-weight:600;color:var(--kit-primary, #6366F1);cursor:pointer">Cancel</div>
+  </div>
+</div>

package/components/app-mobile/native/ios-alert.html

@@ -0,0 +1,18 @@
+<!--
+  @name: iOS Alert Dialog
+  @category: native
+  @kit: app-mobile
+  @width: 270
+  @height: 160
+  @tags: ios, alert, dialog, modal, native, confirm
+-->
+<div data-component="iOS Alert Dialog" style="width:270px;background:rgba(248,250,252,0.95);border-radius:14px;overflow:hidden;font-family:-apple-system, SF Pro, system-ui, sans-serif;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.12)">
+  <div style="padding:20px 16px 14px">
+    <div style="font-size:17px;font-weight:600;color:var(--kit-text, #0F172A);margin-bottom:6px">Delete Item?</div>
+    <div style="font-size:13px;color:var(--kit-text-2, #475569);line-height:1.4">This action cannot be undone. Are you sure you want to continue?</div>
+  </div>
+  <div style="border-top:0.5px solid var(--kit-border, #E2E8F0);display:flex">
+    <div style="flex:1;padding:12px;font-size:17px;color:var(--kit-primary, #6366F1);font-weight:600;cursor:pointer;border-right:0.5px solid var(--kit-border, #E2E8F0)">Cancel</div>
+    <div style="flex:1;padding:12px;font-size:17px;color:var(--kit-danger, #EF4444);cursor:pointer">Delete</div>
+  </div>
+</div>

package/components/app-mobile/native/ios-home-indicator.html

@@ -0,0 +1,11 @@
+<!--
+  @name: iOS Home Indicator
+  @category: native
+  @kit: app-mobile
+  @width: 390
+  @height: 34
+  @tags: ios, home-indicator, bottom, safe-area, native
+-->
+<div data-component="iOS Home Indicator" style="width:100%;height:34px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:8px;box-sizing:border-box">
+  <div style="width:134px;height:5px;border-radius:3px;background:var(--kit-text, #0F172A);opacity:0.15"></div>
+</div>

package/components/app-mobile/native/ios-list-cell.html

@@ -0,0 +1,14 @@
+<!--
+  @name: iOS List Cell — Settings Style
+  @category: native
+  @kit: app-mobile
+  @width: 390
+  @height: 44
+  @tags: ios, list, cell, settings, row, native
+-->
+<div data-component="iOS List Cell — Settings Style" style="display:flex;align-items:center;width:100%;height:44px;padding:0 16px;box-sizing:border-box;font-family:-apple-system, SF Pro, system-ui, sans-serif;background:var(--kit-bg, #FFFFFF)">
+  <div style="width:28px;height:28px;border-radius:6px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;margin-right:12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></svg></div>
+  <div style="flex:1;font-size:17px;color:var(--kit-text, #0F172A)">Wi-Fi</div>
+  <div style="font-size:17px;color:var(--kit-text-3, #94A3B8);margin-right:8px">Home Network</div>
+  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 1 7 7 1 13"/></svg>
+</div>

package/components/app-mobile/native/ios-nav-bar.html

@@ -0,0 +1,16 @@
+<!--
+  @name: iOS Navigation Bar — Large Title
+  @category: native
+  @kit: app-mobile
+  @width: 390
+  @height: 96
+  @tags: ios, nav-bar, large-title, back, native, navigation
+-->
+<div data-component="iOS Navigation Bar — Large Title" style="width:100%;font-family:-apple-system, SF Pro, system-ui, sans-serif;background:var(--kit-bg, #FFFFFF)">
+  <div style="display:flex;align-items:center;height:44px;padding:0 8px">
+    <div style="display:flex;align-items:center;gap:4px;padding:0 8px;color:var(--kit-primary, #6366F1);cursor:pointer"><svg width="10" height="18" viewBox="0 0 10 18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 1 1 9 9 17"/></svg><span style="font-size:17px">Back</span></div>
+    <div style="flex:1"></div>
+    <div style="padding:0 8px;color:var(--kit-primary, #6366F1);cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div>
+  </div>
+  <div style="padding:0 16px;font-size:34px;font-weight:700;color:var(--kit-text, #0F172A)">Library</div>
+</div>

package/components/app-mobile/native/ios-page-sheet.html

@@ -0,0 +1,17 @@
+<!--
+  @name: iOS Page Sheet — Modal
+  @category: native
+  @kit: app-mobile
+  @width: 390
+  @height: 480
+  @tags: ios, page-sheet, modal, bottom, native
+-->
+<div data-component="iOS Page Sheet — Modal" style="width:100%;height:480px;background:var(--kit-bg, #FFFFFF);border-radius:12px 12px 0 0;font-family:-apple-system, SF Pro, system-ui, sans-serif;display:flex;flex-direction:column;box-shadow:0 -4px 20px rgba(0,0,0,0.1)">
+  <div style="display:flex;justify-content:center;padding:8px 0 4px"><div style="width:36px;height:5px;border-radius:3px;background:var(--kit-surface-3, #E2E8F0)"></div></div>
+  <div style="display:flex;align-items:center;padding:8px 16px;border-bottom:0.5px solid var(--kit-border, #E2E8F0)">
+    <div style="width:60px;font-size:17px;color:var(--kit-primary, #6366F1);cursor:pointer">Cancel</div>
+    <div style="flex:1;text-align:center;font-size:17px;font-weight:600;color:var(--kit-text, #0F172A)">New Item</div>
+    <div style="width:60px;text-align:right;font-size:17px;font-weight:600;color:var(--kit-primary, #6366F1);cursor:pointer">Save</div>
+  </div>
+  <div style="flex:1;padding:20px 16px;font-size:15px;color:var(--kit-text-2, #475569);line-height:1.6">Sheet content area — forms, options, or any interactive content.</div>
+</div>

package/components/app-mobile/native/ios-search-bar.html

@@ -0,0 +1,15 @@
+<!--
+  @name: iOS Search Bar
+  @category: native
+  @kit: app-mobile
+  @width: 390
+  @height: 40
+  @tags: ios, search, bar, input, native
+-->
+<div data-component="iOS Search Bar" style="width:100%;padding:0 16px;box-sizing:border-box;font-family:-apple-system, SF Pro, system-ui, sans-serif">
+  <div style="display:flex;align-items:center;width:100%;height:36px;background:var(--kit-surface-2, #F1F5F9);border-radius:10px;padding:0 10px;gap:6px">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+    <span style="font-size:17px;color:var(--kit-text-3, #94A3B8)">Search</span>
+    <div style="margin-left:auto;display:flex;align-items:center;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+</div>

package/components/app-mobile/native/ios-segmented-control.html

@@ -0,0 +1,13 @@
+<!--
+  @name: iOS Segmented Control
+  @category: native
+  @kit: app-mobile
+  @width: 360
+  @height: 32
+  @tags: ios, segmented, control, toggle, tabs, native
+-->
+<div data-component="iOS Segmented Control" style="display:flex;width:100%;height:32px;background:var(--kit-surface-2, #F1F5F9);border-radius:8px;padding:2px;box-sizing:border-box;font-family:-apple-system, SF Pro, system-ui, sans-serif;font-size:13px">
+  <div style="flex:1;display:flex;align-items:center;justify-content:center;background:var(--kit-bg, #FFFFFF);border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);font-weight:600;color:var(--kit-text, #0F172A);cursor:pointer">First</div>
+  <div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--kit-text-2, #475569);cursor:pointer">Second</div>
+  <div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--kit-text-2, #475569);cursor:pointer">Third</div>
+</div>

package/components/app-mobile/native/ios-status-bar.html

@@ -0,0 +1,17 @@
+<!--
+  @name: iOS Status Bar — with Dynamic Island
+  @category: native
+  @kit: app-mobile
+  @width: 390
+  @height: 54
+  @tags: ios, status-bar, dynamic-island, notch, native
+-->
+<div data-component="iOS Status Bar — with Dynamic Island" style="width:100%;height:54px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px 8px;box-sizing:border-box;font-family:-apple-system, SF Pro, system-ui, sans-serif;font-size:15px;font-weight:600;color:var(--kit-text, #0F172A);position:relative">
+  <div>9:41</div>
+  <div style="position:absolute;top:10px;left:50%;transform:translateX(-50%);width:126px;height:37px;background:#000000;border-radius:20px"></div>
+  <div style="display:flex;align-items:center;gap:5px">
+    <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor" opacity="0.8"><rect x="0" y="3" width="3" height="9" rx="1"/><rect x="4.5" y="2" width="3" height="10" rx="1"/><rect x="9" y="0.5" width="3" height="11.5" rx="1"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg>
+    <svg width="15" height="12" viewBox="0 0 15 12" fill="none" stroke="currentColor" stroke-width="1.2" opacity="0.8"><path d="M0.5 4C3.5 1 11.5 1 14.5 4"/><path d="M3 7C5 5 10 5 12 7"/><circle cx="7.5" cy="10" r="1.5" fill="currentColor"/></svg>
+    <svg width="25" height="12" viewBox="0 0 25 12" fill="none" opacity="0.8"><rect x="0" y="1" width="22" height="10" rx="2" stroke="currentColor" stroke-width="1"/><rect x="22.5" y="3.5" width="2" height="5" rx="1" fill="currentColor" opacity="0.4"/><rect x="1.5" y="2.5" width="17" height="7" rx="1" fill="currentColor"/></svg>
+  </div>
+</div>

package/components/app-mobile/native/ios-tab-bar.html

@@ -0,0 +1,31 @@
+<!--
+  @name: iOS Tab Bar — 5 Items
+  @category: native
+  @kit: app-mobile
+  @width: 390
+  @height: 83
+  @tags: ios, tab-bar, bottom, navigation, native
+-->
+<div data-component="iOS Tab Bar — 5 Items" style="width:100%;height:83px;background:var(--kit-bg, #FFFFFF);border-top:0.5px solid var(--kit-border, #E2E8F0);font-family:-apple-system, SF Pro, system-ui, sans-serif;display:flex;padding:6px 0 28px;box-sizing:border-box">
+  <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="var(--kit-primary, #6366F1)" stroke="var(--kit-primary, #6366F1)" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+    <span style="font-size:10px;font-weight:500;color:var(--kit-primary, #6366F1)">Home</span>
+  </div>
+  <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="1.8"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+    <span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Search</span>
+  </div>
+  <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="1.8"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+    <span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Library</span>
+  </div>
+  <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="1.8"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+    <div style="position:absolute;top:-2px;right:calc(50% - 16px);width:16px;height:16px;border-radius:8px;background:var(--kit-danger, #EF4444);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center">3</div>
+    <span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Alerts</span>
+  </div>
+  <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="1.8"><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>
+    <span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Profile</span>
+  </div>
+</div>

package/components/app-mobile/native/ios-wheel-picker.html

@@ -0,0 +1,34 @@
+<!--
+  @name: iOS Wheel Picker — Date/Time
+  @category: native
+  @kit: app-mobile
+  @width: 360
+  @height: 220
+  @tags: ios, wheel, picker, date, time, scroll, native
+-->
+<div data-component="iOS Wheel Picker — Date/Time" style="width:100%;background:var(--kit-surface, #F8FAFC);border-radius:12px;padding:8px;box-sizing:border-box;font-family:-apple-system, SF Pro, system-ui, sans-serif">
+  <div style="display:flex;height:200px;position:relative">
+    <div style="position:absolute;top:50%;left:8px;right:8px;height:36px;transform:translateY(-50%);background:var(--kit-surface-2, #F1F5F9);border-radius:8px;z-index:0"></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;z-index:1">
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.4">January</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.6">February</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:22px;font-weight:600;color:var(--kit-text, #0F172A)">March</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.6">April</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.4">May</div>
+    </div>
+    <div style="flex:0.6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;z-index:1">
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.4">23</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.6">24</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:22px;font-weight:600;color:var(--kit-text, #0F172A)">25</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.6">26</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.4">27</div>
+    </div>
+    <div style="flex:0.8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;z-index:1">
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.4">2024</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.6">2025</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:22px;font-weight:600;color:var(--kit-text, #0F172A)">2026</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.6">2027</div>
+      <div style="height:36px;display:flex;align-items:center;font-size:20px;color:var(--kit-text-3, #94A3B8);opacity:0.4">2028</div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/native/notification-item.html

@@ -0,0 +1,19 @@
+<!--
+  @name: Notification Item
+  @category: native
+  @kit: app-mobile
+  @width: 360
+  @height: 80
+  @tags: notification, item, push, alert, native
+-->
+<div data-component="Notification Item" style="width:100%;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);padding:12px 16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);display:flex;gap:12px">
+  <div style="width:36px;height:36px;border-radius:8px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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 style="flex:1;min-width:0">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:2px">
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Messages</span>
+      <span style="font-size:var(--kit-text-xs, 11px);color:var(--kit-text-3, #94A3B8)">2m ago</span>
+    </div>
+    <div style="font-size:var(--kit-text-sm, 13px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Alex Johnson</div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Hey! Are you free for lunch today? I was thinking we could try that new place.</div>
+  </div>
+</div>

package/components/app-mobile/native/permission-dialog.html

@@ -0,0 +1,18 @@
+<!--
+  @name: Permission Dialog — Android
+  @category: native
+  @kit: app-mobile
+  @width: 312
+  @height: 220
+  @tags: permission, dialog, system, android, native
+-->
+<div data-component="Permission Dialog — Android" style="width:312px;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));padding:24px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;justify-content:center;margin-bottom:16px;color:var(--kit-primary, #6366F1)"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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 style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);text-align:center;margin-bottom:8px">Allow Camera Access?</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);text-align:center;line-height:1.5;margin-bottom:24px">This app needs camera access to take photos and scan documents.</div>
+  <div style="display:flex;flex-direction:column;gap:8px">
+    <div style="display:flex;align-items:center;justify-content:center;height:40px;background:var(--kit-primary, #6366F1);color:var(--kit-primary-fg, #FFFFFF);border-radius:20px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer">While using the app</div>
+    <div style="display:flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:20px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);cursor:pointer">Only this time</div>
+    <div style="display:flex;align-items:center;justify-content:center;height:40px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);cursor:pointer">Don't allow</div>
+  </div>
+</div>

package/components/app-mobile/native/status-bar.html

@@ -0,0 +1,16 @@
+<!--
+  @name: Status Bar — Android
+  @category: native
+  @kit: app-mobile
+  @width: 360
+  @height: 24
+  @tags: status-bar, system, android, native
+-->
+<div data-component="Status Bar — Android" style="display:flex;align-items:center;justify-content:space-between;width:100%;height:24px;padding:0 16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:12px;font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">
+  <div>9:41</div>
+  <div style="display:flex;align-items:center;gap:6px">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" opacity="0.7"><path d="M1.42 9a16 16 0 0 1 21.16 0M5 12.55a11 11 0 0 1 14.08 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/></svg>
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" opacity="0.7"><rect x="1" y="6" width="18" height="12" rx="2"/><line x1="23" y1="13" x2="23" y2="11"/></svg>
+    <span style="opacity:0.7">85%</span>
+  </div>
+</div>

package/components/app-mobile/navbars/bottom-app-bar.html

@@ -0,0 +1,19 @@
+<!--
+  @name: Bottom App Bar
+  @category: navbars
+  @kit: app-mobile
+  @width: 360
+  @height: 80
+  @tags: bottom-app-bar, navigation, fab
+-->
+<div data-component="Bottom App Bar" style="display:flex;align-items:center;width:100%;height:80px;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:0 16px;box-sizing:border-box;box-shadow:var(--kit-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))">
+  <div style="display:flex;gap:8px">
+    <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></div>
+    <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center"><svg width="24" height="24" 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="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></div>
+  </div>
+  <div style="flex:1"></div>
+  <div style="width:56px;height:56px;border-radius:var(--kit-radius-lg, 16px);background:var(--kit-accent, #F59E0B);color:var(--kit-accent-fg, #FFFFFF);display:flex;align-items:center;justify-content:center;box-shadow:var(--kit-shadow-md, 0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.06));cursor:pointer">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+  </div>
+</div>

package/components/app-mobile/navbars/bottom-nav-3.html

@@ -0,0 +1,28 @@
+<!--
+  @name: Bottom Navigation — 3 Items
+  @category: navbars
+  @kit: app-mobile
+  @width: 360
+  @height: 80
+  @tags: bottom-nav, navigation, tabs, 3-items
+-->
+<div data-component="Bottom Navigation — 3 Items" style="display:flex;align-items:center;width:100%;height:80px;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:12px 0 16px;box-sizing:border-box">
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-secondary, #64748B);display:flex;align-items:center;justify-content:center">
+      <div style="color:var(--kit-secondary-fg, #FFFFFF)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
+    </div>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">Home</div>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;display:flex;align-items:center;justify-content:center">
+      <div style="color:var(--kit-text-2, #475569)"><svg width="24" height="24" 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>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Search</div>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;display:flex;align-items:center;justify-content:center">
+      <div style="color:var(--kit-text-2, #475569)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Profile</div>
+  </div>
+</div>

package/components/app-mobile/navbars/bottom-nav-4.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Bottom Navigation — 4 Items
+  @category: navbars
+  @kit: app-mobile
+  @width: 360
+  @height: 80
+  @tags: bottom-nav, navigation, tabs, 4-items
+-->
+<div data-component="Bottom Navigation — 4 Items" style="display:flex;align-items:center;width:100%;height:80px;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:12px 0 16px;box-sizing:border-box">
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-secondary, #64748B);display:flex;align-items:center;justify-content:center"><div style="color:var(--kit-secondary-fg, #FFFFFF)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div></div>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">Home</div>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;display:flex;align-items:center;justify-content:center"><div style="color:var(--kit-text-2, #475569)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div></div>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Search</div>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;display:flex;align-items:center;justify-content:center"><div style="color:var(--kit-text-2, #475569)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div></div>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Alerts</div>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;display:flex;align-items:center;justify-content:center"><div style="color:var(--kit-text-2, #475569)"><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>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Profile</div>
+  </div>
+</div>

package/components/app-mobile/navbars/bottom-nav-5.html

@@ -0,0 +1,30 @@
+<!--
+  @name: Bottom Navigation — 5 Items
+  @category: navbars
+  @kit: app-mobile
+  @width: 360
+  @height: 80
+  @tags: bottom-nav, navigation, tabs, 5-items
+-->
+<div data-component="Bottom Navigation — 5 Items" style="display:flex;align-items:center;width:100%;height:80px;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:12px 0 16px;box-sizing:border-box">
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-secondary, #64748B);display:flex;align-items:center;justify-content:center"><div style="color:var(--kit-secondary-fg, #FFFFFF)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div></div>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">Home</div>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;display:flex;align-items:center;justify-content:center"><div style="color:var(--kit-text-2, #475569)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div></div>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Search</div>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;display:flex;align-items:center;justify-content:center"><div style="color:var(--kit-text-2, #475569)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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 style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">New</div>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;display:flex;align-items:center;justify-content:center"><div style="color:var(--kit-text-2, #475569)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div></div>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Alerts</div>
+  </div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer">
+    <div style="width:64px;height:32px;display:flex;align-items:center;justify-content:center"><div style="color:var(--kit-text-2, #475569)"><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>
+    <div style="font-size:var(--kit-text-xs, 11px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Profile</div>
+  </div>
+</div>