designkit-ai 1.0.0

package/components/_index.md

@@ -0,0 +1,81 @@
+# Components Index
+
+## Kits
+
+| Kit | Path | Platform | Components | Description |
+|-----|------|----------|-----------|-------------|
+| **App Mobile** | `app-mobile/` | iOS + Android | 134 | Unified mobile kit. Platform differences documented in README |
+| **Web** | `web/` | Desktop/Web | 126 | Responsive web/desktop components. Tailwind-inspired |
+| **Common** | `common/` | Cross-kit | 38 | SVG illustrations, decorations, mockup elements, UI icons |
+
+Removed separate `apple-ios/` and `android-md3/` — merged into `app-mobile/` with platform difference annotations in README.
+
+## How Platform Targeting Works
+
+Components are platform-neutral by default. To target iOS or Android:
+
+- Read `app-mobile/README.md` → "Platform Differences" section
+- Apply radius, typography, navigation rules for target platform
+- Same HTML components, different style values via tokens
+
+## Categories — App Mobile (134)
+
+| Category | Count | Description |
+|----------|-------|-------------|
+| navbars | 8 | Top app bars, bottom nav, bottom app bar |
+| buttons | 11 | Filled, tonal, outlined, text, icon, FAB, segmented |
+| cards | 3 | Filled, outlined, elevated |
+| inputs | 10 | Text fields, search, select, date/time picker, OTP, password, file upload |
+| lists | 3 | 1-line, 2-line, 3-line items |
+| chips | 4 | Assist, filter, input, suggestion |
+| feedback | 6 | Snackbar, progress, skeleton, banner, tooltip |
+| tabs | 2 | Primary, secondary |
+| toggles | 3 | Switch, checkbox, radio |
+| menus | 2 | Dropdown, context |
+| dialogs | 2 | Basic, fullscreen |
+| surfaces | 4 | Bottom sheet, side sheet, drawer, rail |
+| sliders | 2 | Continuous, discrete |
+| badges | 3 | Dot, count, overflow |
+| dividers | 2 | Full-width, inset |
+| native | 15 | iOS-specific (action-sheet, alert, nav-bar, tab-bar, etc.) + Android (status-bar, gesture-nav, notification, permission) |
+| patterns | 47 | E-commerce, social, chat, productivity, auth, data, navigation, media, maps |
+| charts | 7 | Bar, line, donut, progress ring, sparkline, stat card, horizontal bar |
+
+## Categories — Web (126)
+
+| Category | Count | Description |
+|----------|-------|-------------|
+| navbars | 6 | Top nav, sidebar, breadcrumb, footer |
+| buttons | 6 | Primary, secondary, danger, ghost, icon, group |
+| cards | 6 | Basic, feature, image, pricing, stat, testimonial |
+| inputs | 10 | Text, textarea, select, search, date, file, tags, checkbox, radio, toggle |
+| layout | 6 | Hero sections, features grid, pricing, stats, CTA banner |
+| tables | 2 | Simple table, data table |
+| modals | 2 | Basic, form |
+| feedback | 8 | Alert, empty-state, loading, progress, skeleton, toasts, tooltip |
+| tabs | 2 | Pills, underline |
+| toggles | 3 | Switch, group, dark mode |
+| charts | 3 | Area, bar, donut |
+| badges | 1 | Badge set |
+| menus | 1 | Dropdown menu |
+| dividers | 1 | Divider with text |
+| surfaces | 1 | Slide-over |
+| data-display | 2 | Grid view, list view |
+| heroes | 3 | Gradient, image background, video |
+| cta | 3 | Centered, split with image, newsletter |
+| features | 3 | Icon list, alternating rows, bento grid |
+| pricing | 2 | Comparison table, monthly/annual toggle |
+| social-proof | 2 | Logo cloud, testimonial carousel |
+| logos | 2 | Logo grid, logo ticker |
+| products | 4 | Product cards, detail, grid, reviews |
+| cart | 3 | Cart page, checkout, order confirmation |
+| promotions | 2 | Coupon card, promo banner |
+| account | 3 | Profile, subscription, payment method |
+| widgets | 8 | SaaS dashboard widgets (API keys, billing, changelog, etc.) |
+| content | 2 | Author card, blog card |
+| metrics | 1 | KPI row |
+| screenshots | 2 | Browser frame, gallery |
+| presentation | 2 | Slide title, slide content |
+| print | 1 | Business card |
+| social-media | 1 | Instagram post |
+| patterns | 22 | Auth, chat, kanban, calendar, settings, comparison, etc. |

