designkit-ai 1.0.0

package/components/web/cart/cart-page.html

@@ -0,0 +1,30 @@
+<!--
+  @name: Cart Page — Items + Summary
+  @kit: web
+  @width: 1200
+  @height: 500
+  @tags: cart, page, shopping, checkout, ecommerce
+-->
+<div data-component="Cart Page — Items + Summary" style="display:flex;gap:32px;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif);flex-wrap:wrap">
+  <div style="flex:2;min-width:400px">
+    <div style="font-size:24px;font-weight:700;color:var(--kit-text, #0F172A);margin-bottom:20px">Shopping Cart <span style="font-size:16px;font-weight:400;color:var(--kit-text-3, #94A3B8)">(3 items)</span></div>
+    <div style="display:flex;flex-direction:column;gap:0">
+      <div style="display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--kit-border, #E2E8F0);align-items:center"><img src="https://placehold.jp/80x80.png" style="width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0" alt="Item"/><div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:500;color:var(--kit-text, #0F172A)">Wireless Headphones Pro</div><div style="font-size:13px;color:var(--kit-text-3, #94A3B8);margin-top:2px">Black · Qty: 1</div></div><div style="display:flex;align-items:center;gap:0;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px"><div style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569);font-size:14px">-</div><div style="width:32px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;border-left:1px solid var(--kit-border, #E2E8F0);border-right:1px solid var(--kit-border, #E2E8F0)">1</div><div style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569);font-size:14px">+</div></div><div style="font-size:16px;font-weight:600;color:var(--kit-text, #0F172A);width:80px;text-align:right">$74.99</div><div style="cursor:pointer;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="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></div></div>
+      <div style="display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--kit-border, #E2E8F0);align-items:center"><img src="https://placehold.jp/80x80.png" style="width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0" alt="Item"/><div style="flex:1"><div style="font-size:15px;font-weight:500;color:var(--kit-text, #0F172A)">Smart Watch Series 5</div><div style="font-size:13px;color:var(--kit-text-3, #94A3B8);margin-top:2px">Silver · Qty: 1</div></div><div style="display:flex;align-items:center;gap:0;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px"><div style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px">-</div><div style="width:32px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;border-left:1px solid var(--kit-border, #E2E8F0);border-right:1px solid var(--kit-border, #E2E8F0)">1</div><div style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px">+</div></div><div style="font-size:16px;font-weight:600;color:var(--kit-text, #0F172A);width:80px;text-align:right">$249.00</div><div style="cursor:pointer;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="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></div></div>
+      <div style="display:flex;gap:16px;padding:16px 0;align-items:center"><img src="https://placehold.jp/80x80.png" style="width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0" alt="Item"/><div style="flex:1"><div style="font-size:15px;font-weight:500;color:var(--kit-text, #0F172A)">USB-C Charging Cable</div><div style="font-size:13px;color:var(--kit-text-3, #94A3B8);margin-top:2px">White · 2m · Qty: 2</div></div><div style="display:flex;align-items:center;gap:0;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px"><div style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px">-</div><div style="width:32px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;border-left:1px solid var(--kit-border, #E2E8F0);border-right:1px solid var(--kit-border, #E2E8F0)">2</div><div style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px">+</div></div><div style="font-size:16px;font-weight:600;color:var(--kit-text, #0F172A);width:80px;text-align:right">$29.98</div><div style="cursor:pointer;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="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></div></div>
+    </div>
+  </div>
+  <div style="flex:1;min-width:320px">
+    <div style="background:var(--kit-surface, #F8FAFC);border-radius:12px;padding:24px;position:sticky;top:20px">
+      <div style="font-size:18px;font-weight:600;color:var(--kit-text, #0F172A);margin-bottom:16px">Order Summary</div>
+      <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Subtotal (4 items)</span><span style="color:var(--kit-text, #0F172A)">$353.97</span></div>
+      <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Shipping</span><span style="color:var(--kit-success, #22C55E);font-weight:500">Free</span></div>
+      <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Tax</span><span style="color:var(--kit-text, #0F172A)">$28.32</span></div>
+      <div style="display:flex;align-items:center;gap:8px;margin:12px 0;padding:8px 0;border-top:1px solid var(--kit-border, #E2E8F0)"><div style="flex:1;height:36px;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px;padding:0 10px;display:flex;align-items:center;font-size:13px;color:var(--kit-text-3, #94A3B8)">Coupon code</div><div style="height:36px;padding:0 14px;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px;display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--kit-text-2, #475569);cursor:pointer">Apply</div></div>
+      <div style="height:1px;background:var(--kit-border, #E2E8F0);margin:8px 0"></div>
+      <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:18px;font-weight:700"><span style="color:var(--kit-text, #0F172A)">Total</span><span style="color:var(--kit-text, #0F172A)">$382.29</span></div>
+      <div style="height:44px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;cursor:pointer;margin-top:12px">Proceed to Checkout</div>
+      <div style="text-align:center;margin-top:12px;font-size:12px;color:var(--kit-text-3, #94A3B8)">Secure checkout powered by Stripe</div>
+    </div>
+  </div>
+</div>

package/components/web/cart/checkout-form.html

@@ -0,0 +1,27 @@
+<!--
+  @name: Checkout Form — Shipping + Payment
+  @kit: web
+  @width: 640
+  @height: 600
+  @tags: checkout, form, shipping, payment, ecommerce
+-->
+<div data-component="Checkout Form — Shipping + Payment" style="width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;align-items:center;gap:8px;margin-bottom:24px">
+    <div style="display:flex;align-items:center;gap:6px"><div style="width:28px;height:28px;border-radius:14px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span style="font-size:13px;font-weight:500;color:var(--kit-primary, #6366F1)">Cart</span></div>
+    <div style="flex:1;height:2px;background:var(--kit-primary, #6366F1)"></div>
+    <div style="display:flex;align-items:center;gap:6px"><div style="width:28px;height:28px;border-radius:14px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600">2</div><span style="font-size:13px;font-weight:500;color:var(--kit-primary, #6366F1)">Shipping</span></div>
+    <div style="flex:1;height:2px;background:var(--kit-border, #E2E8F0)"></div>
+    <div style="display:flex;align-items:center;gap:6px"><div style="width:28px;height:28px;border-radius:14px;border:2px solid var(--kit-border, #E2E8F0);color:var(--kit-text-3, #94A3B8);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;box-sizing:border-box">3</div><span style="font-size:13px;color:var(--kit-text-3, #94A3B8)">Payment</span></div>
+  </div>
+  <div style="font-size:20px;font-weight:600;color:var(--kit-text, #0F172A);margin-bottom:20px">Shipping Address</div>
+  <div style="display:flex;gap:12px;margin-bottom:12px"><div style="flex:1"><div style="font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:4px">First Name</div><div style="height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:0 12px;display:flex;align-items:center;font-size:14px;color:var(--kit-text, #0F172A)">John</div></div><div style="flex:1"><div style="font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:4px">Last Name</div><div style="height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:0 12px;display:flex;align-items:center;font-size:14px;color:var(--kit-text, #0F172A)">Doe</div></div></div>
+  <div style="margin-bottom:12px"><div style="font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:4px">Address</div><div style="height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:0 12px;display:flex;align-items:center;font-size:14px;color:var(--kit-text-3, #94A3B8)">123 Main Street</div></div>
+  <div style="display:flex;gap:12px;margin-bottom:12px"><div style="flex:2"><div style="font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:4px">City</div><div style="height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:0 12px;display:flex;align-items:center;font-size:14px;color:var(--kit-text-3, #94A3B8)">San Francisco</div></div><div style="flex:1"><div style="font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:4px">State</div><div style="height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--kit-text, #0F172A)">CA<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></div></div><div style="flex:1"><div style="font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:4px">ZIP</div><div style="height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:0 12px;display:flex;align-items:center;font-size:14px;color:var(--kit-text-3, #94A3B8)">94102</div></div></div>
+  <div style="margin-bottom:20px"><div style="font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:4px">Phone</div><div style="height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:0 12px;display:flex;align-items:center;font-size:14px;color:var(--kit-text-3, #94A3B8)">+1 (555) 000-0000</div></div>
+  <div style="font-size:20px;font-weight:600;color:var(--kit-text, #0F172A);margin-bottom:16px">Shipping Method</div>
+  <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:24px">
+    <div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--kit-primary, #6366F1);border-radius:8px;cursor:pointer"><div style="width:18px;height:18px;border-radius:9px;border:2px solid var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;box-sizing:border-box"><div style="width:8px;height:8px;border-radius:4px;background:var(--kit-primary, #6366F1)"></div></div><div style="flex:1"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">Standard Shipping</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">5-7 business days</div></div><span style="font-size:14px;font-weight:600;color:var(--kit-success, #22C55E)">Free</span></div>
+    <div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;cursor:pointer"><div style="width:18px;height:18px;border-radius:9px;border:2px solid var(--kit-border-strong, #CBD5E1);box-sizing:border-box"></div><div style="flex:1"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">Express Shipping</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">2-3 business days</div></div><span style="font-size:14px;font-weight:600;color:var(--kit-text, #0F172A)">$12.99</span></div>
+  </div>
+  <div style="display:flex;gap:12px"><div style="height:44px;flex:1;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--kit-text, #0F172A);cursor:pointer">Back to Cart</div><div style="height:44px;flex:1;background:var(--kit-primary, #6366F1);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;cursor:pointer">Continue to Payment</div></div>
+</div>

package/components/web/cart/order-confirmation.html

@@ -0,0 +1,24 @@
+<!--
+  @name: Order Confirmation — Success
+  @kit: web
+  @width: 560
+  @height: 440
+  @tags: order, confirmation, success, receipt, ecommerce
+-->
+<div data-component="Order Confirmation — Success" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:16px;padding:40px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);text-align:center">
+  <div style="width:64px;height:64px;border-radius:32px;background:var(--kit-success-bg, #F0FDF4);display:flex;align-items:center;justify-content:center;margin:0 auto 20px"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
+  <div style="font-size:24px;font-weight:700;color:var(--kit-text, #0F172A);margin-bottom:8px">Order Confirmed!</div>
+  <div style="font-size:15px;color:var(--kit-text-2, #475569);margin-bottom:24px">Thank you for your purchase. Your order has been placed successfully.</div>
+  <div style="background:var(--kit-surface, #F8FAFC);border-radius:12px;padding:20px;text-align:left;margin-bottom:24px">
+    <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Order Number</span><span style="font-weight:600;color:var(--kit-text, #0F172A)">#ORD-4523</span></div>
+    <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Items</span><span style="color:var(--kit-text, #0F172A)">3 items</span></div>
+    <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Shipping</span><span style="color:var(--kit-text, #0F172A)">Standard (5-7 days)</span></div>
+    <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Est. Delivery</span><span style="font-weight:500;color:var(--kit-text, #0F172A)">Apr 1, 2026</span></div>
+    <div style="height:1px;background:var(--kit-border, #E2E8F0);margin:8px 0"></div>
+    <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:16px;font-weight:700"><span style="color:var(--kit-text, #0F172A)">Total Paid</span><span style="color:var(--kit-text, #0F172A)">$382.29</span></div>
+  </div>
+  <div style="display:flex;gap:12px;justify-content:center">
+    <div style="height:44px;padding:0 24px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:8px;display:flex;align-items:center;font-size:14px;font-weight:600;cursor:pointer">Track Order</div>
+    <div style="height:44px;padding:0 24px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;display:flex;align-items:center;font-size:14px;color:var(--kit-text, #0F172A);cursor:pointer">Continue Shopping</div>
+  </div>
+</div>

package/components/web/charts/chart-area.html

@@ -0,0 +1,25 @@
+<!--
+  @name: Area Chart — with Gradient
+  @kit: web
+  @width: 560
+  @height: 280
+  @tags: chart, area, line, trend, data, visualization
+-->
+<div data-component="Area Chart — with Gradient" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);padding:24px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
+    <div><div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Revenue</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px">Last 6 months</div></div>
+    <div style="display:flex;align-items:center;gap:4px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-success, #22C55E)"><svg width="14" height="14" 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>+24.5%</div>
+  </div>
+  <svg width="100%" height="180" viewBox="0 0 512 180" preserveAspectRatio="none" style="display:block">
+    <defs><linearGradient id="webAreaGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" style="stop-color:var(--kit-primary, #6366F1);stop-opacity:0.2"/><stop offset="100%" style="stop-color:var(--kit-primary, #6366F1);stop-opacity:0.01"/></linearGradient></defs>
+    <line x1="0" y1="36" x2="512" y2="36" stroke="var(--kit-border, #E2E8F0)" stroke-width="0.5" stroke-dasharray="4"/>
+    <line x1="0" y1="72" x2="512" y2="72" stroke="var(--kit-border, #E2E8F0)" stroke-width="0.5" stroke-dasharray="4"/>
+    <line x1="0" y1="108" x2="512" y2="108" stroke="var(--kit-border, #E2E8F0)" stroke-width="0.5" stroke-dasharray="4"/>
+    <line x1="0" y1="144" x2="512" y2="144" stroke="var(--kit-border, #E2E8F0)" stroke-width="0.5" stroke-dasharray="4"/>
+    <path d="M0,130 L85,110 L170,70 L256,90 L341,40 L426,55 L512,20 L512,180 L0,180 Z" fill="url(#webAreaGrad)"/>
+    <polyline points="0,130 85,110 170,70 256,90 341,40 426,55 512,20" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="341" cy="40" r="4" fill="var(--kit-primary, #6366F1)"/>
+    <circle cx="341" cy="40" r="8" fill="var(--kit-primary, #6366F1)" opacity="0.15"/>
+  </svg>
+  <div style="display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--kit-text-3, #94A3B8)"><span>Oct</span><span>Nov</span><span>Dec</span><span>Jan</span><span>Feb</span><span>Mar</span></div>
+</div>

package/components/web/charts/chart-bar.html

@@ -0,0 +1,19 @@
+<!--
+  @name: Bar Chart — Vertical
+  @kit: web
+  @width: 560
+  @height: 280
+  @tags: chart, bar, vertical, data, visualization
+-->
+<div data-component="Bar Chart — Vertical" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);padding:24px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:20px">Weekly Activity</div>
+  <div style="display:flex;align-items:flex-end;justify-content:space-between;height:160px;padding:0 8px;gap:16px">
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px"><div style="width:100%;height:55%;background:var(--kit-primary, #6366F1);border-radius:6px 6px 0 0;opacity:0.7"></div><span style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Mon</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px"><div style="width:100%;height:80%;background:var(--kit-primary, #6366F1);border-radius:6px 6px 0 0;opacity:0.85"></div><span style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Tue</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px"><div style="width:100%;height:45%;background:var(--kit-primary, #6366F1);border-radius:6px 6px 0 0;opacity:0.6"></div><span style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Wed</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px"><div style="width:100%;height:95%;background:var(--kit-primary, #6366F1);border-radius:6px 6px 0 0"></div><span style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Thu</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px"><div style="width:100%;height:100%;background:var(--kit-primary, #6366F1);border-radius:6px 6px 0 0"></div><span style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Fri</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px"><div style="width:100%;height:70%;background:var(--kit-primary, #6366F1);border-radius:6px 6px 0 0;opacity:0.75"></div><span style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Sat</span></div>
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px"><div style="width:100%;height:30%;background:var(--kit-primary, #6366F1);border-radius:6px 6px 0 0;opacity:0.5"></div><span style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Sun</span></div>
+  </div>
+</div>

package/components/web/charts/chart-donut.html

@@ -0,0 +1,27 @@
+<!--
+  @name: Donut Chart — with Legend
+  @kit: web
+  @width: 320
+  @height: 300
+  @tags: chart, donut, pie, data, visualization, legend
+-->
+<div data-component="Donut Chart — with Legend" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);padding:24px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:20px">Traffic Sources</div>
+  <div style="display:flex;align-items:center;gap:24px;flex-wrap:wrap">
+    <div style="width:160px;height:160px;position:relative;flex-shrink:0">
+      <svg width="160" height="160" viewBox="0 0 160 160">
+        <circle cx="80" cy="80" r="56" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="20" stroke-dasharray="123 229" stroke-dashoffset="-57" stroke-linecap="round"/>
+        <circle cx="80" cy="80" r="56" fill="none" stroke="#F472B6" stroke-width="20" stroke-dasharray="88 264" stroke-dashoffset="-180" stroke-linecap="round"/>
+        <circle cx="80" cy="80" r="56" fill="none" stroke="#34D399" stroke-width="20" stroke-dasharray="70 282" stroke-dashoffset="-268" stroke-linecap="round"/>
+        <circle cx="80" cy="80" r="56" fill="none" stroke="#FBBF24" stroke-width="20" stroke-dasharray="35 317" stroke-dashoffset="-338" 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)">8.4K</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Total</div></div>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:12px;flex:1;min-width:100px">
+      <div style="display:flex;align-items:center;gap:8px"><div style="width:10px;height:10px;border-radius:3px;background:var(--kit-primary, #6366F1)"></div><div style="flex:1;font-size:13px;color:var(--kit-text, #0F172A)">Direct</div><div style="font-size:13px;font-weight:600;color:var(--kit-text, #0F172A)">35%</div></div>
+      <div style="display:flex;align-items:center;gap:8px"><div style="width:10px;height:10px;border-radius:3px;background:#F472B6"></div><div style="flex:1;font-size:13px;color:var(--kit-text, #0F172A)">Social</div><div style="font-size:13px;font-weight:600;color:var(--kit-text, #0F172A)">25%</div></div>
+      <div style="display:flex;align-items:center;gap:8px"><div style="width:10px;height:10px;border-radius:3px;background:#34D399"></div><div style="flex:1;font-size:13px;color:var(--kit-text, #0F172A)">Organic</div><div style="font-size:13px;font-weight:600;color:var(--kit-text, #0F172A)">20%</div></div>
+      <div style="display:flex;align-items:center;gap:8px"><div style="width:10px;height:10px;border-radius:3px;background:#FBBF24"></div><div style="flex:1;font-size:13px;color:var(--kit-text, #0F172A)">Referral</div><div style="font-size:13px;font-weight:600;color:var(--kit-text, #0F172A)">10%</div></div>
+    </div>
+  </div>
+</div>

package/components/web/content/author-card.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Author Card — Bio
+  @kit: web
+  @width: 640
+  @height: 100
+  @tags: author, bio, card, content, blog
+-->
+<div data-component="Author Card — Bio" style="display:flex;gap:16px;width:100%;padding:20px;background:var(--kit-surface, #F8FAFC);border-radius:12px;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box;align-items:center">
+  <div style="width:56px;height:56px;border-radius:28px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex-shrink:0">AJ</div>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:16px;font-weight:600;color:var(--kit-text, #0F172A)">Alex Johnson</div>
+    <div style="font-size:13px;color:var(--kit-text-2, #475569);line-height:1.5;margin-top:2px">Senior Product Designer at Acme. Writing about design systems, accessibility, and creative tools.</div>
+  </div>
+  <div style="height:32px;padding:0 14px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:6px;display:flex;align-items:center;font-size:13px;font-weight:500;cursor:pointer;flex-shrink:0">Follow</div>
+</div>

package/components/web/content/blog-card-horizontal.html

@@ -0,0 +1,16 @@
+<!--
+  @name: Blog Card — Horizontal
+  @kit: web
+  @width: 640
+  @height: 160
+  @tags: blog, card, article, horizontal, content
+-->
+<div data-component="Blog Card — Horizontal" style="display:flex;width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer">
+  <img src="https://placehold.jp/200x160.png" style="width:200px;height:160px;object-fit:cover;flex-shrink:0" alt="Article"/>
+  <div style="flex:1;padding:16px 20px;display:flex;flex-direction:column;justify-content:center;min-width:0">
+    <div style="font-size:12px;font-weight:600;color:var(--kit-primary, #6366F1);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px">Technology</div>
+    <div style="font-size:18px;font-weight:600;color:var(--kit-text, #0F172A);line-height:1.3;margin-bottom:6px">Building Scalable Design Systems for Growing Teams</div>
+    <div style="font-size:13px;color:var(--kit-text-2, #475569);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px">A comprehensive guide to creating design systems that grow with your organization...</div>
+    <div style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--kit-text-3, #94A3B8)"><span>Alex Johnson</span><span>·</span><span>Mar 20, 2026</span><span>·</span><span>5 min read</span></div>
+  </div>
+</div>

package/components/web/cta/cta-centered.html

@@ -0,0 +1,15 @@
+<!--
+  @name: CTA — Centered
+  @kit: web
+  @width: 1440
+  @height: 320
+  @tags: cta, call-to-action, centered, buttons, conversion
+-->
+<div data-component="CTA — Centered" style="width:100%;padding:72px 64px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);text-align:center;background:var(--kit-bg, #FFFFFF)">
+  <div style="font-size:28px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);line-height:1.2;margin-bottom:12px">Ready to take your project to the next level?</div>
+  <div style="font-size:var(--kit-text-lg, 18px);color:var(--kit-text-2, #475569);line-height:1.6;max-width:560px;margin:0 auto 36px">Start building today with our powerful tools. No credit card required, free for teams up to 5 members.</div>
+  <div style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap">
+    <div style="display:inline-flex;align-items:center;justify-content:center;height:48px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border-radius:var(--kit-radius, 8px);padding:0 28px;font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);cursor:pointer">Get Started Free</div>
+    <div style="display:inline-flex;align-items:center;justify-content:center;height:48px;background:transparent;color:var(--kit-text, #0F172A);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 28px;font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-medium, 500);cursor:pointer">Learn More</div>
+  </div>
+</div>

package/components/web/cta/cta-newsletter.html

@@ -0,0 +1,16 @@
+<!--
+  @name: CTA — Newsletter Signup
+  @kit: web
+  @width: 1440
+  @height: 280
+  @tags: cta, newsletter, email, signup, subscribe, form
+-->
+<div data-component="CTA — Newsletter Signup" style="width:100%;padding:56px 64px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);text-align:center;background:var(--kit-surface, #F8FAFC)">
+  <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-primary, #6366F1);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:8px">Stay updated</div>
+  <div style="font-size:28px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);line-height:1.2;margin-bottom:12px">Subscribe to our newsletter</div>
+  <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text-2, #475569);line-height:1.6;max-width:480px;margin:0 auto 28px">Get the latest updates, articles, and resources delivered straight to your inbox every week.</div>
+  <div style="display:flex;justify-content:center;gap:0;max-width:460px;margin:0 auto">
+    <div style="flex:1;height:48px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-right:none;border-radius:var(--kit-radius, 8px) 0 0 var(--kit-radius, 8px);padding:0 16px;display:flex;align-items:center;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8);box-sizing:border-box">Enter your email...</div>
+    <div style="height:48px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border-radius:0 var(--kit-radius, 8px) var(--kit-radius, 8px) 0;padding:0 24px;display:flex;align-items:center;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);cursor:pointer;white-space:nowrap">Subscribe</div>
+  </div>
+</div>

package/components/web/cta/cta-with-image.html

@@ -0,0 +1,17 @@
+<!--
+  @name: CTA — Split with Image
+  @kit: web
+  @width: 1440
+  @height: 400
+  @tags: cta, call-to-action, split, image, two-column
+-->
+<div data-component="CTA — Split with Image" style="width:100%;display:flex;align-items:center;padding:64px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);gap:64px;flex-wrap:wrap;background:var(--kit-bg, #FFFFFF)">
+  <div style="flex:1;min-width:320px">
+    <div style="font-size:28px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);line-height:1.2;margin-bottom:16px">Start building something amazing today</div>
+    <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text-2, #475569);line-height:1.6;margin-bottom:32px;max-width:480px">Join thousands of teams who use our platform to design, prototype, and ship products faster than ever before.</div>
+    <div style="display:inline-flex;align-items:center;justify-content:center;height:48px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border-radius:var(--kit-radius, 8px);padding:0 28px;font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);cursor:pointer;gap:8px">Get Started <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></div>
+  </div>
+  <div style="flex:1;min-width:320px;height:272px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-lg, 16px);display:flex;align-items:center;justify-content:center">
+    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+  </div>
+</div>

package/components/web/data-display/accordion.html

@@ -0,0 +1,45 @@
+<!--
+  @name: Accordion
+  @kit: web
+  @width: 500
+  @height: 300
+  @tags: accordion, expandable, faq, collapse
+-->
+<div data-component="Accordion" style="width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--kit-space-2, 8px);font-family:var(--kit-font, Inter, system-ui, sans-serif);">
+
+  <!-- Item 1 — Expanded -->
+  <div style="border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);overflow:hidden;">
+    <button style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--kit-space-4, 16px);background:var(--kit-bg, #FFFFFF);border:none;cursor:pointer;font-family:inherit;">
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);">What payment methods do you accept?</span>
+      <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"><polyline points="18 15 12 9 6 15"/></svg>
+    </button>
+    <div style="padding:0 var(--kit-space-4, 16px) var(--kit-space-4, 16px);background:var(--kit-bg, #FFFFFF);">
+      <p style="margin:0;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);line-height:1.6;">We accept all major credit cards including Visa, Mastercard, and American Express. You can also pay via PayPal, Apple Pay, or Google Pay. For enterprise plans, we offer wire transfer and invoicing options.</p>
+    </div>
+  </div>
+
+  <!-- Item 2 — Collapsed -->
+  <div style="border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);overflow:hidden;">
+    <button style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--kit-space-4, 16px);background:var(--kit-bg, #FFFFFF);border:none;cursor:pointer;font-family:inherit;">
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);">Can I cancel my subscription anytime?</span>
+      <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"><polyline points="6 9 12 15 18 9"/></svg>
+    </button>
+  </div>
+
+  <!-- Item 3 — Collapsed -->
+  <div style="border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);overflow:hidden;">
+    <button style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--kit-space-4, 16px);background:var(--kit-bg, #FFFFFF);border:none;cursor:pointer;font-family:inherit;">
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);">How does team collaboration work?</span>
+      <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"><polyline points="6 9 12 15 18 9"/></svg>
+    </button>
+  </div>
+
+  <!-- Item 4 — Collapsed -->
+  <div style="border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);overflow:hidden;">
+    <button style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--kit-space-4, 16px);background:var(--kit-bg, #FFFFFF);border:none;cursor:pointer;font-family:inherit;">
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);">Is there a free trial available?</span>
+      <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"><polyline points="6 9 12 15 18 9"/></svg>
+    </button>
+  </div>
+
+</div>

package/components/web/data-display/grid-view.html

@@ -0,0 +1,21 @@
+<!--
+  @name: Grid View — Responsive Cards
+  @kit: web
+  @width: 800
+  @height: 400
+  @tags: grid, view, cards, responsive, gallery
+-->
+<div data-component="Grid View — Responsive Cards" style="display:flex;flex-wrap:wrap;gap:20px;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="flex:1 1 220px;min-width:0;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden;cursor:pointer">
+    <img src="https://placehold.jp/280x160.png" style="width:100%;height:160px;object-fit:cover;display:block" alt="Item"/>
+    <div style="padding:14px"><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:4px">Project Alpha</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">12 files · 2h ago</div></div>
+  </div>
+  <div style="flex:1 1 220px;min-width:0;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden;cursor:pointer">
+    <img src="https://placehold.jp/280x160.png" style="width:100%;height:160px;object-fit:cover;display:block" alt="Item"/>
+    <div style="padding:14px"><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:4px">Dashboard v2</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">8 files · 1d ago</div></div>
+  </div>
+  <div style="flex:1 1 220px;min-width:0;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden;cursor:pointer">
+    <img src="https://placehold.jp/280x160.png" style="width:100%;height:160px;object-fit:cover;display:block" alt="Item"/>
+    <div style="padding:14px"><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:4px">Mobile App</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">24 files · 3d ago</div></div>
+  </div>
+</div>

package/components/web/data-display/list-view.html

@@ -0,0 +1,27 @@
+<!--
+  @name: List View — Rows
+  @kit: web
+  @width: 640
+  @height: 280
+  @tags: list, view, rows, vertical, items
+-->
+<div data-component="List View — Rows" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;align-items:center;padding:14px 20px;gap:14px;border-bottom:1px solid var(--kit-border, #E2E8F0);cursor:pointer">
+    <img src="https://placehold.jp/48x48.png" style="width:48px;height:48px;border-radius:var(--kit-radius, 8px);object-fit:cover;flex-shrink:0" alt="Item"/>
+    <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)">Project Alpha</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px">Updated 2 hours ago · 12 files</div></div>
+    <span style="background:var(--kit-success-bg, #F0FDF4);color:var(--kit-success, #22C55E);padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;flex-shrink:0">Active</span>
+    <div style="color:var(--kit-text-3, #94A3B8);flex-shrink:0"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></div>
+  </div>
+  <div style="display:flex;align-items:center;padding:14px 20px;gap:14px;border-bottom:1px solid var(--kit-border, #E2E8F0);cursor:pointer">
+    <img src="https://placehold.jp/48x48.png" style="width:48px;height:48px;border-radius:var(--kit-radius, 8px);object-fit:cover;flex-shrink:0" alt="Item"/>
+    <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)">Dashboard Redesign</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px">Updated yesterday · 8 files</div></div>
+    <span style="background:var(--kit-warning-bg, #FFFBEB);color:var(--kit-warning, #F59E0B);padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;flex-shrink:0">In Review</span>
+    <div style="color:var(--kit-text-3, #94A3B8);flex-shrink:0"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></div>
+  </div>
+  <div style="display:flex;align-items:center;padding:14px 20px;gap:14px;cursor:pointer">
+    <img src="https://placehold.jp/48x48.png" style="width:48px;height:48px;border-radius:var(--kit-radius, 8px);object-fit:cover;flex-shrink:0" alt="Item"/>
+    <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)">Mobile App v3</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px">Updated 3 days ago · 24 files</div></div>
+    <span style="background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text-2, #475569);padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;flex-shrink:0">Draft</span>
+    <div style="color:var(--kit-text-3, #94A3B8);flex-shrink:0"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></div>
+  </div>
+</div>

