designkit-ai 1.0.0

package/components/common/ui-icons/icon-minus.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Minus
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, remove, subtract, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 12h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/components/common/ui-icons/icon-notification.html

@@ -0,0 +1,11 @@
+<!--
+@name: Icon Notification
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, notification, bell, alert, ui
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  <path d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

package/components/common/ui-icons/icon-paperplane.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Paperplane
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, send, submit, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M22 2L11 13M22 2l-7 20-4-9-9-4z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/common/ui-icons/icon-pause.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Pause
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, pause, media, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="6" y="4" width="4" height="16" rx="1" fill="currentColor" opacity="0.85"/><rect x="14" y="4" width="4" height="16" rx="1" fill="currentColor" opacity="0.85"/>
+</svg>

package/components/common/ui-icons/icon-pencil.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Pencil
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, edit, pencil, write, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/common/ui-icons/icon-person-2.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Person 2
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, users, group, team, people, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="1.5"/><path d="M23 21v-2a4 4 0 00-3-3.87" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M16 3.13a4 4 0 010 7.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/components/common/ui-icons/icon-person-crop-circle.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Person Crop Circle
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, user, avatar, profile, account, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M6.168 18.849A4 4 0 0110 16h4a4 4 0 013.834 2.855" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/components/common/ui-icons/icon-phone-fill.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Phone Fill
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, call, phone, contact, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/common/ui-icons/icon-photo.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Photo
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, image, photo, picture, gallery, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" opacity="0.6"/><path d="M21 15l-5-5L5 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/common/ui-icons/icon-play-fill.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Play Fill
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, play, video, media, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="5,3 19,12 5,21" fill="currentColor" opacity="0.85"/>
+</svg>

package/components/common/ui-icons/icon-plus.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Plus
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, add, new, create, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/components/common/ui-icons/icon-profile.html

@@ -0,0 +1,11 @@
+<!--
+@name: Icon Profile
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, profile, user, person, account, ui
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="1.5" />
+  <path d="M4 21C4 17.134 7.58172 14 12 14C16.4183 14 20 17.134 20 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+</svg>

package/components/common/ui-icons/icon-qrcode.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon QR Code
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, qr, code, scan, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2" y="2" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="2" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="2" y="14" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="5" y="5" width="2" height="2" fill="currentColor" opacity="0.6"/><rect x="17" y="5" width="2" height="2" fill="currentColor" opacity="0.6"/><rect x="5" y="17" width="2" height="2" fill="currentColor" opacity="0.6"/><rect x="14" y="14" width="3" height="3" fill="currentColor" opacity="0.3"/><rect x="19" y="19" width="3" height="3" fill="currentColor" opacity="0.3"/><rect x="14" y="19" width="3" height="3" fill="currentColor" opacity="0.3"/>
+</svg>

package/components/common/ui-icons/icon-settings.html

@@ -0,0 +1,11 @@
+<!--
+@name: Icon Settings
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, settings, gear, cog, preferences, ui
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="1.5" />
+  <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

package/components/common/ui-icons/icon-share.html

@@ -0,0 +1,14 @@
+<!--
+@name: Icon Share
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, share, send, social, ui
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="1.5" />
+  <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
+  <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="1.5" />
+  <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+  <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+</svg>

package/components/common/ui-icons/icon-slider-horizontal.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Slider Horizontal
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, slider, control, adjust, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <line x1="4" y1="21" x2="4" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="4" y1="10" x2="4" y2="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="12" y1="21" x2="12" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="12" y1="8" x2="12" y2="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="20" y1="21" x2="20" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="20" y1="12" x2="20" y2="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="1" y1="14" x2="7" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="9" y1="8" x2="15" y2="8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="17" y1="16" x2="23" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/components/common/ui-icons/icon-square-grid.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Square Grid
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, grid, apps, dashboard, ios, launchpad
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
+</svg>

package/components/common/ui-icons/icon-star-fill.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Star Fill
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, star, favorite, rating, filled, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <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" fill="currentColor" opacity="0.85"/>
+</svg>