package/components/app-mobile/README.md

@@ -0,0 +1,117 @@
+# App Mobile UI Kit
+
+**134 components** across 18 categories. Unified kit for both iOS and Android.
+
+All components use `var(--kit-*)` tokens. Platform-specific differences are handled via metadata comments and minor style variations — not separate file sets.
+
+---
+
+## Platform Differences (iOS vs Android)
+
+AI and designers should apply these rules based on target platform:
+
+### Shape & Radius
+
+| Element | iOS | Android (MD3) |
+|---------|-----|---------------|
+| Cards | 12-16px radius | 12-16px radius |
+| Buttons | 8-12px (rect) or full-round | 20px (full-round pill) |
+| FAB | full-round (circle) | 16px (rounded square) |
+| Bottom sheet | 12px top corners | 28px top corners |
+| Dialog | 14px | 28px |
+| Chips | full-round | 8px |
+| Input fields | 8-10px | 4px (outlined) or 0 top (filled) |
+| Nav bar | 0 (flat edge) | 0 (flat edge) |
+
+### Typography
+
+| Element | iOS (SF Pro) | Android (Roboto) |
+|---------|-------------|-----------------|
+| Large title | 34px bold | 30px regular |
+| Title | 17px semibold | 20px regular |
+| Body | 17px regular | 16px regular |
+| Caption | 12px regular | 12px regular |
+| Font family | -apple-system, SF Pro | Roboto, system-ui |
+| Font weight style | Uses semibold (600) heavily | Uses regular (400) + medium (500) |
+
+### Navigation
+
+| Pattern | iOS | Android |
+|---------|-----|---------|
+| Primary nav | Tab bar (bottom, 49px + safe area) | Bottom nav (80px) with pill indicator |
+| Back | `< Back` text + chevron (left) | `←` arrow icon |
+| Title | Large title collapses on scroll | Small/Medium/Large app bar |
+| Tab indicator | None (icon fills/colors) | Pill shape behind active icon |
+| Drawer | Rare (use tabs instead) | Common (hamburger → drawer) |
+| Gesture nav | Home indicator (134x5px) | Home indicator (same) |
+
+### Status Bar
+
+| | iOS | Android |
+|--|-----|---------|
+| Height | 44px (notch), 20px (no notch) | 24px |
+| Style | Time left, icons right | Time left, icons right |
+| Dynamic Island | iPhone 14+ (centered notch) | No equivalent |
+
+### Specific Component Differences
+
+| Component | iOS Style | Android Style |
+|-----------|----------|---------------|
+| Switch | Green track when on, round thumb | Primary color track, round thumb |
+| Alert/Dialog | Rounded rect, stacked buttons | 28px radius, inline buttons |
+| Action sheet | Bottom sheet with cancel button | Bottom sheet with drag handle |
+| Search | Rounded rect in nav area | Full-round pill, prominent |
+| Segmented | Sliding background pill | Outlined with border segments |
+| List separator | Left-inset line | Full-width or inset |
+| Selection | Checkmark right side | Checkbox left side |
+| Date picker | Spinning wheel | Calendar grid |
+
+### Spacing
+
+| | iOS | Android |
+|--|-----|---------|
+| Horizontal padding | 16px | 16px |
+| Section gap | 24-32px | 16-24px |
+| List item height | 44px (compact), 60px (subtitle) | 56px (1-line), 72px (2-line) |
+| Touch target | 44x44px min | 48x48px min |
+| Tab bar | 49px + 34px safe area = 83px | 80px |
+
+---
+
+## How to Use
+
+Components are **platform-neutral by default** (work for both).
+
+To style for a specific platform, the AI should:
+
+1. **iOS:** Use `-apple-system` font, 600 weight for titles, smaller radii on buttons (8-12px), checkmark for selection, `< Back` text nav
+2. **Android:** Use `system-ui` font, 400-500 weight, 20px pill buttons, pill indicator on nav, hamburger menu, 28px dialog radius
+
+Example — the same `bottom-nav-5.html` works for both:
+- **iOS mode:** Remove pill indicator, use filled/outline icon swap, add 34px safe area
+- **Android mode:** Keep pill indicator, 80px height, as-is
+
+---
+
+## Component Inventory (134 total)
+
+| Category | Count | Components |
+|----------|-------|------------|
+| navbars | 8 | top-app-bar (center/small/medium/large), bottom-nav (3/4/5), bottom-app-bar |
+| buttons | 11 | filled, tonal, outlined, text, icon, icon-filled, icon-tonal, fab, fab-small, fab-extended, segmented |
+| cards | 3 | filled, outlined, elevated |
+| inputs | 10 | text-field (outlined/filled), search-bar, select, textarea, date-picker, time-picker, otp-input, password-field, file-upload |
+| lists | 3 | 1-line, 2-line, 3-line |
+| chips | 4 | assist, filter, input, suggestion |
+| feedback | 6 | snackbar, progress-linear, progress-circular, skeleton, banner, tooltip |
+| tabs | 2 | primary, secondary |
+| toggles | 3 | switch, checkbox, radio |
+| menus | 2 | dropdown, context |
+| dialogs | 2 | basic, fullscreen |
+| surfaces | 4 | bottom-sheet, side-sheet, nav-drawer, nav-rail |
+| sliders | 2 | continuous, discrete |
+| badges | 3 | dot, count, large (99+) |
+| dividers | 2 | full-width, inset |
+| native | 15 | status-bar, gesture-nav-bar, notification-item, permission-dialog, ios-action-sheet, ios-alert, ios-home-indicator, ios-list-cell, ios-nav-bar, ios-page-sheet, ios-search-bar, ios-segmented-control, ios-status-bar, ios-tab-bar, ios-wheel-picker |
+| patterns | 47 | accordion, activity-feed, audio-waveform, avatar-group, breadcrumb, calendar-month, camera-viewfinder, card-horizontal, cart-item, category-pills, chat-bubble-received, chat-bubble-sent, chat-conversation, chat-input-bar, code-editor, comment-item, contact-card, data-table, empty-state, error-screen, event-card, image-editor, image-grid, login-form, map-card, media-player, notification-list, onboarding-slide, order-summary, order-tracker, pagination, post-card, product-card, profile-header, rating-stars, review-card, search-results, settings-group, stepper-horizontal, story-circle, swipe-action, tag-pills, timeline-item, todo-item, video-editor-timeline, video-player, wallet-card |
+| charts | 7 | bar, line, donut, progress-ring, sparkline, stat-card, horizontal-bar |