package/components/web/data-display/progress-steps.html

@@ -0,0 +1,39 @@
+<!--
+  @name: Progress Steps
+  @kit: web
+  @width: 400
+  @height: 50
+  @tags: progress, steps, indicator, flow
+-->
+<div data-component="Progress Steps" style="width:100%;box-sizing:border-box;display:flex;align-items:center;padding:var(--kit-space-2, 8px) 0;font-family:var(--kit-font, Inter, system-ui, sans-serif);">
+
+  <!-- Step 1: Completed -->
+  <div style="width:32px;height:32px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-success, #22C55E);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+  </div>
+
+  <!-- Line 1: Completed -->
+  <div style="flex:1;height:2px;background:var(--kit-success, #22C55E);margin:0 var(--kit-space-1, 4px);"></div>
+
+  <!-- Step 2: Completed -->
+  <div style="width:32px;height:32px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-success, #22C55E);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+  </div>
+
+  <!-- Line 2: Partial (completed to active) -->
+  <div style="flex:1;height:2px;background:linear-gradient(to right, var(--kit-success, #22C55E), var(--kit-primary, #6366F1));margin:0 var(--kit-space-1, 4px);"></div>
+
+  <!-- Step 3: Active -->
+  <div style="width:32px;height:32px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 4px rgba(99,102,241,0.2);">
+    <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-bold, 700);color:#FFFFFF;">3</span>
+  </div>
+
+  <!-- Line 3: Pending -->
+  <div style="flex:1;height:2px;background:var(--kit-border, #E2E8F0);margin:0 var(--kit-space-1, 4px);"></div>
+
+  <!-- Step 4: Pending -->
+  <div style="width:32px;height:32px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);border:2px solid var(--kit-border, #E2E8F0);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+    <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-3, #94A3B8);">4</span>
+  </div>
+
+</div>