package/components/common/ui-icons/icon-star.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Star
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, star, favorite, rating, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <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" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/common/ui-icons/icon-touchid.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Touch ID
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, touchid, fingerprint, biometric, apple, ios, security
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 6a6 6 0 00-6 6c0 2.5 1.5 4.5 3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 10a2 2 0 00-2 2c0 1.5.8 3 2 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M15 8.5A6 6 0 0118 12c0 2-1 4-2.5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/components/common/ui-icons/icon-trash.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Trash
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, trash, delete, remove, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/common/ui-icons/icon-upload.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Upload
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, upload, import, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><polyline points="17,8 12,3 7,8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/components/common/ui-icons/icon-video.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Video
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, video, camera, record, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M23 7l-7 5 7 5V7z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="5" width="15" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/>
+</svg>

package/components/common/ui-icons/icon-wifi.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Wifi
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, wifi, wireless, signal, network, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 12.55a11 11 0 0114.08 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M1.42 9a16 16 0 0121.16 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M8.53 16.11a6 6 0 016.95 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="20" r="1.5" fill="currentColor"/>
+</svg>

package/components/common/ui-icons/icon-xmark.html

@@ -0,0 +1,10 @@
+<!--
+@name: Icon Xmark
+@kit: common
+@width: 24
+@height: 24
+@tags: icon, close, dismiss, cancel, ios
+-->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/componentmap-app-mobile.md