package/components/app-mobile/badges/badge-count.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Badge — Count
+  @category: badges
+  @kit: app-mobile
+  @width: 24
+  @height: 16
+  @tags: badge, count, notification, number
+-->
+<div data-component="Badge — Count" style="display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--kit-danger, #EF4444);color:#FFFFFF;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:11px;font-weight:var(--kit-font-medium, 500);box-sizing:border-box">3</div>

package/components/app-mobile/badges/badge-dot.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Badge — Dot
+  @category: badges
+  @kit: app-mobile
+  @width: 8
+  @height: 8
+  @tags: badge, dot, notification, indicator
+-->
+<div data-component="Badge — Dot" style="width:8px;height:8px;border-radius:4px;background:var(--kit-danger, #EF4444)"></div>

package/components/app-mobile/badges/badge-large.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Badge — Large (99+)
+  @category: badges
+  @kit: app-mobile
+  @width: 32
+  @height: 16
+  @tags: badge, count, notification, overflow
+-->
+<div data-component="Badge — Large (99+)" style="display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 6px;border-radius:8px;background:var(--kit-danger, #EF4444);color:#FFFFFF;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:11px;font-weight:var(--kit-font-medium, 500);box-sizing:border-box">99+</div>

package/components/app-mobile/buttons/button-filled.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Button — Filled
+  @category: buttons
+  @kit: app-mobile
+  @width: 160
+  @height: 40
+  @tags: button, filled, primary, cta
+-->
+<div data-component="Button — Filled" style="display:inline-flex;align-items:center;justify-content:center;width:100%;height:40px;background:var(--kit-primary, #6366F1);color:var(--kit-primary-fg, #FFFFFF);border-radius:20px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer;padding:0 24px;box-sizing:border-box">Button</div>

package/components/app-mobile/buttons/button-icon.html

