@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/card/Card05.svelte

@@ -0,0 +1,51 @@
+<!--
+  Card05.svelte
+  Billing/account card: icon circle + title + more-menu, then key-value rows
+  (last invoice date + amount).
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface KVRow { label: string; value: string; }
+
+  let {
+    class: className = '',
+    title = 'Title Text',
+    rows = [
+      { label: 'Last invoice', value: 'December 13, 2024' },
+      { label: 'Amount', value: '$45' }
+    ] as KVRow[],
+    onmore = () => {}
+  }: {
+    class?: string;
+    title?: string;
+    rows?: KVRow[];
+    onmore?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('rounded-lg border bg-background', className)}>
+  <!-- Header -->
+  <div class="flex items-center gap-3 p-4">
+    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-foreground text-background text-xs font-bold">
+      {title[0]?.toUpperCase()}
+    </div>
+    <p class="flex-1 font-semibold">{title}</p>
+    <Button variant="ghost" size="icon" class="h-7 w-7" onclick={onmore}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+    </Button>
+  </div>
+
+  <!-- Key-value rows -->
+  {#if rows.length}
+    <div class="border-t">
+      {#each rows as row, i}
+        <div class={cn('flex items-center justify-between px-4 py-2.5 text-sm', i > 0 && 'border-t')}>
+          <span class="text-muted-foreground">{row.label}</span>
+          <span class="font-medium">{row.value}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/registry/blocks/card/Card06.svelte

@@ -0,0 +1,77 @@
+<!--
+  Card06.svelte
+  Task/event card: title + description + checkbox (top-right), divider,
+  date/time range + avatar stack. Supports done/not-done state.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Attendee { name: string; avatar?: string; }
+
+  let {
+    class: className = '',
+    title = 'Title Text',
+    description = 'This is a card description.',
+    done = false,
+    dateTime = 'Today  10:00 PM - 11:45 PM',
+    attendees = [] as Attendee[],
+    ontoggle = (_: boolean) => {}
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    done?: boolean;
+    dateTime?: string;
+    attendees?: Attendee[];
+    ontoggle?: (value: boolean) => void;
+  } = $props();
+
+  let isDone = $state(done);
+
+  function initials(n: string) {
+    return n.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+</script>
+
+<div class={cn('rounded-lg border bg-background p-4', className)}>
+  <!-- Header -->
+  <div class="flex items-start justify-between gap-2">
+    <div class="flex-1 min-w-0">
+      <p class={cn('font-semibold', isDone && 'line-through text-muted-foreground')}>{title}</p>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    <!-- Checkbox -->
+    <button
+      type="button"
+      onclick={() => { isDone = !isDone; ontoggle(isDone); }}
+      class={cn(
+        'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors',
+        isDone ? 'border-foreground bg-foreground text-background' : 'border-input bg-background'
+      )}
+    >
+      {#if isDone}
+        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+      {/if}
+    </button>
+  </div>
+
+  <!-- Footer -->
+  <div class="mt-3 flex items-center justify-between border-t pt-3">
+    <span class="text-xs text-muted-foreground">{dateTime}</span>
+    {#if attendees.length}
+      <div class="flex -space-x-2">
+        {#each attendees.slice(0, 4) as a}
+          <div class="h-6 w-6 overflow-hidden rounded-full border-2 border-background">
+            {#if a.avatar}
+              <img src={a.avatar} alt={a.name} class="h-full w-full object-cover" />
+            {:else}
+              <div class="flex h-full w-full items-center justify-center bg-muted text-[8px] font-semibold">{initials(a.name)}</div>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>

package/src/registry/blocks/card/Card07.svelte

@@ -0,0 +1,35 @@
+<!--
+  Card07.svelte
+  File/attachment card: link icon + filename + size + "Download" text button.
+  Mobile: icon download button instead.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    filename = 'resume_1.pdf',
+    size = '2,4mb',
+    ondownload = () => {}
+  }: {
+    class?: string;
+    filename?: string;
+    size?: string;
+    ondownload?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('flex items-center gap-3 rounded-lg border bg-background px-4 py-3', className)}>
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+  <span class="flex-1 text-sm font-medium truncate">{filename}</span>
+  {#if size}
+    <span class="shrink-0 text-xs text-muted-foreground">{size}</span>
+  {/if}
+  <!-- Desktop: text button -->
+  <Button variant="outline" size="sm" onclick={ondownload} class="hidden sm:inline-flex">Download</Button>
+  <!-- Mobile: icon button -->
+  <Button variant="ghost" size="icon" class="h-8 w-8 sm:hidden" onclick={ondownload}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+  </Button>
+</div>

package/src/registry/blocks/card/Card08.svelte

@@ -0,0 +1,36 @@
+<!--
+  Card08.svelte
+  File/attachment card: link icon + filename + size + download icon + delete icon buttons.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    filename = 'resume_1.pdf',
+    size = '2,4mb',
+    ondownload = () => {},
+    ondelete = () => {}
+  }: {
+    class?: string;
+    filename?: string;
+    size?: string;
+    ondownload?: () => void;
+    ondelete?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('flex items-center gap-3 rounded-lg border bg-background px-4 py-3', className)}>
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+  <span class="flex-1 text-sm font-medium truncate">{filename}</span>
+  {#if size}
+    <span class="shrink-0 text-xs text-muted-foreground">{size}</span>
+  {/if}
+  <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0" onclick={ondownload}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+  </Button>
+  <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0 text-destructive hover:text-destructive" onclick={ondelete}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
+  </Button>
+</div>

package/src/registry/blocks/card/index.ts

@@ -0,0 +1,8 @@
+export { default as Card01 } from './Card01.svelte';
+export { default as Card02 } from './Card02.svelte';
+export { default as Card03 } from './Card03.svelte';
+export { default as Card04 } from './Card04.svelte';
+export { default as Card05 } from './Card05.svelte';
+export { default as Card06 } from './Card06.svelte';
+export { default as Card07 } from './Card07.svelte';
+export { default as Card08 } from './Card08.svelte';

package/src/registry/blocks/cart/Cart01.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	const { class: className }: Props = $props();
+
+	interface CartItem {
+		id: number;
+		name: string;
+		desc: string;
+		price: number;
+		quantity: number;
+		size: string;
+	}
+
+	let cartItems = $state<CartItem[]>([
+		{
+			id: 1,
+			name: 'Wireless Headphones',
+			desc: 'Premium noise-cancelling',
+			price: 129.99,
+			quantity: 1,
+			size: 'One size'
+		},
+		{
+			id: 2,
+			name: 'USB-C Cable',
+			desc: '2m braided nylon',
+			price: 19.99,
+			quantity: 2,
+			size: '2 meters'
+		},
+		{
+			id: 3,
+			name: 'Phone Case',
+			desc: 'Clear protective case',
+			price: 24.99,
+			quantity: 1,
+			size: 'Medium'
+		}
+	]);
+
+	let promoCode = $state('');
+
+	let subtotal = $derived(
+		cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
+	);
+	let shipping = $derived(subtotal > 100 ? 0 : 9.99);
+	let tax = $derived(subtotal * 0.1);
+	let total = $derived(subtotal + shipping + tax);
+
+	function updateQuantity(id: number, delta: number) {
+		const item = cartItems.find((i) => i.id === id);
+		if (item) {
+			item.quantity = Math.max(1, item.quantity + delta);
+		}
+	}
+
+	function removeItem(id: number) {
+		cartItems = cartItems.filter((item) => item.id !== id);
+	}
+
+	function TrashIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="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"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>`;
+	}
+</script>
+
+<div class={cn('space-y-8', className)}>
+	<div>
+		<h1 class="text-3xl font-bold">Shopping Cart</h1>
+	</div>
+
+	<div class="grid gap-8 lg:grid-cols-3">
+		<!-- Cart Items -->
+		<div class="lg:col-span-2">
+			<div class="rounded-lg border bg-background overflow-hidden">
+				<div class="overflow-x-auto">
+					<table class="w-full">
+						<thead class="border-b bg-muted/50">
+							<tr>
+								<th class="px-6 py-3 text-left text-sm font-semibold">Product</th>
+								<th class="px-6 py-3 text-left text-sm font-semibold">Size</th>
+								<th class="px-6 py-3 text-left text-sm font-semibold">Price</th>
+								<th class="px-6 py-3 text-left text-sm font-semibold">Quantity</th>
+								<th class="px-6 py-3 text-right text-sm font-semibold">Action</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y">
+							{#each cartItems as item (item.id)}
+								<tr class="hover:bg-muted/30 transition">
+									<td class="px-6 py-4">
+										<div class="flex gap-4">
+											<div class="aspect-square w-16 h-16 bg-gray-100 rounded flex items-center justify-center flex-shrink-0">
+											</div>
+											<div>
+												<p class="font-medium">{item.name}</p>
+												<p class="text-sm text-muted-foreground">{item.desc}</p>
+											</div>
+										</div>
+									</td>
+									<td class="px-6 py-4 text-sm">{item.size}</td>
+									<td class="px-6 py-4 font-medium">${item.price.toFixed(2)}</td>
+									<td class="px-6 py-4">
+										<div class="flex items-center gap-2 border rounded-md w-fit">
+											<button
+												onclick={() => updateQuantity(item.id, -1)}
+												class="px-2 py-1 hover:bg-muted transition"
+											>
+												−
+											</button>
+											<span class="px-3 py-1 text-sm">{item.quantity}</span>
+											<button
+												onclick={() => updateQuantity(item.id, 1)}
+												class="px-2 py-1 hover:bg-muted transition"
+											>
+												+
+											</button>
+										</div>
+									</td>
+									<td class="px-6 py-4 text-right">
+										<button
+											onclick={() => removeItem(item.id)}
+											class="p-2 hover:bg-destructive/10 text-destructive rounded transition"
+										>
+											{@html TrashIcon()}
+										</button>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+
+		<!-- Order Summary -->
+		<div class="lg:col-span-1">
+			<div class="rounded-lg border bg-background p-6 sticky top-6 space-y-6">
+				<div>
+					<h2 class="text-lg font-semibold mb-4">Order Summary</h2>
+
+					<div class="space-y-3 text-sm">
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Subtotal</span>
+							<span>${subtotal.toFixed(2)}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Shipping</span>
+							<span>{shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Tax</span>
+							<span>${tax.toFixed(2)}</span>
+						</div>
+					</div>
+
+					<div class="border-t mt-4 pt-4 flex justify-between font-semibold text-base">
+						<span>Total</span>
+						<span>${total.toFixed(2)}</span>
+					</div>
+				</div>
+
+				<div>
+					<label class="block text-sm font-medium mb-2">Promo code</label>
+					<input
+						type="text"
+						bind:value={promoCode}
+						placeholder="Enter code"
+						class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+					/>
+				</div>
+
+				<Button class="w-full">
+					Proceed to checkout
+				</Button>
+			</div>
+		</div>
+	</div>
+</div>

package/src/registry/blocks/cart/Cart02.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		isOpen?: boolean;
+		onClose?: () => void;
+	}
+
+	const { class: className, isOpen = true, onClose }: Props = $props();
+
+	interface CartItem {
+		id: number;
+		name: string;
+		price: number;
+		quantity: number;
+	}
+
+	let cartItems = $state<CartItem[]>([
+		{ id: 1, name: 'Wireless Headphones', price: 129.99, quantity: 1 },
+		{ id: 2, name: 'USB-C Cable', price: 19.99, quantity: 2 },
+		{ id: 3, name: 'Phone Case', price: 24.99, quantity: 1 }
+	]);
+
+	let subtotal = $derived(
+		cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
+	);
+
+	function removeItem(id: number) {
+		cartItems = cartItems.filter((item) => item.id !== id);
+	}
+
+	function XIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+	}
+
+	function TrashIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="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"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>`;
+	}
+</script>
+
+{#if isOpen}
+	<!-- Backdrop -->
+	<div
+		class="fixed inset-0 bg-black/50 z-40"
+		role="presentation"
+		onclick={onClose}
+	></div>
+
+	<!-- Slide-over Panel -->
+	<div class={cn('fixed right-0 top-0 bottom-0 w-full max-w-sm bg-white shadow-xl z-50 flex flex-col', className)}>
+		<!-- Header -->
+		<div class="flex items-center justify-between border-b px-6 py-4">
+			<h2 class="text-lg font-semibold">Your cart ({cartItems.length})</h2>
+			<button
+				onclick={onClose}
+				class="p-2 hover:bg-gray-100 rounded transition"
+				aria-label="Close cart"
+			>
+				{@html XIcon()}
+			</button>
+		</div>
+
+		<!-- Items List -->
+		<div class="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+			{#each cartItems as item (item.id)}
+				<div class="flex gap-4 pb-4 border-b">
+					<div class="aspect-square w-16 h-16 bg-gray-100 rounded flex-shrink-0">
+					</div>
+					<div class="flex-1 min-w-0">
+						<p class="font-medium text-sm">{item.name}</p>
+						<p class="text-sm text-gray-600">Qty: {item.quantity}</p>
+						<p class="font-semibold text-sm mt-1">${(item.price * item.quantity).toFixed(2)}</p>
+					</div>
+					<button
+						onclick={() => removeItem(item.id)}
+						class="p-2 hover:bg-red-50 text-red-600 rounded transition flex-shrink-0"
+						aria-label="Remove item"
+					>
+						{@html TrashIcon()}
+					</button>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Footer -->
+		<div class="border-t px-6 py-4 space-y-4">
+			<div class="flex justify-between font-semibold text-base">
+				<span>Subtotal</span>
+				<span>${subtotal.toFixed(2)}</span>
+			</div>
+			<div class="grid grid-cols-2 gap-3">
+				<Button variant="outline" class="w-full">
+					View cart
+				</Button>
+				<Button class="w-full">
+					Checkout
+				</Button>
+			</div>
+		</div>
+	</div>
+{/if}

package/src/registry/blocks/cart/Cart03.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	const { class: className }: Props = $props();
+
+	function ShoppingBagIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>`;
+	}
+</script>
+
+<div class={cn('flex flex-col items-center justify-center min-h-screen bg-background', className)}>
+	<div class="text-center space-y-6 px-4">
+		<!-- Icon -->
+		<div class="flex justify-center text-muted-foreground">
+			{@html ShoppingBagIcon()}
+		</div>
+
+		<!-- Heading -->
+		<div>
+			<h1 class="text-3xl font-bold mb-2">Your cart is empty</h1>
+			<p class="text-muted-foreground text-lg">
+				Looks like you haven't added anything yet. Start shopping to fill your cart!
+			</p>
+		</div>
+
+		<!-- CTA Button -->
+		<div class="pt-4">
+			<Button size="lg">
+				Continue shopping
+			</Button>
+		</div>
+	</div>
+</div>