@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/stats-counter/examples.ts

@@ -0,0 +1,61 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Light Background',
+    description: 'Stats counter with light background',
+    props: {
+      title: 'Trusted by Thousands',
+      content: 'Join a growing community of successful businesses',
+      backgroundColor: 'gray-50',
+      stats: [
+        {
+          value: '10,000+',
+          label: 'Active Users',
+          description: 'Growing daily',
+        },
+        {
+          value: '99.9%',
+          label: 'Uptime',
+          description: 'Reliable service',
+        },
+        {
+          value: '50M+',
+          label: 'API Requests',
+          description: 'Processed monthly',
+        },
+        {
+          value: '4.9/5',
+          label: 'Customer Rating',
+          description: 'From 2,000+ reviews',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Dark Background',
+    description: 'Stats counter with dark background',
+    props: {
+      title: 'The Numbers Speak',
+      content: 'Real results from real customers',
+      backgroundColor: 'gray-900',
+      stats: [
+        {
+          value: '$2.5M+',
+          label: 'Revenue Generated',
+          description: 'For our customers',
+        },
+        {
+          value: '150+',
+          label: 'Countries',
+          description: 'Worldwide reach',
+        },
+        {
+          value: '24/7',
+          label: 'Support',
+          description: 'Always available',
+        },
+      ],
+    },
+  },
+]

package/blocks/stats-counter/fields.ts

@@ -0,0 +1,134 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Stats Counter Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, content, cta (from base) + stats array
+ * - Design: backgroundColor (from base) + columns, variant, size
+ * - Advanced: className, id (from base)
+ */
+
+// Stats-specific content fields
+const statsContentFields: FieldDefinition[] = [
+  {
+    name: 'stats',
+    label: 'Statistics',
+    type: 'array',
+    tab: 'content',
+    required: true,
+    description: 'List of statistics to display',
+    helpText: 'Add up to 8 statistics with values and labels',
+    minItems: 1,
+    maxItems: 8,
+    itemFields: [
+      {
+        name: 'value',
+        label: 'Value',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: '10,000+',
+        helpText: 'The number or metric value (e.g., "10,000+", "99%", "$1M+")',
+      },
+      {
+        name: 'label',
+        label: 'Label',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'Happy Customers',
+        helpText: 'Description of the statistic',
+        maxLength: 100,
+      },
+      {
+        name: 'prefix',
+        label: 'Prefix',
+        type: 'text',
+        tab: 'content',
+        required: false,
+        placeholder: '$',
+        helpText: 'Optional prefix (e.g., "$", "+")',
+      },
+      {
+        name: 'suffix',
+        label: 'Suffix',
+        type: 'text',
+        tab: 'content',
+        required: false,
+        placeholder: '+',
+        helpText: 'Optional suffix (e.g., "%", "+", "K")',
+      },
+    ],
+  },
+]
+
+// Stats-specific design fields
+const statsDesignFields: FieldDefinition[] = [
+  {
+    name: 'columns',
+    label: 'Grid Columns',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: '4',
+    description: 'Number of columns in the grid layout',
+    options: [
+      { label: '2 Columns', value: '2' },
+      { label: '3 Columns', value: '3' },
+      { label: '4 Columns', value: '4' },
+    ],
+  },
+  {
+    name: 'variant',
+    label: 'Style Variant',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'default',
+    description: 'Visual style of the statistics',
+    options: [
+      { label: 'Default', value: 'default' },
+      { label: 'Cards (with background)', value: 'cards' },
+      { label: 'Minimal (text only)', value: 'minimal' },
+    ],
+  },
+  {
+    name: 'size',
+    label: 'Number Size',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'md',
+    description: 'Size of the statistic numbers',
+    options: [
+      { label: 'Small', value: 'sm' },
+      { label: 'Medium', value: 'md' },
+      { label: 'Large', value: 'lg' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + stats-specific
+  ...baseContentFields,
+  ...statsContentFields,
+
+  // Design tab: base fields + stats-specific
+  ...baseDesignFields,
+  ...statsDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/stats-counter/index.ts

@@ -0,0 +1,6 @@
+export { config } from './config'
+export { schema } from './schema'
+export { fields } from './fields'
+export { StatsCounterBlock as Component } from './component'
+
+export type { StatsCounterBlockProps } from './schema'

package/blocks/stats-counter/schema.ts

@@ -0,0 +1,47 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Stat Item Schema
+ * Individual statistic with value, label, and optional prefix/suffix
+ */
+const statItemSchema = z.object({
+  value: z.string().min(1, 'Value is required'),
+  label: z.string().min(1, 'Label is required').max(100),
+  prefix: z.string().optional(),
+  suffix: z.string().optional(),
+})
+
+export type StatItem = z.infer<typeof statItemSchema>
+
+/**
+ * Stats Counter Block Schema
+ *
+ * Extends base schema with:
+ * - stats: Array of statistics (value, label, prefix, suffix)
+ * - columns: Grid layout option (2, 3, 4 columns)
+ * - variant: Visual style (default, cards, minimal)
+ * - size: Number size (sm, md, lg)
+ *
+ * Note: Uses base schema title, content, cta, backgroundColor, className, id
+ * The `title` field serves as optional section title
+ * The `content` field serves as optional section description/subtitle
+ */
+export const statsCounterSpecificSchema = z.object({
+  // Content: array of stat items
+  stats: z.array(statItemSchema)
+    .min(1, 'At least one statistic is required')
+    .max(8, 'Maximum 8 statistics allowed'),
+
+  // Design: visual appearance
+  columns: z.enum(['2', '3', '4']).default('4'),
+  variant: z.enum(['default', 'cards', 'minimal']).default('default'),
+  size: z.enum(['sm', 'md', 'lg']).default('md'),
+})
+
+/**
+ * Complete Stats Counter Block Schema
+ */
+export const schema = baseBlockSchema.merge(statsCounterSpecificSchema)
+
+export type StatsCounterBlockProps = z.infer<typeof schema>

package/blocks/testimonials/component.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import { Quote } from 'lucide-react'
+import { Avatar, AvatarFallback, AvatarImage } from '@nextsparkjs/core/components/ui/avatar'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { TestimonialsBlockProps, TestimonialItem } from './schema'
+
+/**
+ * Testimonials Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta, items
+ * - Design: backgroundColor, columns
+ * - Advanced: className, id
+ */
+export function TestimonialsBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Testimonials-specific content
+  items,
+  // Base design props
+  backgroundColor = 'gray-50',
+  // Testimonials-specific design
+  columns = '3',
+  // Base advanced props
+  className,
+  id,
+}: TestimonialsBlockProps) {
+  // Build column classes based on columns prop
+  const columnClasses: Record<string, string> = {
+    '2': 'md:grid-cols-2',
+    '3': 'md:grid-cols-2 lg:grid-cols-3',
+  }
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 md:py-24',
+    { backgroundColor, className }
+  )
+
+  // Ensure items is always an array
+  const safeItems = Array.isArray(items) ? items : []
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.testimonials.container')}>
+      <div className="container mx-auto max-w-6xl">
+        {/* Section Header */}
+        {(title || content) && (
+          <div className="mb-12 text-center">
+            {title && (
+              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+                {title}
+              </h2>
+            )}
+            {content && (
+              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+                {content}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Testimonials Grid */}
+        <div className={cn('grid gap-8', columnClasses[columns] || columnClasses['3'])}>
+          {safeItems.map((item: TestimonialItem, index: number) => (
+            <div
+              key={index}
+              className="flex flex-col p-6 rounded-lg border bg-card"
+            >
+              <Quote className="h-8 w-8 text-primary mb-4" />
+
+              <blockquote className="mb-6 text-lg flex-grow">
+                "{item.quote}"
+              </blockquote>
+
+              <div className="flex items-center gap-3">
+                <Avatar>
+                  <AvatarImage src={item.avatar} alt={item.author} />
+                  <AvatarFallback>
+                    {item.author.split(' ').map((n: string) => n[0]).join('')}
+                  </AvatarFallback>
+                </Avatar>
+
+                <div>
+                  <div className="font-semibold">{item.author}</div>
+                  {item.role && (
+                    <div className="text-sm text-muted-foreground">{item.role}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Optional CTA */}
+        {cta && (
+          <div className="mt-12 text-center">
+            <a
+              href={cta.link}
+              target={cta.target}
+              rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              {cta.text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/blocks/testimonials/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'testimonials',
+  name: 'Testimonials',
+  description: 'Display customer testimonials with quotes, authors, and avatars',
+  category: 'testimonials',
+  icon: 'Quote',
+  thumbnail: '/theme/blocks/testimonials/thumbnail.png',
+  scope: ['pages']
+}

package/blocks/testimonials/examples.ts

@@ -0,0 +1,65 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Grid',
+    description: 'Testimonials in grid layout',
+    props: {
+      title: 'What Our Customers Say',
+      content: 'Hear from teams who transformed their workflow',
+      backgroundColor: 'white',
+      layout: 'grid',
+      showImages: true,
+      testimonials: [
+        {
+          quote: 'This platform completely changed how we work. The automation features alone save us 10+ hours per week.',
+          author: 'Sarah Johnson',
+          role: 'VP of Operations',
+          company: 'TechCorp',
+          image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400',
+        },
+        {
+          quote: 'Best investment we made this year. The ROI was clear within the first month of use.',
+          author: 'Michael Chen',
+          role: 'CTO',
+          company: 'StartupXYZ',
+          image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400',
+        },
+        {
+          quote: 'The support team is incredible. They helped us migrate all our data seamlessly.',
+          author: 'Emily Rodriguez',
+          role: 'Product Manager',
+          company: 'InnovateLabs',
+          image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Carousel',
+    description: 'Testimonials in carousel format',
+    props: {
+      title: 'Customer Success Stories',
+      backgroundColor: 'gray-50',
+      layout: 'carousel',
+      showImages: true,
+      autoplay: true,
+      testimonials: [
+        {
+          quote: 'We tried several platforms before finding this one. It is exactly what we needed - powerful yet simple to use.',
+          author: 'David Park',
+          role: 'CEO',
+          company: 'GrowthCo',
+          image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400',
+        },
+        {
+          quote: 'The analytics dashboard gives us insights we never had before. Game changer for our team.',
+          author: 'Lisa Thompson',
+          role: 'Marketing Director',
+          company: 'BrandBuilder',
+          image: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=400',
+        },
+      ],
+    },
+  },
+]

package/blocks/testimonials/fields.ts

@@ -0,0 +1,105 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Testimonials Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, description, cta (from base) + items array
+ * - Design: backgroundColor (from base) + columns
+ * - Advanced: className, id (from base)
+ */
+
+// Testimonials-specific content fields
+const testimonialsContentFields: FieldDefinition[] = [
+  {
+    name: 'items',
+    label: 'Testimonials',
+    type: 'array',
+    tab: 'content',
+    required: true,
+    description: 'Customer testimonials to display',
+    helpText: 'Add up to 6 testimonials',
+    minItems: 1,
+    maxItems: 6,
+    itemFields: [
+      {
+        name: 'quote',
+        label: 'Quote',
+        type: 'textarea',
+        tab: 'content',
+        required: true,
+        placeholder: 'This product changed my life...',
+        maxLength: 500,
+        rows: 3,
+      },
+      {
+        name: 'author',
+        label: 'Author Name',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'John Doe',
+        maxLength: 100,
+      },
+      {
+        name: 'role',
+        label: 'Role/Title',
+        type: 'text',
+        tab: 'content',
+        required: false,
+        placeholder: 'CEO at Company',
+        maxLength: 100,
+      },
+      {
+        name: 'avatar',
+        label: 'Avatar Image',
+        type: 'image',
+        tab: 'content',
+        required: false,
+        description: 'Profile picture of the person',
+        helpText: 'Recommended size: 100x100px',
+      },
+    ],
+  },
+]
+
+// Testimonials-specific design fields
+const testimonialsDesignFields: FieldDefinition[] = [
+  {
+    name: 'columns',
+    label: 'Grid Columns',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: '3',
+    description: 'Number of columns in the grid layout',
+    options: [
+      { label: '2 Columns', value: '2' },
+      { label: '3 Columns', value: '3' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + testimonials-specific
+  ...baseContentFields,
+  ...testimonialsContentFields,
+
+  // Design tab: base fields + testimonials-specific
+  ...baseDesignFields,
+  ...testimonialsDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/testimonials/index.ts

@@ -0,0 +1,6 @@
+export { config } from './config'
+export { schema } from './schema'
+export { fields } from './fields'
+export { TestimonialsBlock as Component } from './component'
+
+export type { TestimonialsBlockProps } from './schema'

package/blocks/testimonials/schema.ts

@@ -0,0 +1,41 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Testimonial Item Schema
+ * Individual testimonial entry
+ */
+const testimonialItemSchema = z.object({
+  quote: z.string().min(1, 'Quote is required').max(500),
+  author: z.string().min(1, 'Author name is required').max(100),
+  role: z.string().max(100).optional(),
+  avatar: z.string().url('Must be a valid URL').optional(),
+})
+
+export type TestimonialItem = z.infer<typeof testimonialItemSchema>
+
+/**
+ * Testimonials Block Schema
+ *
+ * Extends base schema with:
+ * - items: Array of testimonial items
+ * - columns: Grid layout option (2, 3 columns)
+ *
+ * Note: Uses base schema title, description, cta, backgroundColor, className, id
+ */
+export const testimonialsSpecificSchema = z.object({
+  // Content: array of testimonials
+  items: z.array(testimonialItemSchema)
+    .min(1, 'At least one testimonial is required')
+    .max(6, 'Maximum 6 testimonials allowed'),
+
+  // Design: column layout
+  columns: z.enum(['2', '3']).default('3'),
+})
+
+/**
+ * Complete Testimonials Block Schema
+ */
+export const schema = baseBlockSchema.merge(testimonialsSpecificSchema)
+
+export type TestimonialsBlockProps = z.infer<typeof schema>

package/blocks/testimonials/thumbnail.png

@@ -0,0 +1 @@
+Placeholder