@@ -0,0 +1,11 @@
+<!--
+  @name: Button — Icon Only
+  @category: buttons
+  @kit: app-mobile
+  @width: 40
+  @height: 40
+  @tags: button, icon, circular
+-->
+<div data-component="Button — Icon Only" style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;color:var(--kit-text, #0F172A);border-radius:20px;cursor:pointer">
+  <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.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+</div>

package/components/app-mobile/buttons/button-outlined.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Button — Outlined
+  @category: buttons
+  @kit: app-mobile
+  @width: 160
+  @height: 40
+  @tags: button, outlined, secondary
+-->
+<div data-component="Button — Outlined" style="display:inline-flex;align-items:center;justify-content:center;width:100%;height:40px;background:transparent;color:var(--kit-primary, #6366F1);border:1px solid var(--kit-border, #E2E8F0);border-radius:20px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer;padding:0 24px;box-sizing:border-box">Button</div>

package/components/app-mobile/buttons/button-text.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Button — Text
+  @category: buttons
+  @kit: app-mobile
+  @width: 120
+  @height: 40
+  @tags: button, text, minimal
+-->
+<div data-component="Button — Text" style="display:inline-flex;align-items:center;justify-content:center;width:100%;height:40px;background:transparent;color:var(--kit-primary, #6366F1);border-radius:20px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer;padding:0 16px;box-sizing:border-box">Button</div>

package/components/app-mobile/buttons/button-tonal.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Button — Filled Tonal
+  @category: buttons
+  @kit: app-mobile
+  @width: 160
+  @height: 40
+  @tags: button, tonal, secondary
+-->
+<div data-component="Button — Filled Tonal" style="display:inline-flex;align-items:center;justify-content:center;width:100%;height:40px;background:var(--kit-secondary, #64748B);color:var(--kit-secondary-fg, #FFFFFF);border-radius:20px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer;padding:0 24px;box-sizing:border-box">Button</div>

package/components/app-mobile/buttons/fab-extended.html

@@ -0,0 +1,12 @@
+<!--
+  @name: FAB — Extended
+  @category: buttons
+  @kit: app-mobile
+  @width: 160
+  @height: 56
+  @tags: fab, extended, floating, action, label
+-->
+<div data-component="FAB — Extended" style="display:inline-flex;align-items:center;justify-content:center;height:56px;background:var(--kit-accent, #F59E0B);color:var(--kit-accent-fg, #FFFFFF);border-radius:var(--kit-radius-lg, 16px);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;padding:0 20px;gap:12px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500)">
+  <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>
+  Create New
+</div>

package/components/app-mobile/buttons/fab-small.html

@@ -0,0 +1,11 @@
+<!--
+  @name: FAB — Small
+  @category: buttons
+  @kit: app-mobile
+  @width: 40
+  @height: 40
+  @tags: fab, floating, action, small
+-->
+<div data-component="FAB — Small" style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--kit-accent, #F59E0B);color:var(--kit-accent-fg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);box-shadow:var(--kit-shadow, 0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.06));cursor:pointer">
+  <svg width="20" height="20" 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>

package/components/app-mobile/buttons/fab.html

@@ -0,0 +1,11 @@
+<!--
+  @name: FAB — Floating Action Button
+  @category: buttons
+  @kit: app-mobile
+  @width: 56
+  @height: 56
+  @tags: fab, floating, action, primary
+-->
+<div data-component="FAB — Floating Action Button" style="display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--kit-accent, #F59E0B);color:var(--kit-accent-fg, #FFFFFF);border-radius:var(--kit-radius-lg, 16px);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>

package/components/app-mobile/buttons/icon-button-filled.html

@@ -0,0 +1,11 @@
+<!--
+  @name: Icon Button — Filled
+  @category: buttons
+  @kit: app-mobile
+  @width: 40
+  @height: 40
+  @tags: button, icon, filled, circular
+-->
+<div data-component="Icon Button — Filled" style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--kit-primary, #6366F1);color:var(--kit-primary-fg, #FFFFFF);border-radius:20px;cursor:pointer">
+  <svg width="20" height="20" 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>

package/components/app-mobile/buttons/icon-button-tonal.html

@@ -0,0 +1,11 @@
+<!--
+  @name: Icon Button — Tonal
+  @category: buttons
+  @kit: app-mobile
+  @width: 40
+  @height: 40
+  @tags: button, icon, tonal, circular
+-->
+<div data-component="Icon Button — Tonal" style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--kit-surface-2, #F1F5F9);color:var(--kit-primary, #6366F1);border-radius:20px;cursor:pointer">
+  <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="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+</div>

package/components/app-mobile/buttons/segmented-button.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Segmented Button
+  @category: buttons
+  @kit: app-mobile
+  @width: 360
+  @height: 40
+  @tags: segmented, toggle, group, selector
+-->
+<div data-component="Segmented Button" style="display:flex;width:100%;height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:20px;overflow:hidden;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px)">
+  <div style="flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--kit-secondary, #64748B);color:var(--kit-secondary-fg, #FFFFFF);font-weight:var(--kit-font-medium, 500);cursor:pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Day</div>
+  <div style="flex:1;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--kit-border, #E2E8F0);color:var(--kit-text, #0F172A);cursor:pointer">Week</div>
+  <div style="flex:1;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--kit-border, #E2E8F0);color:var(--kit-text, #0F172A);cursor:pointer">Month</div>
+</div>

package/components/app-mobile/cards/card-elevated.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Card — Elevated
+  @category: cards
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: card, elevated, shadow
+-->
+<div data-component="Card — Elevated" style="width:100%;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);box-shadow:var(--kit-shadow-md, 0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.06));font-family:var(--kit-font, system-ui, -apple-system, sans-serif);overflow:hidden;box-sizing:border-box">
+  <img src="https://placehold.jp/360x100.png" style="width:100%;height:100px;object-fit:cover;display:block" alt="Card image"/>
+  <div style="padding:var(--kit-space-4, 16px)">
+    <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Card Title</div>
+    <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:var(--kit-space-1, 4px)">Supporting text goes here with a brief description.</div>
+  </div>
+</div>

package/components/app-mobile/cards/card-filled.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Card — Filled
+  @category: cards
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: card, filled, surface
+-->
+<div data-component="Card — Filled" style="width:100%;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);overflow:hidden;box-sizing:border-box">
+  <img src="https://placehold.jp/360x100.png" style="width:100%;height:100px;object-fit:cover;display:block" alt="Card image"/>
+  <div style="padding:var(--kit-space-4, 16px)">
+    <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Card Title</div>
+    <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:var(--kit-space-1, 4px)">Supporting text goes here with a brief description.</div>
+  </div>
+</div>

package/components/app-mobile/cards/card-outlined.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Card — Outlined
+  @category: cards
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: card, outlined, border
+-->
+<div data-component="Card — Outlined" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);overflow:hidden;box-sizing:border-box">
+  <img src="https://placehold.jp/360x100.png" style="width:100%;height:100px;object-fit:cover;display:block" alt="Card image"/>
+  <div style="padding:var(--kit-space-4, 16px)">
+    <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Card Title</div>
+    <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:var(--kit-space-1, 4px)">Supporting text goes here with a brief description.</div>
+  </div>
+</div>

