@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/pricing-table/schema.ts

@@ -0,0 +1,50 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Pricing Plan Item Schema
+ * Individual pricing plan in the table
+ */
+const planItemSchema = z.object({
+  name: z.string().min(1, 'Plan name is required').max(50),
+  price: z.string().min(1, 'Price is required').max(50),
+  period: z.string().max(50).optional(),
+  description: z.string().max(200).optional(),
+  features: z.string().optional(), // Newline-separated features
+  ctaText: z.string().max(50).optional(),
+  ctaUrl: z.string().optional(),
+  isPopular: z.boolean().default(false),
+  isDisabled: z.boolean().default(false),
+})
+
+export type PlanItem = z.infer<typeof planItemSchema>
+
+/**
+ * Pricing Table Block Schema
+ *
+ * Extends base schema with:
+ * - title: Section title (from base)
+ * - subtitle: Section description (from base content field)
+ * - plans: Array of pricing plans
+ * - columns: Grid layout option (2, 3, 4 columns)
+ * - highlightPopular: Whether to highlight popular plan
+ *
+ * Note: Uses base schema title, content, backgroundColor, className, id
+ */
+export const pricingTableSpecificSchema = z.object({
+  // Content: array of pricing plans
+  plans: z.array(planItemSchema)
+    .min(1, 'At least one plan is required')
+    .max(4, 'Maximum 4 plans allowed'),
+
+  // Design: column layout and highlighting
+  columns: z.enum(['2', '3', '4']).default('3'),
+  highlightPopular: z.boolean().default(true),
+})
+
+/**
+ * Complete Pricing Table Block Schema
+ */
+export const schema = baseBlockSchema.merge(pricingTableSpecificSchema)
+
+export type PricingTableBlockProps = z.infer<typeof schema>