package/components/web/data-display/rating-stars.html

@@ -0,0 +1,38 @@
+<!--
+  @name: Rating Stars
+  @kit: web
+  @width: 180
+  @height: 24
+  @tags: rating, stars, review, score
+-->
+<div data-component="Rating Stars" style="width:100%;box-sizing:border-box;display:flex;align-items:center;gap:var(--kit-space-1, 4px);font-family:var(--kit-font, Inter, system-ui, sans-serif);">
+
+  <!-- Star 1 — Filled -->
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--kit-warning, #F59E0B)" stroke="var(--kit-warning, #F59E0B)" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <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>
+
+  <!-- Star 2 — Filled -->
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--kit-warning, #F59E0B)" stroke="var(--kit-warning, #F59E0B)" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <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>
+
+  <!-- Star 3 — Filled -->
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--kit-warning, #F59E0B)" stroke="var(--kit-warning, #F59E0B)" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <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>
+
+  <!-- Star 4 — Filled -->
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--kit-warning, #F59E0B)" stroke="var(--kit-warning, #F59E0B)" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <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>
+
+  <!-- Star 5 — Empty -->
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-border-strong, #CBD5E1)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <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>
+
+  <!-- Rating text -->
+  <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-left:var(--kit-space-1, 4px);">4.0</span>
+
+</div>

