@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/benefits/component.tsx

@@ -0,0 +1,100 @@
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { getBackgroundClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { BenefitsProps } from './schema'
+
+interface BenefitItem {
+  title: string
+  description?: string
+  borderColor?: string
+}
+
+export function BenefitsBlock({
+  sectionTitle,
+  sectionSubtitle,
+  benefits = [],
+  showColoredBorders = false,
+  columns = '3',
+  cardStyle = 'bordered',
+  backgroundColor,
+  className,
+  id,
+}: BenefitsProps) {
+  const bgClasses = getBackgroundClasses(backgroundColor)
+
+  const gridCols = {
+    '2': 'md:grid-cols-2',
+    '3': 'md:grid-cols-3',
+    '4': 'md:grid-cols-2 lg:grid-cols-4',
+  }
+
+  const cardStyles = {
+    minimal: '',
+    bordered: 'border border-border',
+    elevated: 'shadow-lg',
+  }
+
+  return (
+    <section
+      id={id}
+      className={cn(
+        'py-16 px-4',
+        bgClasses,
+        className
+      )}
+      data-cy={sel('blocks.benefits.container')}
+    >
+      <div className="max-w-7xl mx-auto">
+        {/* Section Header */}
+        {(sectionTitle || sectionSubtitle) && (
+          <div className="text-center mb-12">
+            {sectionTitle && (
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                {sectionTitle}
+              </h2>
+            )}
+            {sectionSubtitle && (
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                {sectionSubtitle}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Benefits Grid */}
+        <div className={cn(
+          'grid gap-6',
+          gridCols[columns as keyof typeof gridCols]
+        )}>
+          {(benefits as BenefitItem[]).map((benefit, index) => (
+            <div
+              key={index}
+              className={cn(
+                'bg-card rounded-lg p-6 transition-all hover:scale-[1.02]',
+                cardStyles[cardStyle as keyof typeof cardStyles],
+                showColoredBorders && 'border-t-4'
+              )}
+              style={showColoredBorders ? { borderTopColor: benefit.borderColor || '#3b82f6' } : undefined}
+            >
+              <h3 className="text-xl font-semibold mb-2">
+                {benefit.title}
+              </h3>
+              {benefit.description && (
+                <p className="text-muted-foreground">
+                  {benefit.description}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Empty state */}
+        {(!benefits || benefits.length === 0) && (
+          <div className="text-center py-12 text-muted-foreground">
+            <p>No benefits added yet. Add some benefits to display them here.</p>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/blocks/benefits/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'benefits',
+  name: 'Benefits Grid',
+  description: '3-column grid showcasing benefits with optional colored top borders',
+  category: 'features',
+  icon: 'LayoutGrid',
+  thumbnail: '/theme/blocks/benefits/thumbnail.png',
+  scope: ['pages']
+}

package/blocks/benefits/examples.ts

@@ -0,0 +1,85 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Bordered',
+    description: 'Benefits grid with bordered cards',
+    props: {
+      sectionTitle: 'Why Choose Our Platform',
+      sectionSubtitle: 'Everything you need to succeed, all in one place',
+      backgroundColor: 'white',
+      cardStyle: 'bordered',
+      showColoredBorders: true,
+      columns: '3',
+      benefits: [
+        {
+          title: 'Lightning Fast',
+          description: 'Optimized for performance with sub-second load times',
+          borderColor: '#3b82f6',
+        },
+        {
+          title: 'Secure by Default',
+          description: 'Enterprise-grade security with SOC 2 Type II compliance',
+          borderColor: '#10b981',
+        },
+        {
+          title: 'Scale Effortlessly',
+          description: 'From startup to enterprise, we grow with you',
+          borderColor: '#f59e0b',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Elevated',
+    description: 'Benefits grid with elevated cards',
+    props: {
+      sectionTitle: 'Built for Modern Teams',
+      sectionSubtitle: 'Collaboration tools that actually work',
+      backgroundColor: 'gray-50',
+      cardStyle: 'elevated',
+      showColoredBorders: false,
+      columns: '3',
+      benefits: [
+        {
+          title: 'Real-time Collaboration',
+          description: 'Work together seamlessly with live updates',
+          borderColor: '#3b82f6',
+        },
+        {
+          title: 'Smart Automation',
+          description: 'Automate repetitive tasks and focus on what matters',
+          borderColor: '#10b981',
+        },
+        {
+          title: 'Advanced Analytics',
+          description: 'Make data-driven decisions with powerful insights',
+          borderColor: '#8b5cf6',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Minimal',
+    description: 'Minimal benefits layout',
+    props: {
+      sectionTitle: 'Simple. Powerful. Effective.',
+      backgroundColor: 'white',
+      cardStyle: 'minimal',
+      showColoredBorders: false,
+      columns: '3',
+      benefits: [
+        {
+          title: 'Easy Setup',
+          description: 'Get started in minutes, not hours',
+          borderColor: '#3b82f6',
+        },
+        {
+          title: 'Intuitive Design',
+          description: 'No training required, just works',
+          borderColor: '#10b981',
+        },
+      ],
+    },
+  },
+]

package/blocks/benefits/fields.ts

@@ -0,0 +1,156 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+
+export const fieldDefinitions: FieldDefinition[] = [
+  // === CONTENT TAB ===
+  {
+    name: 'sectionTitle',
+    label: 'Section Title',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    placeholder: 'Why Choose Us',
+    helpText: 'Main heading for this section',
+  },
+  {
+    name: 'sectionSubtitle',
+    label: 'Section Subtitle',
+    type: 'textarea',
+    tab: 'content',
+    required: false,
+    placeholder: 'Discover the key benefits of working with us',
+    rows: 2,
+  },
+  {
+    name: 'benefits',
+    label: 'Benefits',
+    type: 'array',
+    tab: 'content',
+    required: true,
+    minItems: 1,
+    maxItems: 6,
+    helpText: 'Add up to 6 benefit cards',
+    itemFields: [
+      {
+        name: 'title',
+        label: 'Title',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'Benefit title',
+      },
+      {
+        name: 'description',
+        label: 'Description',
+        type: 'textarea',
+        tab: 'content',
+        required: false,
+        placeholder: 'Describe this benefit...',
+        rows: 3,
+      },
+      {
+        name: 'borderColor',
+        label: 'Border Color',
+        type: 'color',
+        tab: 'content',
+        required: false,
+        default: '#3b82f6',
+        helpText: 'Top border color (when enabled)',
+      },
+    ],
+  },
+
+  // === DESIGN TAB ===
+  {
+    name: 'showColoredBorders',
+    label: 'Enable Colored Borders',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: false,
+    checkboxLabel: 'Show colored top border on each card',
+    helpText: 'When enabled, each card displays a colored top border',
+  },
+  {
+    name: 'columns',
+    label: 'Number of Columns',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: '3',
+    options: [
+      { label: '2 Columns', value: '2' },
+      { label: '3 Columns', value: '3' },
+      { label: '4 Columns', value: '4' },
+    ],
+  },
+  {
+    name: 'cardStyle',
+    label: 'Card Style',
+    type: 'radio',
+    tab: 'design',
+    required: false,
+    default: 'bordered',
+    options: [
+      { label: 'Minimal', value: 'minimal' },
+      { label: 'Bordered', value: 'bordered' },
+      { label: 'Elevated (Shadow)', value: 'elevated' },
+    ],
+    helpText: 'Visual style for benefit cards',
+  },
+  {
+    name: 'backgroundColor',
+    label: 'Background Color',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'transparent',
+    options: [
+      { label: 'Transparent', value: 'transparent' },
+      { label: 'White', value: 'white' },
+      { label: 'Gray 50', value: 'gray-50' },
+      { label: 'Gray 100', value: 'gray-100' },
+    ],
+  },
+
+  // === ADVANCED TAB (Testing new field types) ===
+  {
+    name: 'publishDate',
+    label: 'Publish Date',
+    type: 'date',
+    tab: 'advanced',
+    required: false,
+    helpText: 'Date field example (date picker)',
+  },
+  {
+    name: 'eventTime',
+    label: 'Event Time',
+    type: 'time',
+    tab: 'advanced',
+    required: false,
+    helpText: 'Time field example (time picker)',
+  },
+  {
+    name: 'lastUpdated',
+    label: 'Last Updated',
+    type: 'datetime',
+    tab: 'advanced',
+    required: false,
+    helpText: 'Datetime field example (date + time)',
+  },
+  {
+    name: 'className',
+    label: 'CSS Class',
+    type: 'text',
+    tab: 'advanced',
+    required: false,
+    placeholder: 'my-custom-class',
+  },
+  {
+    name: 'id',
+    label: 'HTML ID',
+    type: 'text',
+    tab: 'advanced',
+    required: false,
+    placeholder: 'benefits-section',
+  },
+]

package/blocks/benefits/schema.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+const benefitItemSchema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().optional(),
+  borderColor: z.string().optional().default('#3b82f6'),
+})
+
+export const benefitsSchema = baseBlockSchema.extend({
+  // Content
+  sectionTitle: z.string().optional(),
+  sectionSubtitle: z.string().optional(),
+
+  // Benefits array
+  benefits: z.array(benefitItemSchema).min(1).max(6).default([
+    { title: 'Benefit 1', description: 'Description for benefit 1', borderColor: '#3b82f6' },
+    { title: 'Benefit 2', description: 'Description for benefit 2', borderColor: '#10b981' },
+    { title: 'Benefit 3', description: 'Description for benefit 3', borderColor: '#f59e0b' },
+  ]),
+
+  // Design options
+  showColoredBorders: z.boolean().default(false),
+  columns: z.enum(['2', '3', '4']).default('3'),
+
+  // Demo fields for testing new field types
+  publishDate: z.string().optional(),
+  eventTime: z.string().optional(),
+  lastUpdated: z.string().optional(),
+  cardStyle: z.enum(['minimal', 'bordered', 'elevated']).default('bordered'),
+})
+
+export type BenefitsProps = z.infer<typeof benefitsSchema>

package/blocks/cta-section/component.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { CTASectionBlockProps } from './schema'
+
+/**
+ * CTA Section Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta (primary), secondaryButton
+ * - Design: backgroundColor
+ * - Advanced: className, id
+ */
+export function CTASectionBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // CTA-specific content
+  secondaryButton,
+  // Base design props
+  backgroundColor,
+  // Base advanced props
+  className,
+  id,
+  // Legacy props for backward compatibility
+  ...legacyProps
+}: CTASectionBlockProps & {
+  buttonText?: string
+  buttonLink?: string
+  primaryButton?: { text: string; link: string; variant?: string }
+  description?: string
+}) {
+  // Handle legacy format (buttonText/buttonLink or primaryButton)
+  const primaryCta = cta || (legacyProps.primaryButton ? {
+    text: legacyProps.primaryButton.text,
+    link: legacyProps.primaryButton.link,
+    target: '_self' as const,
+  } : legacyProps.buttonText ? {
+    text: legacyProps.buttonText,
+    link: legacyProps.buttonLink || '#',
+    target: '_self' as const,
+  } : undefined)
+
+  // Handle legacy description prop
+  const displayContent = content || (legacyProps as { description?: string }).description
+
+  // 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.ctaSection.container')}>
+      <div className="container mx-auto max-w-4xl text-center">
+        {title && (
+          <h2 className="mb-4 text-4xl font-bold md:text-5xl">{title}</h2>
+        )}
+
+        {displayContent && (
+          <p className="mb-8 text-lg md:text-xl opacity-90">{displayContent}</p>
+        )}
+
+        {(primaryCta || secondaryButton) && (
+          <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
+            {primaryCta && (
+              <Button asChild size="lg">
+                <a
+                  href={primaryCta.link}
+                  target={primaryCta.target}
+                  rel={primaryCta.target === '_blank' ? 'noopener noreferrer' : undefined}
+                >
+                  {primaryCta.text}
+                </a>
+              </Button>
+            )}
+
+            {secondaryButton && (
+              <Button
+                asChild
+                size="lg"
+                variant={secondaryButton.variant || 'outline'}
+              >
+                <a
+                  href={secondaryButton.link}
+                  target={secondaryButton.target}
+                  rel={secondaryButton.target === '_blank' ? 'noopener noreferrer' : undefined}
+                >
+                  {secondaryButton.text}
+                </a>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/blocks/cta-section/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'cta-section',
+  name: 'CTA Section',
+  description: 'Call-to-action section with title, description, and action buttons',
+  category: 'cta',
+  icon: 'Megaphone',
+  thumbnail: '/theme/blocks/cta-section/thumbnail.png',
+  scope: ['pages']
+}

package/blocks/cta-section/examples.ts

@@ -0,0 +1,41 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Primary CTA',
+    description: 'Single primary call-to-action',
+    props: {
+      title: 'Ready to Get Started?',
+      content: 'Join thousands of teams already using our platform to accelerate their growth.',
+      primaryCta: {
+        text: 'Start Free Trial',
+        link: '/signup',
+        target: '_self',
+      },
+      backgroundColor: 'primary',
+      textColor: 'light',
+      alignment: 'center',
+    },
+  },
+  {
+    name: 'With Secondary CTA',
+    description: 'Primary and secondary CTAs',
+    props: {
+      title: 'Transform Your Workflow',
+      content: 'Experience the difference with our comprehensive suite of tools. No credit card required.',
+      primaryCta: {
+        text: 'Get Started Free',
+        link: '/signup',
+        target: '_self',
+      },
+      secondaryCta: {
+        text: 'Schedule Demo',
+        link: '/demo',
+        target: '_self',
+      },
+      backgroundColor: 'gray-900',
+      textColor: 'light',
+      alignment: 'center',
+    },
+  },
+]

package/blocks/cta-section/fields.ts

@@ -0,0 +1,89 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * CTA Section Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, description, cta (from base) + secondaryButton
+ * - Design: backgroundColor (from base)
+ * - Advanced: className, id (from base)
+ *
+ * Note: The base CTA fields serve as the primary button
+ */
+
+// CTA-specific content fields (secondary button) - grouped in UI
+const ctaContentFields: FieldDefinition[] = [
+  {
+    name: 'secondaryButton.text',
+    label: 'Text',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    placeholder: 'Learn More',
+    helpText: 'Button text',
+    group: 'secondaryButton',
+    groupLabel: 'Secondary Button',
+  },
+  {
+    name: 'secondaryButton.link',
+    label: 'Link',
+    type: 'url',
+    tab: 'content',
+    required: false,
+    placeholder: '/about or https://...',
+    helpText: 'URL the button links to',
+    group: 'secondaryButton',
+  },
+  {
+    name: 'secondaryButton.target',
+    label: 'Open in',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: '_self',
+    helpText: 'How the link opens',
+    group: 'secondaryButton',
+    options: [
+      { label: 'Same window', value: '_self' },
+      { label: 'New tab', value: '_blank' },
+    ],
+  },
+  {
+    name: 'secondaryButton.variant',
+    label: 'Style',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: 'outline',
+    helpText: 'Visual style of the button',
+    group: 'secondaryButton',
+    options: [
+      { label: 'Default', value: 'default' },
+      { label: 'Outline', value: 'outline' },
+      { label: 'Ghost', value: 'ghost' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + cta-specific
+  ...baseContentFields,
+  ...ctaContentFields,
+
+  // Design tab: base fields only
+  ...baseDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/cta-section/index.ts

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

package/blocks/cta-section/schema.ts

@@ -0,0 +1,32 @@
+import { z } from 'zod'
+import { baseBlockSchema, ctaSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Secondary Button Schema (CTA-specific)
+ * Uses same structure as CTA but with outline variant default
+ */
+const secondaryButtonSchema = ctaSchema.extend({
+  variant: z.enum(['default', 'outline', 'ghost']).default('outline'),
+})
+
+export type SecondaryButton = z.infer<typeof secondaryButtonSchema>
+
+/**
+ * CTA Section Block Schema
+ *
+ * Extends base schema with:
+ * - secondaryButton: Optional secondary CTA button
+ *
+ * Note: Uses base schema title, description, cta (as primary), backgroundColor, className, id
+ */
+export const ctaSectionSpecificSchema = z.object({
+  // Content: secondary button option
+  secondaryButton: secondaryButtonSchema.optional(),
+})
+
+/**
+ * Complete CTA Section Block Schema
+ */
+export const schema = baseBlockSchema.merge(ctaSectionSpecificSchema)
+
+export type CTASectionBlockProps = z.infer<typeof schema>

package/blocks/cta-section/thumbnail.png

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