package/components/app-mobile/charts/bar-chart.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Bar Chart — Vertical
+  @category: charts
+  @kit: app-mobile
+  @width: 360
+  @height: 240
+  @tags: chart, bar, vertical, data, visualization
+-->
+<div data-component="Bar Chart — Vertical" style="width:100%;height:240px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);padding:16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:16px">Weekly Revenue</div>
+  <div style="display:flex;align-items:flex-end;justify-content:space-between;height:150px;padding:0 8px;gap:12px">
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:60%;background:var(--kit-primary, #6366F1);border-radius:4px 4px 0 0;opacity:0.7"></div><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Mon</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:80%;background:var(--kit-primary, #6366F1);border-radius:4px 4px 0 0;opacity:0.8"></div><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Tue</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:45%;background:var(--kit-primary, #6366F1);border-radius:4px 4px 0 0;opacity:0.6"></div><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Wed</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:90%;background:var(--kit-primary, #6366F1);border-radius:4px 4px 0 0;opacity:0.9"></div><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Thu</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:100%;background:var(--kit-primary, #6366F1);border-radius:4px 4px 0 0"></div><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Fri</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:70%;background:var(--kit-primary, #6366F1);border-radius:4px 4px 0 0;opacity:0.75"></div><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Sat</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:35%;background:var(--kit-primary, #6366F1);border-radius:4px 4px 0 0;opacity:0.5"></div><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Sun</span></div>
+  </div>
+</div>

package/components/app-mobile/charts/donut-chart.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Donut Chart
+  @category: charts
+  @kit: app-mobile
+  @width: 200
+  @height: 200
+  @tags: chart, donut, pie, ring, data, visualization
+-->
+<div data-component="Donut Chart" style="width:200px;height:200px;position:relative;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <svg width="200" height="200" viewBox="0 0 200 200">
+    <circle cx="100" cy="100" r="70" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="24" stroke-dasharray="154 286" stroke-dashoffset="-72" stroke-linecap="round"/>
+    <circle cx="100" cy="100" r="70" fill="none" stroke="#F472B6" stroke-width="24" stroke-dasharray="110 330" stroke-dashoffset="-226" stroke-linecap="round"/>
+    <circle cx="100" cy="100" r="70" fill="none" stroke="#34D399" stroke-width="24" stroke-dasharray="88 352" stroke-dashoffset="-336" stroke-linecap="round"/>
+    <circle cx="100" cy="100" r="70" fill="none" stroke="#FBBF24" stroke-width="24" stroke-dasharray="66 374" stroke-dashoffset="-424" stroke-linecap="round"/>
+  </svg>
+  <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center">
+    <div style="font-size:24px;font-weight:700;color:var(--kit-text, #0F172A)">68%</div>
+    <div style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Complete</div>
+  </div>
+</div>

package/components/app-mobile/charts/horizontal-bar.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Horizontal Bar Chart
+  @category: charts
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: chart, bar, horizontal, breakdown, data
+-->
+<div data-component="Horizontal Bar Chart" style="width:100%;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);padding:16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:16px">Spending</div>
+  <div style="margin-bottom:12px"><div style="display:flex;justify-content:space-between;font-size:12px;color:var(--kit-text-2, #475569);margin-bottom:4px"><span>Food</span><span>40%</span></div><div style="height:8px;background:var(--kit-surface-2, #F1F5F9);border-radius:4px;overflow:hidden"><div style="width:40%;height:100%;background:var(--kit-primary, #6366F1);border-radius:4px"></div></div></div>
+  <div style="margin-bottom:12px"><div style="display:flex;justify-content:space-between;font-size:12px;color:var(--kit-text-2, #475569);margin-bottom:4px"><span>Transport</span><span>25%</span></div><div style="height:8px;background:var(--kit-surface-2, #F1F5F9);border-radius:4px;overflow:hidden"><div style="width:25%;height:100%;background:#F472B6;border-radius:4px"></div></div></div>
+  <div style="margin-bottom:12px"><div style="display:flex;justify-content:space-between;font-size:12px;color:var(--kit-text-2, #475569);margin-bottom:4px"><span>Shopping</span><span>20%</span></div><div style="height:8px;background:var(--kit-surface-2, #F1F5F9);border-radius:4px;overflow:hidden"><div style="width:20%;height:100%;background:#34D399;border-radius:4px"></div></div></div>
+  <div><div style="display:flex;justify-content:space-between;font-size:12px;color:var(--kit-text-2, #475569);margin-bottom:4px"><span>Other</span><span>15%</span></div><div style="height:8px;background:var(--kit-surface-2, #F1F5F9);border-radius:4px;overflow:hidden"><div style="width:15%;height:100%;background:#FBBF24;border-radius:4px"></div></div></div>
+</div>

package/components/app-mobile/charts/line-chart.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Line Chart — with Area Fill
+  @category: charts
+  @kit: app-mobile
+  @width: 360
+  @height: 240
+  @tags: chart, line, area, trend, data, visualization
+-->
+<div data-component="Line Chart — with Area Fill" style="width:100%;height:240px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);padding:16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+    <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Revenue Trend</div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-success, #22C55E)">+12.5%</div>
+  </div>
+  <svg width="100%" height="160" viewBox="0 0 328 160" preserveAspectRatio="none" style="display:block">
+    <defs>
+      <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" style="stop-color:var(--kit-primary, #6366F1);stop-opacity:0.3"/>
+        <stop offset="100%" style="stop-color:var(--kit-primary, #6366F1);stop-opacity:0.02"/>
+      </linearGradient>
+    </defs>
+    <path d="M0,120 L55,100 L110,60 L165,80 L220,30 L275,45 L328,20 L328,160 L0,160 Z" fill="url(#areaGrad)"/>
+    <polyline points="0,120 55,100 110,60 165,80 220,30 275,45 328,20" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="220" cy="30" r="4" fill="var(--kit-primary, #6366F1)"/>
+    <circle cx="220" cy="30" r="8" fill="var(--kit-primary, #6366F1)" opacity="0.2"/>
+  </svg>
+</div>

package/components/app-mobile/charts/progress-ring.html

@@ -0,0 +1,17 @@
+<!--
+  @name: Progress Ring
+  @category: charts
+  @kit: app-mobile
+  @width: 120
+  @height: 120
+  @tags: chart, progress, ring, circular, percentage
+-->
+<div data-component="Progress Ring" style="width:120px;height:120px;position:relative;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <svg width="120" height="120" viewBox="0 0 120 120">
+    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--kit-surface-2, #F1F5F9)" stroke-width="10"/>
+    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="10" stroke-dasharray="236 78" stroke-linecap="round" transform="rotate(-90 60 60)"/>
+  </svg>
+  <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center">
+    <div style="font-size:22px;font-weight:700;color:var(--kit-text, #0F172A)">75%</div>
+  </div>
+</div>

package/components/app-mobile/charts/sparkline.html

@@ -0,0 +1,11 @@
+<!--
+  @name: Sparkline — Inline Mini Chart
+  @category: charts
+  @kit: app-mobile
+  @width: 100
+  @height: 32
+  @tags: chart, sparkline, inline, mini, trend
+-->
+<svg data-component="Sparkline — Inline Mini Chart" width="100" height="32" viewBox="0 0 100 32">
+  <polyline points="0,28 15,20 30,24 45,12 60,16 75,6 90,10 100,4" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/app-mobile/charts/stat-card.html

@@ -0,0 +1,18 @@
+<!--
+  @name: Stat Card — KPI with Trend
+  @category: charts
+  @kit: app-mobile
+  @width: 170
+  @height: 120
+  @tags: stat, kpi, card, metric, number, trend
+-->
+<div data-component="Stat Card — KPI with Trend" style="width:100%;height:120px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);padding:16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);display:flex;flex-direction:column;justify-content:space-between">
+  <div style="display:flex;align-items:center;justify-content:space-between">
+    <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">Revenue</span>
+    <div style="color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg></div>
+  </div>
+  <div>
+    <div style="font-size:24px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$12.4k</div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-success, #22C55E);margin-top:2px">+12.5% vs last month</div>
+  </div>
+</div>

package/components/app-mobile/chips/chip-assist.html

@@ -0,0 +1,12 @@
+<!--
+  @name: Chip — Assist
+  @category: chips
+  @kit: app-mobile
+  @width: 100
+  @height: 32
+  @tags: chip, assist, action
+-->
+<div data-component="Chip — Assist" style="display:inline-flex;align-items:center;height:32px;padding:0 16px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-sm, 8px);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);cursor:pointer;box-sizing:border-box;gap:8px">
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+  Assist
+</div>

package/components/app-mobile/chips/chip-filter.html

@@ -0,0 +1,12 @@
+<!--
+  @name: Chip — Filter
+  @category: chips
+  @kit: app-mobile
+  @width: 100
+  @height: 32
+  @tags: chip, filter, tag, toggle
+-->
+<div data-component="Chip — Filter" style="display:inline-flex;align-items:center;height:32px;padding:0 16px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-sm, 8px);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);cursor:pointer;box-sizing:border-box;gap:8px">
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+  Filter
+</div>

package/components/app-mobile/chips/chip-input.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Chip — Input
+  @category: chips
+  @kit: app-mobile
+  @width: 100
+  @height: 32
+  @tags: chip, input, removable
+-->
+<div data-component="Chip — Input" style="display:inline-flex;align-items:center;height:32px;padding:0 4px 0 12px;background:var(--kit-surface-2, #F1F5F9);border-radius:var(--kit-radius-sm, 8px);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);box-sizing:border-box;gap:4px">
+  <span>Input</span>
+  <div style="width:24px;height:24px;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" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+  </div>
+</div>

package/components/app-mobile/chips/chip-suggestion.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Chip — Suggestion
+  @category: chips
+  @kit: app-mobile
+  @width: 100
+  @height: 32
+  @tags: chip, suggestion, tag
+-->
+<div data-component="Chip — Suggestion" style="display:inline-flex;align-items:center;height:32px;padding:0 16px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-sm, 8px);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);cursor:pointer;box-sizing:border-box">Suggestion</div>