package/components/web/data-display/stat-card-compact.html

@@ -0,0 +1,32 @@
+<!--
+  @name: Stat Card — Compact
+  @kit: web
+  @width: 200
+  @height: 80
+  @tags: stat, metric, kpi, compact
+-->
+<div data-component="Stat Card — Compact" style="width:100%;box-sizing:border-box;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:var(--kit-space-3, 12px) var(--kit-space-4, 16px);display:flex;align-items:center;gap:var(--kit-space-3, 12px);font-family:var(--kit-font, Inter, system-ui, sans-serif);">
+
+  <!-- Icon Circle -->
+  <div style="width:40px;height:40px;border-radius:var(--kit-radius-full, 9999px);background:rgba(99,102,241,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+      <circle cx="9" cy="7" r="4"/>
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+      <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+    </svg>
+  </div>
+
+  <!-- Content -->
+  <div style="flex:1;min-width:0;">
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569);margin-bottom:2px;">Users</div>
+    <div style="display:flex;align-items:center;gap:var(--kit-space-2, 8px);">
+      <span style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);line-height:1;">2,451</span>
+      <div style="display:flex;align-items:center;gap:2px;">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
+        <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-success, #22C55E);">8.2%</span>
+      </div>
+    </div>
+  </div>
+
+</div>