package/blocks/split-content/component.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import Image from 'next/image'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Check } from 'lucide-react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { SplitContentBlockProps, BulletPoint } from './schema'
+
+/**
+ * Split Content Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: subtitle, title, content, image, imageAlt, bulletPoints, cta
+ * - Design: backgroundColor, imagePosition, imageStyle, verticalAlign
+ * - Advanced: className, id
+ */
+export function SplitContentBlock({
+  // Content props
+  subtitle,
+  title,
+  content,
+  image,
+  imageAlt,
+  bulletPoints,
+  cta,
+  // Design props
+  backgroundColor,
+  imagePosition = 'left',
+  imageStyle = 'rounded',
+  verticalAlign = 'center',
+  // Advanced props
+  className,
+  id,
+}: SplitContentBlockProps) {
+  // Safe fallback for bulletPoints array
+  const safeBulletPoints = bulletPoints ?? []
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 md:py-24',
+    { backgroundColor, className }
+  )
+
+  // Image style classes
+  const imageStyleClasses = {
+    square: '',
+    rounded: 'rounded-lg',
+    circle: 'rounded-full',
+  }
+
+  // Vertical alignment classes
+  const alignmentClasses = {
+    top: 'items-start',
+    center: 'items-center',
+    bottom: 'items-end',
+  }
+
+  // Grid order classes based on image position
+  const imageOrderClass = imagePosition === 'right' ? 'lg:order-2' : 'lg:order-1'
+  const contentOrderClass = imagePosition === 'right' ? 'lg:order-1' : 'lg:order-2'
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.splitContent.container')}>
+      <div className="container mx-auto max-w-7xl">
+        <div className={cn('grid gap-8 lg:grid-cols-2 lg:gap-12', alignmentClasses[verticalAlign as 'top' | 'center' | 'bottom'])}>
+          {/* Image Column */}
+          <div className={cn('relative', imageOrderClass)}>
+            <div className="relative aspect-[4/3] w-full overflow-hidden">
+              <Image
+                src={image}
+                alt={imageAlt || title || 'Split content image'}
+                fill
+                className={cn('object-cover', imageStyleClasses[imageStyle as 'square' | 'rounded' | 'circle'])}
+                sizes="(max-width: 768px) 100vw, 50vw"
+              />
+            </div>
+          </div>
+
+          {/* Content Column */}
+          <div className={cn('flex flex-col justify-center', contentOrderClass)}>
+            {subtitle && (
+              <p className="mb-2 text-sm font-medium uppercase tracking-wide text-primary">
+                {subtitle}
+              </p>
+            )}
+
+            {title && (
+              <h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
+                {title}
+              </h2>
+            )}
+
+            {content && (
+              <p className="mb-6 text-lg text-muted-foreground">
+                {content}
+              </p>
+            )}
+
+            {/* Bullet Points */}
+            {safeBulletPoints.length > 0 && (
+              <ul className="mb-6 space-y-3">
+                {safeBulletPoints.map((point: BulletPoint, index: number) => (
+                  <li key={index} className="flex items-start gap-3">
+                    <Check className="mt-1 h-5 w-5 flex-shrink-0 text-primary" />
+                    <span className="text-base">{point.text}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {/* CTA Button */}
+            {cta && cta.text && cta.link && (
+              <div className="mt-2">
+                <Button
+                  asChild
+                  size="lg"
+                  variant={cta.variant || 'default'}
+                >
+                  <a
+                    href={cta.link}
+                    target={cta.target}
+                    rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+                  >
+                    {cta.text}
+                  </a>
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/blocks/split-content/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'split-content',
+  name: 'Split Content',
+  description: 'A two-column section with image on one side and text content on the other, with option to reverse the order',
+  category: 'content',
+  icon: 'LayoutGrid',
+  thumbnail: '/theme/blocks/split-content/thumbnail.png',
+  scope: ['pages', 'posts']
+}

package/blocks/split-content/examples.ts

@@ -0,0 +1,38 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Image Left',
+    description: 'Split layout with image on left',
+    props: {
+      title: 'Built for Teams',
+      content: 'Collaborate seamlessly with powerful tools designed for modern workplaces. Share ideas, track progress, and achieve more together.',
+      imageUrl: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800',
+      imageAlt: 'Team collaboration',
+      imagePosition: 'left',
+      cta: {
+        text: 'Learn More',
+        link: '/features',
+        target: '_self',
+      },
+      backgroundColor: 'white',
+    },
+  },
+  {
+    name: 'Image Right',
+    description: 'Split layout with image on right',
+    props: {
+      title: 'Analytics That Matter',
+      content: 'Make data-driven decisions with comprehensive analytics and reporting. Gain insights into user behavior, track key metrics, and optimize your strategy.',
+      imageUrl: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800',
+      imageAlt: 'Analytics dashboard',
+      imagePosition: 'right',
+      cta: {
+        text: 'View Dashboard',
+        link: '/analytics',
+        target: '_self',
+      },
+      backgroundColor: 'gray-50',
+    },
+  },
+]

package/blocks/split-content/fields.ts

@@ -0,0 +1,198 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Split Content Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: subtitle, title, content, image, imageAlt, bulletPoints, cta
+ * - Design: backgroundColor (from base) + imagePosition, imageStyle, verticalAlign
+ * - Advanced: className, id (from base)
+ */
+
+// Split Content specific content fields
+const splitContentFields: FieldDefinition[] = [
+  {
+    name: 'subtitle',
+    label: 'Subtitle',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    placeholder: 'Eyebrow text',
+    helpText: 'Optional label or eyebrow text above the title',
+  },
+  {
+    name: 'title',
+    label: 'Title',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    placeholder: 'Main headline',
+    helpText: 'Main section headline',
+  },
+  {
+    name: 'content',
+    label: 'Content',
+    type: 'textarea',
+    tab: 'content',
+    required: false,
+    placeholder: 'Main description text...',
+    helpText: 'Main text content/description',
+    rows: 4,
+  },
+  {
+    name: 'image',
+    label: 'Image',
+    type: 'image',
+    tab: 'content',
+    required: true,
+    helpText: 'Featured image (recommended: 800x600px minimum)',
+  },
+  {
+    name: 'imageAlt',
+    label: 'Image Alt Text',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    placeholder: 'Describe the image',
+    helpText: 'Alternative text for accessibility',
+  },
+  {
+    name: 'bulletPoints',
+    label: 'Bullet Points',
+    type: 'array',
+    tab: 'content',
+    required: false,
+    description: 'Optional list of bullet points',
+    helpText: 'Add up to 10 bullet points',
+    maxItems: 10,
+    itemFields: [
+      {
+        name: 'text',
+        label: 'Bullet Point',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'Bullet point text',
+        maxLength: 200,
+      },
+    ],
+  },
+  {
+    name: 'cta',
+    label: 'Call to Action',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    description: 'Optional CTA button',
+    helpText: 'Configure button text, link, target, and variant',
+  },
+  {
+    name: 'cta.text',
+    label: 'CTA Text',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    placeholder: 'Get Started',
+  },
+  {
+    name: 'cta.link',
+    label: 'CTA Link',
+    type: 'url',
+    tab: 'content',
+    required: false,
+    placeholder: 'https://example.com or /path',
+  },
+  {
+    name: 'cta.target',
+    label: 'CTA Target',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: '_self',
+    options: [
+      { label: 'Same Window', value: '_self' },
+      { label: 'New Window', value: '_blank' },
+    ],
+  },
+  {
+    name: 'cta.variant',
+    label: 'CTA Variant',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: 'default',
+    helpText: 'Button style variant',
+    options: [
+      { label: 'Default', value: 'default' },
+      { label: 'Outline', value: 'outline' },
+      { label: 'Secondary', value: 'secondary' },
+    ],
+  },
+]
+
+// Split Content specific design fields
+const splitContentDesignFields: FieldDefinition[] = [
+  {
+    name: 'imagePosition',
+    label: 'Image Position',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'left',
+    description: 'Position of the image in the layout',
+    options: [
+      { label: 'Left', value: 'left' },
+      { label: 'Right', value: 'right' },
+    ],
+  },
+  {
+    name: 'imageStyle',
+    label: 'Image Style',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'rounded',
+    description: 'Image corner style',
+    options: [
+      { label: 'Square', value: 'square' },
+      { label: 'Rounded', value: 'rounded' },
+      { label: 'Circle', value: 'circle' },
+    ],
+  },
+  {
+    name: 'verticalAlign',
+    label: 'Vertical Alignment',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'center',
+    description: 'Vertical alignment of content',
+    options: [
+      { label: 'Top', value: 'top' },
+      { label: 'Center', value: 'center' },
+      { label: 'Bottom', value: 'bottom' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: split-content specific fields
+  ...splitContentFields,
+
+  // Design tab: base fields + split-content specific
+  ...baseDesignFields,
+  ...splitContentDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/split-content/index.ts

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

package/blocks/split-content/schema.ts

@@ -0,0 +1,67 @@
+import { z } from 'zod'
+import {
+  baseBlockSchema,
+  ctaSchema,
+  type BaseBlockProps,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Bullet Point Schema
+ * Individual bullet point item
+ */
+const bulletPointSchema = z.object({
+  text: z.string().min(1, 'Bullet point text is required').max(200),
+})
+
+export type BulletPoint = z.infer<typeof bulletPointSchema>
+
+/**
+ * CTA with Variant Schema
+ * Extends base CTA with variant option
+ */
+const ctaWithVariantSchema = ctaSchema.extend({
+  variant: z.enum(['default', 'outline', 'secondary']).default('default'),
+})
+
+export type CTAWithVariant = z.infer<typeof ctaWithVariantSchema>
+
+/**
+ * Split Content Block Schema
+ *
+ * Extends base schema with:
+ * - subtitle: Optional eyebrow/label above title
+ * - image: Featured image URL (required)
+ * - imageAlt: Image alt text for accessibility
+ * - cta: CTA button with variant option
+ * - bulletPoints: Optional list of bullet points
+ * - imagePosition: Image position (left/right)
+ * - imageStyle: Image corner style (square/rounded/circle)
+ * - verticalAlign: Vertical content alignment
+ *
+ * Note: Uses base schema title, content, backgroundColor, className, id
+ */
+export const splitContentSpecificSchema = z.object({
+  // Content fields
+  subtitle: z.string().optional(),
+  image: z.string().url('Must be a valid image URL').min(1, 'Image is required'),
+  imageAlt: z.string().optional(),
+  cta: ctaWithVariantSchema.optional(),
+  bulletPoints: z.array(bulletPointSchema).max(10, 'Maximum 10 bullet points allowed').optional(),
+
+  // Design fields
+  imagePosition: z.enum(['left', 'right']).default('left'),
+  imageStyle: z.enum(['square', 'rounded', 'circle']).default('rounded'),
+  verticalAlign: z.enum(['top', 'center', 'bottom']).default('center'),
+})
+
+/**
+ * Complete Split Content Block Schema
+ */
+export const schema = baseBlockSchema
+  .omit({ cta: true }) // Remove base cta
+  .merge(splitContentSpecificSchema)
+
+export type SplitContentBlockProps = z.infer<typeof schema>
+
+// Also export for type-only imports
+export type { BaseBlockProps }

package/blocks/stats-counter/component.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { StatsCounterBlockProps, StatItem } from './schema'
+
+/**
+ * Stats Counter Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta, stats
+ * - Design: backgroundColor, columns, variant, size
+ * - Advanced: className, id
+ */
+export function StatsCounterBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Stats-specific content
+  stats,
+  // Base design props
+  backgroundColor,
+  // Stats-specific design
+  columns = '4',
+  variant = 'default',
+  size = 'md',
+  // Base advanced props
+  className,
+  id,
+}: StatsCounterBlockProps) {
+  // Safely handle stats array
+  const safeStats = Array.isArray(stats) ? stats : []
+
+  // Build column classes based on columns prop
+  const columnClasses: Record<string, string> = {
+    '2': 'sm:grid-cols-2',
+    '3': 'sm:grid-cols-2 lg:grid-cols-3',
+    '4': 'sm:grid-cols-2 lg:grid-cols-4',
+  }
+
+  // Size classes for numbers
+  const sizeClasses: Record<string, string> = {
+    sm: 'text-3xl md:text-4xl',
+    md: 'text-4xl md:text-5xl',
+    lg: 'text-5xl md:text-6xl lg:text-7xl',
+  }
+
+  // Variant-specific stat item classes
+  const getStatItemClasses = () => {
+    const baseClasses = 'flex flex-col items-center text-center'
+
+    switch (variant) {
+      case 'cards':
+        return cn(baseClasses, 'p-6 rounded-lg border bg-card shadow-sm')
+      case 'minimal':
+        return cn(baseClasses, 'p-4')
+      default:
+        return cn(baseClasses, 'p-6')
+    }
+  }
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 md:py-24',
+    { backgroundColor, className }
+  )
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.statsCounter.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>
+        )}
+
+        {/* Stats Grid */}
+        <div className={cn('grid gap-8', columnClasses[columns] || columnClasses['4'])}>
+          {safeStats.map((stat: StatItem, index: number) => (
+            <div key={index} className={getStatItemClasses()}>
+              <div className={cn('font-bold mb-2', sizeClasses[size] || sizeClasses['md'])}>
+                {stat.prefix && (
+                  <span className="text-primary">{stat.prefix}</span>
+                )}
+                {stat.value}
+                {stat.suffix && (
+                  <span className="text-primary">{stat.suffix}</span>
+                )}
+              </div>
+              <div className="text-sm md:text-base text-muted-foreground font-medium">
+                {stat.label}
+              </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/stats-counter/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'stats-counter',
+  name: 'Stats Counter',
+  description: 'A section displaying key metrics/statistics with large numbers and labels (e.g., "10,000+ Customers", "99% Uptime")',
+  category: 'stats',
+  icon: 'TrendingUp',
+  thumbnail: '/theme/blocks/stats-counter/thumbnail.png',
+  scope: ['pages', 'posts']
+}