@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/atoms/statistic-card/StatisticCard.svelte

@@ -0,0 +1,53 @@
+<!--
+  src/lib/components/ui/statistic-card/StatisticCard.svelte
+  Metric display card for dashboards.
+
+  Usage:
+  <StatisticCard title="Total Revenue" value="$45,231.89" change="+20.1%" changeType="positive">
+    {#snippet icon()}<DollarIcon />{/snippet}
+  </StatisticCard>
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Card, CardHeader, CardContent, CardTitle } from '$lib/components/ui/card';
+  import type { Snippet } from 'svelte';
+
+  let {
+    title,
+    value,
+    change = '',
+    changeType = 'neutral',
+    class: className = '',
+    icon,
+    ...rest
+  }: {
+    title: string;
+    value: string;
+    change?: string;
+    changeType?: 'positive' | 'negative' | 'neutral';
+    class?: string;
+    icon?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+
+  const changeColors = {
+    positive: 'text-emerald-600',
+    negative: 'text-destructive',
+    neutral: 'text-muted-foreground'
+  };
+</script>
+
+<Card class={className} {...rest}>
+  <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+    <CardTitle class="text-sm font-medium text-muted-foreground">{title}</CardTitle>
+    {@render icon?.()}
+  </CardHeader>
+  <CardContent>
+    <div class="text-2xl font-bold">{value}</div>
+    {#if change}
+      <p class={cn('text-xs', changeColors[changeType])}>
+        {change}
+      </p>
+    {/if}
+  </CardContent>
+</Card>

package/src/registry/atoms/statistic-card/index.ts

@@ -0,0 +1 @@
+export { default as StatisticCard } from './StatisticCard.svelte';

package/src/registry/atoms/text-editor/TextEditor.svelte

@@ -0,0 +1,77 @@
+<!--
+  src/lib/components/ui/text-editor/TextEditor.svelte
+  Rich text area with toolbar snippet.
+
+  Usage:
+  <TextEditor bind:value state="default" placeholder="Write something...">
+    {#snippet toolbar()}
+      <Button variant="ghost" size="icon"><BoldIcon /></Button>
+    {/snippet}
+  </TextEditor>
+-->
+<script lang="ts">
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  const textEditorVariants = tv({
+    base: 'rounded-lg border bg-card text-card-foreground shadow-sm',
+    variants: {
+      state: {
+        default: '',
+        filled: '',
+        disabled: 'opacity-50 pointer-events-none'
+      }
+    },
+    defaultVariants: {
+      state: 'default'
+    }
+  });
+
+  type State = VariantProps<typeof textEditorVariants>['state'];
+
+  let {
+    value = $bindable(''),
+    state = 'default' as State,
+    placeholder = '',
+    class: className = '',
+    toolbar,
+    oninput,
+    onfocus,
+    onblur,
+    ...rest
+  }: {
+    value?: string;
+    state?: State;
+    placeholder?: string;
+    class?: string;
+    toolbar?: Snippet;
+    oninput?: (detail: { value: string }) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onblur?: (e: FocusEvent) => void;
+    [key: string]: unknown;
+  } = $props();
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement;
+    value = target.value;
+    oninput?.({ value });
+  }
+</script>
+
+<div class={cn(textEditorVariants({ state }), className)} {...rest}>
+  <div class="flex items-center gap-1 border-b px-3 py-2">
+    {#if toolbar}
+      {@render toolbar()}
+    {/if}
+  </div>
+  <textarea
+    class="w-full min-h-[120px] resize-y bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed"
+    {placeholder}
+    {value}
+    disabled={state === 'disabled'}
+    oninput={handleInput}
+    {onfocus}
+    {onblur}
+  />
+</div>

package/src/registry/atoms/text-editor/index.ts

@@ -0,0 +1 @@
+export { default as TextEditor } from './TextEditor.svelte';

package/src/registry/atoms/uploader/Uploader.svelte

@@ -0,0 +1,102 @@
+<!--
+  src/lib/components/ui/uploader/Uploader.svelte
+  File upload drop zone with drag and drop support.
+
+  Usage:
+  <Uploader accept="image/*" multiple onchange={handleFiles} />
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  let {
+    accept = '',
+    multiple = false,
+    disabled = false,
+    class: className = '',
+    icon,
+    children,
+    onchange,
+    ...rest
+  }: {
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    class?: string;
+    icon?: Snippet;
+    children?: Snippet;
+    onchange?: (files: FileList) => void;
+    [key: string]: unknown;
+  } = $props();
+
+  let dragging = $state(false);
+  let fileInput: HTMLInputElement | undefined = $state(undefined);
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (!disabled) dragging = true;
+  }
+
+  function handleDragLeave() {
+    dragging = false;
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    dragging = false;
+    if (disabled || !e.dataTransfer?.files.length) return;
+    onchange?.(e.dataTransfer.files);
+  }
+
+  function handleInputChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    if (target.files?.length) {
+      onchange?.(target.files);
+    }
+  }
+
+  function openFilePicker() {
+    if (!disabled) fileInput?.click();
+  }
+</script>
+
+<button
+  type="button"
+  class={cn(
+    'flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 text-center transition-colors',
+    dragging ? 'border-primary bg-primary/5' : 'border-muted-foreground/25 hover:border-muted-foreground/50',
+    disabled && 'opacity-50 pointer-events-none cursor-not-allowed',
+    className
+  )}
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+  onclick={openFilePicker}
+  {disabled}
+  {...rest}
+>
+  {#if icon}
+    {@render icon()}
+  {:else}
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+    </svg>
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    <span class="text-sm text-muted-foreground">
+      Upload a file or drag and drop
+    </span>
+  {/if}
+</button>
+
+<input
+  bind:this={fileInput}
+  type="file"
+  class="sr-only"
+  {accept}
+  {multiple}
+  {disabled}
+  onchange={handleInputChange}
+/>

package/src/registry/atoms/uploader/index.ts

@@ -0,0 +1 @@
+export { default as Uploader } from './Uploader.svelte';

package/src/registry/atoms/user-item/UserItem.svelte

@@ -0,0 +1,39 @@
+<!--
+  src/lib/components/ui/user-item/UserItem.svelte
+  Avatar + name + email row component.
+
+  Usage:
+  <UserItem name="John Doe" email="john@example.com" avatarSrc="/avatar.jpg">
+    {#snippet value()}$1,999.00{/snippet}
+  </UserItem>
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import Avatar from '$lib/components/ui/Avatar.svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    name,
+    email,
+    avatarSrc = undefined,
+    class: className = '',
+    value,
+    ...rest
+  }: {
+    name: string;
+    email: string;
+    avatarSrc?: string | undefined;
+    class?: string;
+    value?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+</script>
+
+<div class={cn('flex items-center gap-3', className)} {...rest}>
+  <Avatar src={avatarSrc} alt={name} fallback={name} size="lg" />
+  <div class="flex-1 min-w-0">
+    <p class="text-sm font-medium text-foreground truncate">{name}</p>
+    <p class="text-sm text-muted-foreground truncate">{email}</p>
+  </div>
+  {@render value?.()}
+</div>

package/src/registry/atoms/user-item/index.ts

@@ -0,0 +1 @@
+export { default as UserItem } from './UserItem.svelte';

package/src/registry/blocks/account-section/AccountSection01.svelte

@@ -0,0 +1,112 @@
+<!--
+  AccountSection01.svelte
+  Account dashboard: left sidebar with avatar, name, email, nav links (Orders, Profile, Addresses, Payment, Wishlist, Sign out).
+  Right main: "Recent Orders" table (last 3) + "Account Summary" stats (Total orders, Wishlist items, Saved addresses).
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+
+  const user = {
+    name: 'Sarah Anderson',
+    email: 'sarah.anderson@example.com',
+    initials: 'SA'
+  };
+
+  const recentOrders = [
+    { id: '#12345', date: 'Mar 28, 2026', total: '$156.50', status: 'Delivered' },
+    { id: '#12321', date: 'Mar 15, 2026', total: '$89.99', status: 'Delivered' },
+    { id: '#12287', date: 'Mar 5, 2026', total: '$245.00', status: 'Delivered' }
+  ];
+
+  const stats = [
+    { label: 'Total Orders', value: '24' },
+    { label: 'Wishlist Items', value: '8' },
+    { label: 'Saved Addresses', value: '3' }
+  ];
+</script>
+
+<div class={cn('w-full bg-gray-50 py-8', className)}>
+  <div class="mx-auto max-w-7xl px-4">
+    <div class="grid grid-cols-1 gap-8 md:grid-cols-4">
+      <!-- Left sidebar -->
+      <div class="md:col-span-1">
+        <div class="rounded-lg bg-white p-6 shadow-sm">
+          <!-- Avatar and info -->
+          <div class="mb-6 flex items-center gap-4">
+            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-base font-bold text-white">{user.initials}</div>
+            <div>
+              <p class="font-medium text-gray-900">{user.name}</p>
+              <p class="text-sm text-gray-500">{user.email}</p>
+            </div>
+          </div>
+
+          <hr class="mb-6" />
+
+          <!-- Navigation -->
+          <nav class="space-y-1">
+            <a href="#" class="block rounded-md px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 hover:bg-blue-100">Orders</a>
+            <a href="#" class="block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
+            <a href="#" class="block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Addresses</a>
+            <a href="#" class="block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Payment Methods</a>
+            <a href="#" class="block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Wishlist</a>
+          </nav>
+
+          <hr class="my-6" />
+
+          <button type="button" class="w-full rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Sign out</button>
+        </div>
+      </div>
+
+      <!-- Right main content -->
+      <div class="md:col-span-3 space-y-6">
+        <!-- Account Summary Stats -->
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          {#each stats as stat}
+            <div class="rounded-lg bg-white p-6 shadow-sm">
+              <p class="text-sm text-gray-500">{stat.label}</p>
+              <p class="mt-2 text-3xl font-bold text-gray-900">{stat.value}</p>
+            </div>
+          {/each}
+        </div>
+
+        <!-- Recent Orders -->
+        <div class="rounded-lg bg-white p-6 shadow-sm">
+          <h2 class="mb-4 text-lg font-semibold text-gray-900">Recent Orders</h2>
+          <div class="overflow-x-auto">
+            <table class="w-full">
+              <thead>
+                <tr class="border-b border-gray-200">
+                  <th class="text-left text-sm font-medium text-gray-500 py-3">Order ID</th>
+                  <th class="text-left text-sm font-medium text-gray-500 py-3">Date</th>
+                  <th class="text-left text-sm font-medium text-gray-500 py-3">Total</th>
+                  <th class="text-left text-sm font-medium text-gray-500 py-3">Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {#each recentOrders as order}
+                  <tr class="border-b border-gray-100 hover:bg-gray-50">
+                    <td class="py-3 text-sm font-medium text-gray-900">{order.id}</td>
+                    <td class="py-3 text-sm text-gray-600">{order.date}</td>
+                    <td class="py-3 text-sm font-medium text-gray-900">{order.total}</td>
+                    <td class="py-3 text-sm">
+                      <span class="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
+                        {order.status}
+                      </span>
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+          <a href="#" class="mt-4 inline-block text-sm font-medium text-blue-600 hover:text-blue-700">View all orders</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/account-section/AccountSection02.svelte

@@ -0,0 +1,190 @@
+<!--
+  AccountSection02.svelte
+  Profile edit form: account sidebar (same as above, simplified).
+  Right: form sections: Personal Information (first/last name, email, phone),
+  Change Password, Communication Preferences checkboxes, Save button.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+
+  const user = {
+    name: 'Sarah Anderson',
+    email: 'sarah.anderson@example.com',
+    initials: 'SA'
+  };
+
+  let formData = $state({
+    firstName: 'Sarah',
+    lastName: 'Anderson',
+    email: 'sarah.anderson@example.com',
+    phone: '+1 (555) 123-4567',
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: '',
+    newsletter: true,
+    promotions: false,
+    notifications: true
+  });
+</script>
+
+<div class={cn('w-full bg-gray-50 py-8', className)}>
+  <div class="mx-auto max-w-7xl px-4">
+    <div class="grid grid-cols-1 gap-8 md:grid-cols-4">
+      <!-- Left sidebar -->
+      <div class="md:col-span-1">
+        <div class="rounded-lg bg-white p-6 shadow-sm">
+          <!-- Avatar and info -->
+          <div class="mb-6 flex items-center gap-4">
+            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-base font-bold text-white">{user.initials}</div>
+            <div>
+              <p class="font-medium text-gray-900">{user.name}</p>
+              <p class="text-sm text-gray-500">{user.email}</p>
+            </div>
+          </div>
+
+          <hr class="mb-6" />
+
+          <!-- Navigation -->
+          <nav class="space-y-1">
+            <a href="#" class="block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Orders</a>
+            <a href="#" class="block rounded-md px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 hover:bg-blue-100">Profile</a>
+            <a href="#" class="block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Addresses</a>
+            <a href="#" class="block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Payment Methods</a>
+            <a href="#" class="block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Wishlist</a>
+          </nav>
+
+          <hr class="my-6" />
+
+          <button type="button" class="w-full rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Sign out</button>
+        </div>
+      </div>
+
+      <!-- Right form content -->
+      <div class="md:col-span-3">
+        <div class="rounded-lg bg-white p-6 shadow-sm space-y-6">
+          <!-- Personal Information -->
+          <div>
+            <h2 class="mb-4 text-lg font-semibold text-gray-900">Personal Information</h2>
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
+                <input
+                  type="text"
+                  bind:value={formData.firstName}
+                  class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
+                <input
+                  type="text"
+                  bind:value={formData.lastName}
+                  class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+                />
+              </div>
+            </div>
+
+            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                <input
+                  type="email"
+                  bind:value={formData.email}
+                  class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
+                <input
+                  type="tel"
+                  bind:value={formData.phone}
+                  class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+                />
+              </div>
+            </div>
+          </div>
+
+          <hr />
+
+          <!-- Change Password -->
+          <div>
+            <h2 class="mb-4 text-lg font-semibold text-gray-900">Change Password</h2>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
+                <input
+                  type="password"
+                  bind:value={formData.currentPassword}
+                  class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+                />
+              </div>
+              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
+                  <input
+                    type="password"
+                    bind:value={formData.newPassword}
+                    class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
+                  <input
+                    type="password"
+                    bind:value={formData.confirmPassword}
+                    class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <hr />
+
+          <!-- Communication Preferences -->
+          <div>
+            <h2 class="mb-4 text-lg font-semibold text-gray-900">Communication Preferences</h2>
+            <div class="space-y-3">
+              <label class="flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  bind:checked={formData.newsletter}
+                  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                />
+                <span class="text-sm text-gray-700">Subscribe to newsletter</span>
+              </label>
+              <label class="flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  bind:checked={formData.promotions}
+                  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                />
+                <span class="text-sm text-gray-700">Promotional emails</span>
+              </label>
+              <label class="flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  bind:checked={formData.notifications}
+                  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                />
+                <span class="text-sm text-gray-700">Push notifications</span>
+              </label>
+            </div>
+          </div>
+
+          <!-- Save button -->
+          <div class="flex gap-3 pt-4">
+            <button type="button" class="rounded-lg bg-blue-600 px-6 py-2 text-sm font-medium text-white hover:bg-blue-700">Save Changes</button>
+            <button type="button" class="rounded-lg border border-gray-300 px-6 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>