@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/empty-section/EmptySection03.svelte

@@ -0,0 +1,101 @@
+<!--
+  EmptySection03.svelte
+  Empty state: "Add members" title + description + email input + Send invite button
+  + scrollable list of suggested people (avatar + name + role + + button).
+  Flat and card variants.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface Person { name: string; role?: string; avatar?: string; }
+
+  let {
+    class: className = '',
+    variant = 'flat' as 'flat' | 'card',
+    title = 'Add members',
+    description = 'Add the first person to start creating your team.',
+    emailPlaceholder = 'Email',
+    inviteLabel = 'Send invite',
+    people = [
+      { name: 'Kurt Bates', role: 'Innovation Specialist' },
+      { name: 'Dennis Callis', role: 'Dennis Callis' },
+      { name: 'Frances Swann', role: 'UI/UX Designer' }
+    ] as Person[],
+    oninvite = (_email: string) => {},
+    onadd = (_name: string) => {}
+  }: {
+    class?: string;
+    variant?: 'flat' | 'card';
+    title?: string;
+    description?: string;
+    emailPlaceholder?: string;
+    inviteLabel?: string;
+    people?: Person[];
+    oninvite?: (email: string) => void;
+    onadd?: (name: string) => void;
+  } = $props();
+
+  let email = $state('');
+
+  function initials(n: string) {
+    return n.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+</script>
+
+<div
+  class={cn(
+    variant === 'card' && 'rounded-lg border bg-background p-4 sm:p-6',
+    className
+  )}
+>
+  <!-- Icon + title + description -->
+  <div class="flex flex-col items-center text-center">
+    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full border bg-muted">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+    </div>
+    <p class="font-semibold">{title}</p>
+    {#if description}
+      <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+    {/if}
+  </div>
+
+  <!-- Email input + invite -->
+  <div class="mt-4 flex gap-2">
+    <input
+      type="email"
+      placeholder={emailPlaceholder}
+      bind:value={email}
+      class="flex-1 rounded-md border bg-background px-3 py-1.5 text-sm outline-none focus:ring-2 focus:ring-ring"
+    />
+    <Button size="sm" onclick={() => { oninvite(email); email = ''; }}>{inviteLabel}</Button>
+  </div>
+
+  <!-- People list -->
+  {#if people.length}
+    <div class="mt-3 flex flex-col gap-1">
+      {#each people as person}
+        <div class="flex items-center gap-3 rounded-md border px-3 py-2">
+          <div class="h-8 w-8 shrink-0 overflow-hidden rounded-full">
+            {#if person.avatar}
+              <img src={person.avatar} alt={person.name} class="h-full w-full object-cover" />
+            {:else}
+              <div class="flex h-full w-full items-center justify-center bg-muted text-xs font-semibold">{initials(person.name)}</div>
+            {/if}
+          </div>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium truncate">{person.name}</p>
+            {#if person.role}<p class="text-xs text-muted-foreground truncate">{person.role}</p>{/if}
+          </div>
+          <button
+            type="button"
+            onclick={() => onadd(person.name)}
+            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-muted-foreground hover:bg-muted"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          </button>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/registry/blocks/empty-section/EmptySection04.svelte

@@ -0,0 +1,76 @@
+<!--
+  EmptySection04.svelte
+  Empty state: title + description + list of action items (avatar/icon + label + description + + button).
+  Flat and card variants.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface ActionItem { label: string; description?: string; icon?: string; onclick?: () => void; }
+
+  let {
+    class: className = '',
+    variant = 'flat' as 'flat' | 'card',
+    title = 'Projects',
+    description = 'Create your first project by selecting a template or starting from scratch.',
+    actions = [
+      { label: 'Create a list', description: 'Organize tasks into simple lists.' },
+      { label: 'Create a gallery', description: 'Plan events with clear schedules.' },
+      { label: 'Create a calendar', description: 'Plan events with clear schedules.' }
+    ] as ActionItem[]
+  }: {
+    class?: string;
+    variant?: 'flat' | 'card';
+    title?: string;
+    description?: string;
+    actions?: ActionItem[];
+  } = $props();
+</script>
+
+<div
+  class={cn(
+    variant === 'card' && 'rounded-lg border bg-background p-4 sm:p-6',
+    className
+  )}
+>
+  <h2 class="font-semibold">{title}</h2>
+  {#if description}
+    <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+  {/if}
+
+  <div class="mt-4 flex flex-col gap-2">
+    {#each actions as action}
+      <button
+        type="button"
+        onclick={action.onclick}
+        class="flex items-center gap-3 rounded-md border bg-background px-3 py-2.5 text-left transition-colors hover:bg-muted/50"
+      >
+        <!-- Avatar/icon -->
+        <div class="h-8 w-8 shrink-0 overflow-hidden rounded-full bg-muted">
+          {#if action.icon}
+            <img src={action.icon} alt="" class="h-full w-full object-cover" />
+          {:else}
+            <div class="flex h-full w-full items-center justify-center">
+              <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="text-muted-foreground"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+            </div>
+          {/if}
+        </div>
+
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium">{action.label}</p>
+          {#if action.description}
+            <p class="text-xs text-muted-foreground">{action.description}</p>
+          {/if}
+        </div>
+
+        <button
+          type="button"
+          onclick={(e) => { e.stopPropagation(); action.onclick?.(); }}
+          class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-muted-foreground hover:bg-muted"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        </button>
+      </button>
+    {/each}
+  </div>
+</div>

package/src/registry/blocks/empty-section/index.ts

@@ -0,0 +1,4 @@
+export { default as EmptySection01 } from './EmptySection01.svelte';
+export { default as EmptySection02 } from './EmptySection02.svelte';
+export { default as EmptySection03 } from './EmptySection03.svelte';
+export { default as EmptySection04 } from './EmptySection04.svelte';

package/src/registry/blocks/faq-section/FaqSection01.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface FaqItem {
+		question: string;
+		answer: string;
+		category?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		items?: FaqItem[];
+		eyebrow?: string;
+		onContact?: () => void;
+	}
+
+	const defaultFaqs: FaqItem[] = [
+		{
+			question: 'What is shadcn/ui?',
+			answer:
+				'Shadcn/ui is a popular, open-source UI component library for React that focuses on flexibility and customization. It provides a set of accessible, customizable components that you can use to build modern web applications.'
+		},
+		{
+			question: 'What is shadcn/ui kit for Figma?',
+			answer:
+				'The shadcn/ui kit for Figma is our comprehensive design kit that brings the shadcn/ui components into the Figma environment.'
+		},
+		{
+			question: "I'm not familiar with shadcn/ui. Can I still use this kit?",
+			answer:
+				'Absolutely! Our kit is intuitive and comes with documentation to help you get started, regardless of your familiarity with Figma or shadcn/ui.'
+		},
+		{
+			question: 'Can I create multi-brand design systems with this UI kit?',
+			answer:
+				'Yes! Our kit is designed with multi-brand support in mind. You can easily create and manage multiple styles for different brands within a single design system using Figma variables.'
+		},
+		{
+			question: 'How will this kit save me time?',
+			answer:
+				'By providing pre-built, customizable components and templates, you can skip the repetitive setup work and focus on the unique aspects of your design.'
+		},
+		{
+			question: 'How does this improve my collaboration with developers?',
+			answer:
+				'Our components are built to closely match the shadcn/ui library, significantly reducing misinterpretations and implementation errors.'
+		}
+	];
+
+	let { class: className, title = 'Frequently Asked Questions', description = 'Find answers to common questions.', items = defaultFaqs, eyebrow = 'FAQ Section', onContact }: Props = $props();
+
+	let openIndex: number | null = $state(0);
+
+	function toggle(index: number) {
+		openIndex = openIndex === index ? null : index;
+	}
+
+	function handleContact() {
+		onContact?.();
+	}
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl text-center">
+		<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+		<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+		<p class="mt-3 text-muted-foreground">
+			{description}
+			<a href="#" class="underline hover:text-foreground">Contact us.</a>
+		</p>
+	</div>
+
+	<div class="mt-8 mx-auto max-w-2xl">
+		<div class="flex flex-col divide-y border-t">
+			{#each items as item, index (item.question)}
+				<button
+					onclick={() => toggle(index)}
+					class="flex w-full items-center justify-between py-4 text-left text-sm font-medium hover:text-foreground transition-colors"
+				>
+					<span>{item.question}</span>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						class="flex-shrink-0 transition-transform duration-200 {openIndex === index ? 'rotate-180' : ''}"
+					>
+						<polyline points="6 9 12 15 18 9" />
+					</svg>
+				</button>
+				{#if openIndex === index}
+					<div class="pb-4 text-sm text-muted-foreground">
+						{item.answer}
+					</div>
+				{/if}
+			{/each}
+		</div>
+	</div>
+
+	<div class="mt-8 mx-auto max-w-2xl rounded-lg bg-muted p-6 text-center">
+		<h3 class="text-base font-semibold">Need more help?</h3>
+		<p class="mt-2 text-sm text-muted-foreground">
+			Can't find the answer you're looking for? Please contact our support team.
+		</p>
+		<div class="mt-4">
+			<Button onclick={handleContact}>Contact us</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/faq-section/FaqSection02.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FaqItem {
+		question: string;
+		answer: string;
+		category?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		items?: FaqItem[];
+		eyebrow?: string;
+	}
+
+	const defaultFaqs: FaqItem[] = [
+		{
+			question: 'What is shadcn/ui?',
+			answer:
+				'Shadcn/ui is a popular, open-source UI component library for React that focuses on flexibility and customization. It provides a set of accessible, customizable components that you can use to build modern web applications.'
+		},
+		{
+			question: 'What is shadcn/ui kit for Figma?',
+			answer:
+				'The shadcn/ui kit for Figma is our comprehensive design kit that brings the shadcn/ui components into the Figma environment.'
+		},
+		{
+			question: "I'm not familiar with shadcn/ui. Can I still use this kit?",
+			answer:
+				'Absolutely! Our kit is intuitive and comes with documentation to help you get started, regardless of your familiarity with Figma or shadcn/ui.'
+		},
+		{
+			question: 'Can I create multi-brand design systems with this UI kit?',
+			answer:
+				'Yes! Our kit is designed with multi-brand support in mind. You can easily create and manage multiple styles for different brands within a single design system using Figma variables.'
+		},
+		{
+			question: 'How will this kit save me time?',
+			answer:
+				'By providing pre-built, customizable components and templates, you can skip the repetitive setup work and focus on the unique aspects of your design.'
+		},
+		{
+			question: 'How does this improve my collaboration with developers?',
+			answer:
+				'Our components are built to closely match the shadcn/ui library, significantly reducing misinterpretations and implementation errors.'
+		}
+	];
+
+	let { class: className, title = 'FAQ', description = 'Get answers to your questions.', items = defaultFaqs, eyebrow = 'FAQ Section' }: Props = $props();
+
+	let openIndexLeft: number | null = $state(0);
+	let openIndexRight: number | null = $state(0);
+
+	function toggleLeft(index: number) {
+		openIndexLeft = openIndexLeft === index ? null : index;
+	}
+
+	function toggleRight(index: number) {
+		openIndexRight = openIndexRight === index ? null : index;
+	}
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div>
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+			<p class="mt-3 text-muted-foreground">{description}</p>
+		</div>
+
+		<div class="mt-8 grid grid-cols-1 gap-8 sm:grid-cols-2">
+			{#if items.length > 0}
+				<div>
+					<h3 class="text-base font-semibold">General</h3>
+					<div class="mt-4 flex flex-col divide-y border-t">
+						{#each items.slice(0, 4) as item, index (item.question)}
+							<button
+								onclick={() => toggleLeft(index)}
+								class="flex w-full items-center justify-between py-4 text-left text-sm font-medium hover:text-foreground transition-colors"
+							>
+								<span>{item.question}</span>
+								<svg
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									class="flex-shrink-0 transition-transform duration-200 {openIndexLeft === index ? 'rotate-180' : ''}"
+								>
+									<polyline points="6 9 12 15 18 9" />
+								</svg>
+							</button>
+							{#if openIndexLeft === index}
+								<div class="pb-4 text-sm text-muted-foreground">
+									{item.answer}
+								</div>
+							{/if}
+						{/each}
+					</div>
+				</div>
+
+				<div>
+					<h3 class="text-base font-semibold">Billing</h3>
+					<div class="mt-4 flex flex-col divide-y border-t">
+						{#each items.slice(0, 4) as item, index (item.question + '-billing')}
+							<button
+								onclick={() => toggleRight(index)}
+								class="flex w-full items-center justify-between py-4 text-left text-sm font-medium hover:text-foreground transition-colors"
+							>
+								<span>{item.question}</span>
+								<svg
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									class="flex-shrink-0 transition-transform duration-200 {openIndexRight === index ? 'rotate-180' : ''}"
+								>
+									<polyline points="6 9 12 15 18 9" />
+								</svg>
+							</button>
+							{#if openIndexRight === index}
+								<div class="pb-4 text-sm text-muted-foreground">
+									{item.answer}
+								</div>
+							{/if}
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/faq-section/FaqSection03.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface FaqItem {
+		question: string;
+		answer: string;
+		category?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		items?: FaqItem[];
+		eyebrow?: string;
+	}
+
+	const defaultFaqs: FaqItem[] = [
+		{
+			question: 'What is shadcn/ui?',
+			answer:
+				'Shadcn/ui is a popular, open-source UI component library for React that focuses on flexibility and customization. It provides a set of accessible, customizable components that you can use to build modern web applications.'
+		},
+		{
+			question: 'What is shadcn/ui kit for Figma?',
+			answer:
+				'The shadcn/ui kit for Figma is our comprehensive design kit that brings the shadcn/ui components into the Figma environment.'
+		},
+		{
+			question: "I'm not familiar with shadcn/ui. Can I still use this kit?",
+			answer:
+				'Absolutely! Our kit is intuitive and comes with documentation to help you get started, regardless of your familiarity with Figma or shadcn/ui.'
+		},
+		{
+			question: 'Can I create multi-brand design systems with this UI kit?',
+			answer:
+				'Yes! Our kit is designed with multi-brand support in mind. You can easily create and manage multiple styles for different brands within a single design system using Figma variables.'
+		},
+		{
+			question: 'How will this kit save me time?',
+			answer:
+				'By providing pre-built, customizable components and templates, you can skip the repetitive setup work and focus on the unique aspects of your design.'
+		},
+		{
+			question: 'How does this improve my collaboration with developers?',
+			answer:
+				'Our components are built to closely match the shadcn/ui library, significantly reducing misinterpretations and implementation errors.'
+		}
+	];
+
+	let { class: className, title = 'Frequently Asked Questions', description = 'Find answers to common questions.', items = defaultFaqs.slice(0, 6), eyebrow = 'FAQ Section' }: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-6 sm:gap-8">
+			<div class="flex-1">
+				<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+				<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+				<p class="mt-3 text-muted-foreground">{description}</p>
+			</div>
+
+			<div class="hidden sm:flex gap-2 flex-shrink-0">
+				<Button variant="ghost" size="sm" class="gap-1">
+					Contact us
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+						<polyline points="15 3 21 3 21 9" />
+						<line x1="10" y1="14" x2="21" y2="3" />
+					</svg>
+				</Button>
+				<Button variant="ghost" size="sm" class="gap-1">
+					View documentation
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+						<polyline points="15 3 21 3 21 9" />
+						<line x1="10" y1="14" x2="21" y2="3" />
+					</svg>
+				</Button>
+			</div>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-x-12 gap-y-8 sm:grid-cols-2">
+			{#each items as item (item.question)}
+				<div>
+					<h3 class="font-semibold text-sm">{item.question}</h3>
+					<p class="mt-2 text-sm text-muted-foreground">{item.answer}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/faq-section/FaqSection04.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FaqItem {
+		question: string;
+		answer: string;
+		category?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		items?: FaqItem[];
+		eyebrow?: string;
+	}
+
+	const defaultFaqs: FaqItem[] = [
+		{
+			question: 'What is shadcn/ui?',
+			answer:
+				'Shadcn/ui is a popular, open-source UI component library for React that focuses on flexibility and customization. It provides a set of accessible, customizable components that you can use to build modern web applications.'
+		},
+		{
+			question: 'What is shadcn/ui kit for Figma?',
+			answer:
+				'The shadcn/ui kit for Figma is our comprehensive design kit that brings the shadcn/ui components into the Figma environment.'
+		},
+		{
+			question: "I'm not familiar with shadcn/ui. Can I still use this kit?",
+			answer:
+				'Absolutely! Our kit is intuitive and comes with documentation to help you get started, regardless of your familiarity with Figma or shadcn/ui.'
+		},
+		{
+			question: 'Can I create multi-brand design systems with this UI kit?',
+			answer:
+				'Yes! Our kit is designed with multi-brand support in mind. You can easily create and manage multiple styles for different brands within a single design system using Figma variables.'
+		},
+		{
+			question: 'How will this kit save me time?',
+			answer:
+				'By providing pre-built, customizable components and templates, you can skip the repetitive setup work and focus on the unique aspects of your design.'
+		},
+		{
+			question: 'How does this improve my collaboration with developers?',
+			answer:
+				'Our components are built to closely match the shadcn/ui library, significantly reducing misinterpretations and implementation errors.'
+		}
+	];
+
+	let { class: className, title = 'Frequently Asked Questions', description = 'Find answers to your questions.', items = defaultFaqs, eyebrow = 'FAQ Section' }: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl text-center">
+		<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+		<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+		<p class="mt-3 text-muted-foreground">
+			{description}
+			<a href="#" class="underline hover:text-foreground">Contact us.</a>
+		</p>
+	</div>
+
+	<div class="mt-10 mx-auto max-w-4xl">
+		<div class="flex flex-col divide-y border-t">
+			{#each items as item (item.question)}
+				<div class="grid grid-cols-1 gap-4 py-6 sm:grid-cols-2">
+					<h3 class="font-semibold text-sm">{item.question}</h3>
+					<p class="text-sm text-muted-foreground">{item.answer}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>