@@ -0,0 +1,210 @@
+# Component Map — app-mobile
+
+> 204 HTML components. Auto-generated by `gen-previews.ts`.
+
+| # | Ref | Name | Category | Size | Tags |
+|---|-----|------|----------|------|------|
+| 1 | `app-mobile/badges/badge-count` | Badge — Count | badges | 24×16 | badge, count, notification, number |
+| 2 | `app-mobile/badges/badge-dot` | Badge — Dot | badges | 8×8 | badge, dot, notification, indicator |
+| 3 | `app-mobile/badges/badge-large` | Badge — Large (99+) | badges | 32×16 | badge, count, notification, overflow |
+| 4 | `app-mobile/buttons/button-filled` | Button — Filled | buttons | 160×40 | button, filled, primary, cta |
+| 5 | `app-mobile/buttons/button-icon` | Button — Icon Only | buttons | 40×40 | button, icon, circular |
+| 6 | `app-mobile/buttons/button-outlined` | Button — Outlined | buttons | 160×40 | button, outlined, secondary |
+| 7 | `app-mobile/buttons/button-text` | Button — Text | buttons | 120×40 | button, text, minimal |
+| 8 | `app-mobile/buttons/button-tonal` | Button — Filled Tonal | buttons | 160×40 | button, tonal, secondary |
+| 9 | `app-mobile/buttons/fab-extended` | FAB — Extended | buttons | 160×56 | fab, extended, floating, action, label |
+| 10 | `app-mobile/buttons/fab-small` | FAB — Small | buttons | 40×40 | fab, floating, action, small |
+| 11 | `app-mobile/buttons/fab` | FAB — Floating Action Button | buttons | 56×56 | fab, floating, action, primary |
+| 12 | `app-mobile/buttons/icon-button-filled` | Icon Button — Filled | buttons | 40×40 | button, icon, filled, circular |
+| 13 | `app-mobile/buttons/icon-button-tonal` | Icon Button — Tonal | buttons | 40×40 | button, icon, tonal, circular |
+| 14 | `app-mobile/buttons/segmented-button` | Segmented Button | buttons | 360×40 | segmented, toggle, group, selector |
+| 15 | `app-mobile/cards/card-elevated` | Card — Elevated | cards | 360×200 | card, elevated, shadow |
+| 16 | `app-mobile/cards/card-filled` | Card — Filled | cards | 360×200 | card, filled, surface |
+| 17 | `app-mobile/cards/card-outlined` | Card — Outlined | cards | 360×200 | card, outlined, border |
+| 18 | `app-mobile/charts/bar-chart` | Bar Chart — Vertical | charts | 360×240 | chart, bar, vertical, data, visualization |
+| 19 | `app-mobile/charts/donut-chart` | Donut Chart | charts | 200×200 | chart, donut, pie, ring, data, visualization |
+| 20 | `app-mobile/charts/horizontal-bar` | Horizontal Bar Chart | charts | 360×200 | chart, bar, horizontal, breakdown, data |
+| 21 | `app-mobile/charts/line-chart` | Line Chart — with Area Fill | charts | 360×240 | chart, line, area, trend, data, visualization |
+| 22 | `app-mobile/charts/progress-ring` | Progress Ring | charts | 120×120 | chart, progress, ring, circular, percentage |
+| 23 | `app-mobile/charts/sparkline` | Sparkline — Inline Mini Chart | charts | 100×32 | chart, sparkline, inline, mini, trend |
+| 24 | `app-mobile/charts/stat-card` | Stat Card — KPI with Trend | charts | 170×120 | stat, kpi, card, metric, number, trend |
+| 25 | `app-mobile/chips/chip-assist` | Chip — Assist | chips | 100×32 | chip, assist, action |
+| 26 | `app-mobile/chips/chip-filter` | Chip — Filter | chips | 100×32 | chip, filter, tag, toggle |
+| 27 | `app-mobile/chips/chip-input` | Chip — Input | chips | 100×32 | chip, input, removable |
+| 28 | `app-mobile/chips/chip-suggestion` | Chip — Suggestion | chips | 100×32 | chip, suggestion, tag |
+| 29 | `app-mobile/data-display/avatar-group` | Avatar Group | data-display | 200×40 | avatar, group, users, stack |
+| 30 | `app-mobile/dialogs/dialog-basic` | Dialog — Basic | dialogs | 312×200 | dialog, modal, alert, confirm |
+| 31 | `app-mobile/dialogs/dialog-fullscreen` | Dialog — Full Screen | dialogs | 360×640 | dialog, fullscreen, modal, form |
+| 32 | `app-mobile/dividers/divider-full` | Divider — Full Width | dividers | 360×1 | divider, separator, line |
+| 33 | `app-mobile/dividers/divider-inset` | Divider — Inset (with left margin) | dividers | 360×1 | divider, separator, inset, list |
+| 34 | `app-mobile/ecommerce/cart-item` | Cart Item | ecommerce | 360×100 | cart, item, product, ecommerce |
+| 35 | `app-mobile/ecommerce/cart-summary` | Cart Summary | ecommerce | 360×220 | cart, summary, total, checkout, ecommerce |
+| 36 | `app-mobile/ecommerce/color-selector` | Color Selector | ecommerce | 220×40 | color, selector, swatch, ecommerce |
+| 37 | `app-mobile/ecommerce/order-status` | Order Status | ecommerce | 360×120 | order, status, tracking, ecommerce |
+| 38 | `app-mobile/ecommerce/product-detail-hero` | Product Detail Hero | ecommerce | 360×420 | product, detail, hero, ecommerce |
+| 39 | `app-mobile/ecommerce/size-selector` | Size Selector | ecommerce | 300×48 | size, selector, variant, ecommerce |
+| 40 | `app-mobile/ecommerce/wishlist-item` | Wishlist Item | ecommerce | 360×80 | wishlist, favorite, saved, ecommerce |
+| 41 | `app-mobile/education/assignment-card` | Assignment Card | education | 360×120 | assignment, task, homework, education |
+| 42 | `app-mobile/education/certificate` | Certificate | education | 500×350 | certificate, achievement, education, award |
+| 43 | `app-mobile/education/course-card` | Course Card | education | 340×260 | course, card, learning, education |
+| 44 | `app-mobile/education/grade-report` | Grade Report | education | 360×300 | grade, report, score, education |
+| 45 | `app-mobile/education/lesson-progress` | Lesson Progress | education | 360×64 | lesson, progress, learning, education |
+| 46 | `app-mobile/education/quiz-mcq` | Quiz — Multiple Choice | education | 360×340 | quiz, question, multiple choice, education |
+| 47 | `app-mobile/education/quiz-truefalse` | Quiz — True/False | education | 360×220 | quiz, true false, education |
+| 48 | `app-mobile/education/student-dashboard` | Student Dashboard | education | 360×300 | student, dashboard, stats, education |
+| 49 | `app-mobile/feedback/banner` | Banner — Info with Action | feedback | 360×64 | banner, info, alert, message, action |
+| 50 | `app-mobile/feedback/progress-circular` | Progress — Circular | feedback | 48×48 | progress, circular, spinner, loading |
+| 51 | `app-mobile/feedback/progress-linear` | Progress — Linear | feedback | 360×4 | progress, linear, loading, bar |
+| 52 | `app-mobile/feedback/skeleton` | Skeleton Loading | feedback | 360×120 | skeleton, loading, placeholder |
+| 53 | `app-mobile/feedback/snackbar` | Snackbar | feedback | 360×48 | snackbar, toast, notification, message |
+| 54 | `app-mobile/feedback/tooltip` | Tooltip — Plain | feedback | 160×32 | tooltip, hint, help, popup |
+| 55 | `app-mobile/finance/bank-account-card` | Bank Account Card | finance | 340×180 | bank, account, card, finance, balance |
+| 56 | `app-mobile/finance/budget-category` | Budget Category Bar | finance | 360×60 | budget, category, spending, finance |
+| 57 | `app-mobile/finance/credit-score` | Credit Score Gauge | finance | 240×200 | credit, score, gauge, finance |
+| 58 | `app-mobile/finance/investment-portfolio` | Investment Portfolio | finance | 360×300 | investment, portfolio, stocks, finance |
+| 59 | `app-mobile/finance/transaction-row` | Transaction Row | finance | 360×64 | transaction, payment, history, finance |
+| 60 | `app-mobile/finance/transfer-form` | Transfer Form | finance | 360×360 | transfer, send, money, finance |
+| 61 | `app-mobile/fitness/body-metrics` | Body Metrics | fitness | 360×300 | body, metrics, weight, bmi, fitness |
+| 62 | `app-mobile/fitness/calorie-tracker` | Calorie Tracker | fitness | 360×120 | calories, tracker, nutrition, fitness |
+| 63 | `app-mobile/fitness/exercise-timer` | Exercise Timer | fitness | 360×220 | exercise, timer, countdown, fitness |
+| 64 | `app-mobile/fitness/meal-plan` | Meal Plan Card | fitness | 360×200 | meal, plan, nutrition, diet, fitness |
+| 65 | `app-mobile/fitness/sleep-tracker` | Sleep Tracker | fitness | 360×200 | sleep, tracker, health, fitness |
+| 66 | `app-mobile/fitness/workout-card` | Workout Card | fitness | 360×180 | workout, exercise, fitness, gym |
+| 67 | `app-mobile/food/cuisine-filter` | Cuisine Filter Bar | food | 360×72 | cuisine, filter, category, food |
+| 68 | `app-mobile/food/menu-item` | Menu Item Row | food | 360×90 | menu, item, food, dish |
+| 69 | `app-mobile/food/order-tracker` | Order Tracker | food | 360×180 | order, tracker, delivery, food |
+| 70 | `app-mobile/food/restaurant-card` | Restaurant Card | food | 340×260 | restaurant, card, food, delivery |
+| 71 | `app-mobile/food/review-card` | Review Card | food | 360×150 | review, rating, feedback, food |
+| 72 | `app-mobile/food/table-reservation` | Table Reservation | food | 360×320 | reservation, booking, table, restaurant |
+| 73 | `app-mobile/forms/form-address` | Form — Address | forms | 360×380 | form, address, shipping, delivery |
+| 74 | `app-mobile/forms/form-payment` | Form — Payment Card | forms | 360×280 | form, payment, credit card, checkout |
+| 75 | `app-mobile/forms/form-profile` | Form — Profile Edit | forms | 360×450 | form, profile, edit, account |
+| 76 | `app-mobile/forms/time-picker` | Time Picker | forms | 280×200 | time, picker, clock, input |
+| 77 | `app-mobile/healthcare/appointment-card` | Appointment Card | healthcare | 360×120 | appointment, doctor, booking, healthcare |
+| 78 | `app-mobile/healthcare/doctor-profile` | Doctor Profile Card | healthcare | 360×180 | doctor, profile, healthcare, medical |
+| 79 | `app-mobile/healthcare/health-metric-chart` | Health Metric Chart | healthcare | 360×220 | health, metric, chart, graph |
+| 80 | `app-mobile/healthcare/insurance-card` | Insurance Card | healthcare | 360×200 | insurance, card, health, healthcare |
+| 81 | `app-mobile/healthcare/lab-results` | Lab Results Row | healthcare | 360×72 | lab, results, test, healthcare |
+| 82 | `app-mobile/healthcare/medication-reminder` | Medication Reminder | healthcare | 360×100 | medication, reminder, pill, healthcare |
+| 83 | `app-mobile/healthcare/symptom-checker` | Symptom Checker | healthcare | 360×320 | symptom, checker, diagnosis, healthcare |
+| 84 | `app-mobile/healthcare/vitals-dashboard` | Vitals Dashboard | healthcare | 360×260 | vitals, health, dashboard, metrics |
+| 85 | `app-mobile/inputs/date-picker` | Date Picker — Calendar Modal | inputs | 328×460 | date, picker, calendar, modal, form |
+| 86 | `app-mobile/inputs/file-upload` | File Upload Area | inputs | 360×120 | file, upload, drop, area, form |
+| 87 | `app-mobile/inputs/otp-input` | OTP Input — 6 Digit | inputs | 360×56 | otp, verification, code, digits, form |
+| 88 | `app-mobile/inputs/password-field` | Password Field — with Toggle | inputs | 360×56 | password, input, toggle, eye, form, security |
+| 89 | `app-mobile/inputs/search-bar` | Search Bar | inputs | 360×48 | search, input, bar |
+| 90 | `app-mobile/inputs/select` | Select / Dropdown | inputs | 360×56 | select, dropdown, form |
+| 91 | `app-mobile/inputs/text-field-filled` | Text Field — Filled | inputs | 360×56 | input, text-field, filled, form |
+| 92 | `app-mobile/inputs/text-field-outlined` | Text Field — Outlined | inputs | 360×56 | input, text-field, outlined, form |
+| 93 | `app-mobile/inputs/textarea` | Text Area — Multi-line | inputs | 360×120 | textarea, input, multiline, form |
+| 94 | `app-mobile/inputs/time-picker` | Time Picker — Clock | inputs | 328×400 | time, picker, clock, modal, form |
+| 95 | `app-mobile/job/application-status` | Application Status | job | 360×80 | application, status, tracking, job |
+| 96 | `app-mobile/job/interview-schedule` | Interview Schedule | job | 360×140 | interview, schedule, calendar, job |
+| 97 | `app-mobile/lists/list-item-1line` | List Item — 1 Line | lists | 360×56 | list, item, single-line |
+| 98 | `app-mobile/lists/list-item-2line` | List Item — 2 Lines | lists | 360×72 | list, item, two-line, subtitle |
+| 99 | `app-mobile/lists/list-item-3line` | List Item — 3 Lines | lists | 360×88 | list, item, three-line, description |
+| 100 | `app-mobile/logistics/delivery-map` | Delivery Map | logistics | 360×250 | delivery, map, tracking, driver, logistics |
+| 101 | `app-mobile/logistics/driver-card` | Driver Card | logistics | 360×100 | driver, card, courier, logistics |
+| 102 | `app-mobile/logistics/package-tracker` | Package Tracker | logistics | 360×200 | package, tracker, delivery, shipping, logistics |
+| 103 | `app-mobile/logistics/shipment-row` | Shipment Row | logistics | 360×64 | shipment, order, tracking, logistics |
+| 104 | `app-mobile/media/audio-player` | Audio Player | media | 360×80 | audio, player, music, podcast |
+| 105 | `app-mobile/media/image-carousel` | Image Carousel | media | 360×250 | carousel, slider, images, gallery |
+| 106 | `app-mobile/menus/menu-context` | Menu — Context | menus | 180×144 | menu, context, right-click, popup |
+| 107 | `app-mobile/menus/menu-dropdown` | Menu — Dropdown | menus | 200×200 | menu, dropdown, popup, context |
+| 108 | `app-mobile/native/gesture-nav-bar` | Gesture Navigation Bar — Android | native | 360×20 | gesture-nav, system, android, native, home-indicator |
+| 109 | `app-mobile/native/ios-action-sheet` | iOS Action Sheet | native | 360×260 | ios, action-sheet, bottom, modal, options, native |
+| 110 | `app-mobile/native/ios-alert` | iOS Alert Dialog | native | 270×160 | ios, alert, dialog, modal, native, confirm |
+| 111 | `app-mobile/native/ios-home-indicator` | iOS Home Indicator | native | 390×34 | ios, home-indicator, bottom, safe-area, native |
+| 112 | `app-mobile/native/ios-list-cell` | iOS List Cell — Settings Style | native | 390×44 | ios, list, cell, settings, row, native |
+| 113 | `app-mobile/native/ios-nav-bar` | iOS Navigation Bar — Large Title | native | 390×96 | ios, nav-bar, large-title, back, native, navigation |
+| 114 | `app-mobile/native/ios-page-sheet` | iOS Page Sheet — Modal | native | 390×480 | ios, page-sheet, modal, bottom, native |
+| 115 | `app-mobile/native/ios-search-bar` | iOS Search Bar | native | 390×40 | ios, search, bar, input, native |
+| 116 | `app-mobile/native/ios-segmented-control` | iOS Segmented Control | native | 360×32 | ios, segmented, control, toggle, tabs, native |
+| 117 | `app-mobile/native/ios-status-bar` | iOS Status Bar — with Dynamic Island | native | 390×54 | ios, status-bar, dynamic-island, notch, native |
+| 118 | `app-mobile/native/ios-tab-bar` | iOS Tab Bar — 5 Items | native | 390×83 | ios, tab-bar, bottom, navigation, native |
+| 119 | `app-mobile/native/ios-wheel-picker` | iOS Wheel Picker — Date/Time | native | 360×220 | ios, wheel, picker, date, time, scroll, native |
+| 120 | `app-mobile/native/notification-item` | Notification Item | native | 360×80 | notification, item, push, alert, native |
+| 121 | `app-mobile/native/permission-dialog` | Permission Dialog — Android | native | 312×220 | permission, dialog, system, android, native |
+| 122 | `app-mobile/native/status-bar` | Status Bar — Android | native | 360×24 | status-bar, system, android, native |
+| 123 | `app-mobile/navbars/bottom-app-bar` | Bottom App Bar | navbars | 360×80 | bottom-app-bar, navigation, fab |
+| 124 | `app-mobile/navbars/bottom-nav-3` | Bottom Navigation — 3 Items | navbars | 360×80 | bottom-nav, navigation, tabs, 3-items |
+| 125 | `app-mobile/navbars/bottom-nav-4` | Bottom Navigation — 4 Items | navbars | 360×80 | bottom-nav, navigation, tabs, 4-items |
+| 126 | `app-mobile/navbars/bottom-nav-5` | Bottom Navigation — 5 Items | navbars | 360×80 | bottom-nav, navigation, tabs, 5-items |
+| 127 | `app-mobile/navbars/top-app-bar-center` | Top App Bar — Center Aligned | navbars | 360×64 | appbar, top, center, navigation |
+| 128 | `app-mobile/navbars/top-app-bar-large` | Top App Bar — Large | navbars | 360×152 | appbar, top, large, display, navigation |
+| 129 | `app-mobile/navbars/top-app-bar-medium` | Top App Bar — Medium | navbars | 360×112 | appbar, top, medium, headline, navigation |
+| 130 | `app-mobile/navbars/top-app-bar-small` | Top App Bar — Small | navbars | 360×64 | appbar, top, small, back, navigation |
+| 131 | `app-mobile/navigation/back-header` | Back Header | navigation | 360×56 | header, back, navigation, title |
+| 132 | `app-mobile/navigation/segmented-control` | Segmented Control | navigation | 320×36 | segment, tabs, toggle, control |
+| 133 | `app-mobile/navigation/stepper-vertical` | Stepper — Vertical | navigation | 300×280 | stepper, steps, vertical, progress |
+| 134 | `app-mobile/patterns/accordion` | Accordion / Expandable Section | patterns | 360×180 | accordion, expandable, collapse, faq, section |
+| 135 | `app-mobile/patterns/activity-feed` | Activity Feed — Timeline | patterns | 360×300 | activity, feed, timeline, log, history |
+| 136 | `app-mobile/patterns/audio-waveform` | Audio Waveform — Voice Message | patterns | 260×48 | audio, waveform, voice, message, sound |
+| 137 | `app-mobile/patterns/avatar-group` | Avatar Group — Stacked | patterns | 120×32 | avatar, group, stack, team, users |
+| 138 | `app-mobile/patterns/breadcrumb` | Breadcrumb Navigation | patterns | 360×32 | breadcrumb, navigation, path, hierarchy |
+| 139 | `app-mobile/patterns/calendar-month` | Calendar — Month View | patterns | 360×380 | calendar, month, grid, date, schedule, events |
+| 140 | `app-mobile/patterns/camera-viewfinder` | Camera Viewfinder — with Capture | patterns | 360×640 | camera, viewfinder, capture, photo, shutter |
+| 141 | `app-mobile/patterns/card-horizontal` | Card — Horizontal (Image + Content) | patterns | 360×100 | card, horizontal, image, list, article |
+| 142 | `app-mobile/patterns/cart-item` | Cart Item Row | patterns | 360×100 | cart, item, ecommerce, quantity, price |
+| 143 | `app-mobile/patterns/category-pills` | Category Pills — Horizontal Scroll | patterns | 360×40 | category, pills, filter, tags, horizontal, scroll |
+| 144 | `app-mobile/patterns/chat-bubble-received` | Chat Bubble — Received | patterns | 260×60 | chat, bubble, message, received, incoming |
+| 145 | `app-mobile/patterns/chat-bubble-sent` | Chat Bubble — Sent | patterns | 260×60 | chat, bubble, message, sent, outgoing |
+| 146 | `app-mobile/patterns/chat-conversation` | Chat Conversation — Full Screen | patterns | 360×640 | chat, conversation, messages, full-screen, inbox |
+| 147 | `app-mobile/patterns/chat-input-bar` | Chat Input Bar | patterns | 360×56 | chat, input, message, compose, send, attach |
+| 148 | `app-mobile/patterns/code-editor` | Code Editor — Syntax Highlighted | patterns | 360×240 | code, editor, syntax, highlight, developer |
+| 149 | `app-mobile/patterns/comment-item` | Comment Item | patterns | 360×64 | comment, social, reply, user |
+| 150 | `app-mobile/patterns/contact-card` | Contact Card — with Actions | patterns | 360×80 | contact, card, user, phone, message, call |
+| 151 | `app-mobile/patterns/data-table` | Data Table — with Headers + Rows | patterns | 360×280 | table, data, grid, rows, headers, admin |
+| 152 | `app-mobile/patterns/empty-state` | Empty State — No Data | patterns | 360×300 | empty, state, no-data, placeholder, illustration |
+| 153 | `app-mobile/patterns/error-screen` | Error Screen — No Connection | patterns | 360×400 | error, screen, offline, no-connection, retry |
+| 154 | `app-mobile/patterns/event-card` | Event / Calendar Card | patterns | 360×72 | event, calendar, schedule, appointment, time |
+| 155 | `app-mobile/patterns/image-editor` | Image Editor — Controls | patterns | 360×480 | image, editor, crop, rotate, filter, editing |
+| 156 | `app-mobile/patterns/image-grid` | Image Grid — 3 Column | patterns | 360×240 | image, grid, gallery, photos, 3-column |
+| 157 | `app-mobile/patterns/login-form` | Login Form — with Social | patterns | 360×480 | login, form, auth, social, sign-in |
+| 158 | `app-mobile/patterns/map-card` | Map Card — Location Preview | patterns | 360×200 | map, location, card, address, preview |
+| 159 | `app-mobile/patterns/media-player` | Media Player — Music Controls | patterns | 360×240 | media, player, music, audio, controls |
+| 160 | `app-mobile/patterns/notification-list` | Notification List — Grouped | patterns | 360×320 | notification, list, inbox, alerts, grouped |
+| 161 | `app-mobile/patterns/onboarding-slide` | Onboarding Slide | patterns | 360×640 | onboarding, slide, welcome, intro, tutorial |
+| 162 | `app-mobile/patterns/order-summary` | Order Summary Card | patterns | 360×200 | order, summary, checkout, total, ecommerce |
+| 163 | `app-mobile/patterns/order-tracker` | Order Tracker — Shipping Steps | patterns | 360×280 | order, tracker, shipping, status, ecommerce, steps |
+| 164 | `app-mobile/patterns/pagination` | Pagination Controls | patterns | 300×40 | pagination, page, navigation, controls |
+| 165 | `app-mobile/patterns/post-card` | Social Post Card | patterns | 360×440 | post, card, social, feed, image, actions, comments |
+| 166 | `app-mobile/patterns/product-card` | Product Card — E-Commerce | patterns | 170×260 | product, card, ecommerce, shop, price, rating |
+| 167 | `app-mobile/patterns/profile-header` | Profile Header — Avatar + Name + Bio | patterns | 360×200 | profile, header, avatar, user, account |
+| 168 | `app-mobile/patterns/rating-stars` | Rating Stars — 5 Star Display | patterns | 120×20 | rating, stars, review, score |
+| 169 | `app-mobile/patterns/review-card` | Review Card — Stars + Text + User | patterns | 360×140 | review, rating, stars, testimonial, feedback |
+| 170 | `app-mobile/patterns/search-results` | Search Results — Bar + Results | patterns | 360×360 | search, results, list, query, filter |
+| 171 | `app-mobile/patterns/settings-group` | Settings Group — Rows with Toggle/Chevron | patterns | 360×300 | settings, group, preferences, toggle, list |
+| 172 | `app-mobile/patterns/stepper-horizontal` | Stepper — Horizontal | patterns | 360×64 | stepper, wizard, steps, progress, form |
+| 173 | `app-mobile/patterns/story-circle` | Story Circle — Avatar with Ring | patterns | 72×88 | story, circle, avatar, social, ring |
+| 174 | `app-mobile/patterns/swipe-action` | Swipe Action Row | patterns | 360×72 | swipe, action, delete, archive, gesture, row |
+| 175 | `app-mobile/patterns/tag-pills` | Tag / Label Pills | patterns | 300×28 | tag, label, pill, category, filter |
+| 176 | `app-mobile/patterns/timeline-item` | Timeline Item | patterns | 360×80 | timeline, activity, history, event, log |
+| 177 | `app-mobile/patterns/todo-item` | Todo Item — Checkbox + Text + Date | patterns | 360×56 | todo, task, checkbox, productivity, list |
+| 178 | `app-mobile/patterns/video-editor-timeline` | Video Editor — Timeline | patterns | 360×200 | video, editor, timeline, trim, cut, layers, editing |
+| 179 | `app-mobile/patterns/video-player` | Video Player — with Controls | patterns | 360×260 | video, player, controls, play, pause, seek, fullscreen |
+| 180 | `app-mobile/patterns/wallet-card` | Wallet / Credit Card Visual | patterns | 340×200 | wallet, card, credit, payment, finance, visual |
+| 181 | `app-mobile/sliders/slider-continuous` | Slider — Continuous | sliders | 360×48 | slider, range, continuous, input |
+| 182 | `app-mobile/sliders/slider-discrete` | Slider — Discrete (with ticks) | sliders | 360×48 | slider, discrete, ticks, steps, input |
+| 183 | `app-mobile/social/chat-bubble-received` | Chat Bubble — Received | social | 260×60 | chat, bubble, received, message |
+| 184 | `app-mobile/social/chat-bubble-sent` | Chat Bubble — Sent | social | 260×60 | chat, bubble, sent, message |
+| 185 | `app-mobile/social/notification-item` | Notification Item | social | 360×72 | notification, item, alert, social |
+| 186 | `app-mobile/social/post-card` | Post Card | social | 360×440 | post, card, feed, social |
+| 187 | `app-mobile/social/reaction-bar` | Reaction Bar | social | 240×36 | reaction, emoji, social, interaction |
+| 188 | `app-mobile/social/story-circle` | Story Circle | social | 72×90 | story, circle, avatar, social |
+| 189 | `app-mobile/social/user-profile-card` | User Profile Card | social | 320×200 | profile, user, card, social |
+| 190 | `app-mobile/surfaces/bottom-sheet` | Bottom Sheet — Standard | surfaces | 360×400 | bottom-sheet, sheet, modal, drawer, surface |
+| 191 | `app-mobile/surfaces/nav-drawer` | Navigation Drawer | surfaces | 360×640 | nav-drawer, navigation, sidebar, menu |
+| 192 | `app-mobile/surfaces/nav-rail` | Navigation Rail | surfaces | 80×640 | nav-rail, navigation, vertical, sidebar |
+| 193 | `app-mobile/surfaces/side-sheet` | Side Sheet | surfaces | 320×640 | side-sheet, panel, drawer, surface |
+| 194 | `app-mobile/tabs/tabs-primary` | Tabs — Primary | tabs | 360×48 | tabs, primary, navigation, underline |
+| 195 | `app-mobile/tabs/tabs-secondary` | Tabs — Secondary | tabs | 360×48 | tabs, secondary, navigation |
+| 196 | `app-mobile/toggles/checkbox` | Checkbox | toggles | 200×40 | checkbox, check, form, toggle |
+| 197 | `app-mobile/toggles/radio` | Radio Button | toggles | 200×40 | radio, button, form, toggle |
+| 198 | `app-mobile/toggles/switch` | Switch Toggle | toggles | 52×32 | switch, toggle, on-off |
+| 199 | `app-mobile/travel/booking-summary` | Booking Summary | travel | 360×280 | booking, summary, confirmation, travel |
+| 200 | `app-mobile/travel/flight-card` | Flight Card | travel | 360×160 | flight, card, booking, travel, airline |
+| 201 | `app-mobile/travel/hotel-card` | Hotel Card | travel | 340×280 | hotel, card, booking, travel |
+| 202 | `app-mobile/travel/itinerary-item` | Trip Itinerary Item | travel | 360×100 | itinerary, trip, plan, travel |
+| 203 | `app-mobile/travel/map-pins` | Map with Pins | travel | 360×250 | map, pins, location, travel |
+| 204 | `app-mobile/travel/travel-date-picker` | Travel Date Picker | travel | 360×360 | date, picker, checkin, checkout, travel |