package/components/web/data-display/stat-card-large.html

@@ -0,0 +1,34 @@
+<!--
+  @name: Stat Card — Large
+  @kit: web
+  @width: 300
+  @height: 160
+  @tags: stat, metric, kpi, dashboard, card
+-->
+<div data-component="Stat Card — Large" style="width:100%;box-sizing:border-box;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);padding:var(--kit-space-5, 20px);font-family:var(--kit-font, Inter, system-ui, sans-serif);">
+
+  <!-- Header: Title + Trend -->
+  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kit-space-3, 12px);">
+    <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569);">Revenue</span>
+    <div style="display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--kit-radius-full, 9999px);background:rgba(34,197,94,0.1);">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
+      <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-success, #22C55E);">+12.5%</span>
+    </div>
+  </div>
+
+  <!-- Big Number -->
+  <div style="font-size:var(--kit-text-3xl, 30px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-bottom:var(--kit-space-3, 12px);line-height:1;">$48,352</div>
+
+  <!-- Mini Sparkline -->
+  <svg width="100%" height="32" viewBox="0 0 260 32" preserveAspectRatio="none" style="display:block;">
+    <defs>
+      <linearGradient id="sparkGrad" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="var(--kit-primary, #6366F1)" stop-opacity="0.2"/>
+        <stop offset="100%" stop-color="var(--kit-primary, #6366F1)" stop-opacity="0"/>
+      </linearGradient>
+    </defs>
+    <path d="M0,28 L20,24 L40,26 L60,20 L80,22 L100,16 L120,18 L140,10 L160,14 L180,8 L200,12 L220,6 L240,8 L260,4" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M0,28 L20,24 L40,26 L60,20 L80,22 L100,16 L120,18 L140,10 L160,14 L180,8 L200,12 L220,6 L240,8 L260,4 L260,32 L0,32 Z" fill="url(#sparkGrad)"/>
+  </svg>
+
+</div>