@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/faq-accordion/component.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@nextsparkjs/core/components/ui/accordion'
+import type { FaqAccordionBlockProps, FaqItem } from './schema'
+
+/**
+ * FAQ Accordion Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, subtitle, items
+ * - Design: backgroundColor, allowMultiple, defaultOpenFirst, variant
+ * - Advanced: className, id
+ */
+export function FaqAccordionBlock({
+  // Base content props
+  title,
+  // FAQ-specific content
+  subtitle,
+  items,
+  // Base design props
+  backgroundColor,
+  // FAQ-specific design
+  allowMultiple = false,
+  defaultOpenFirst = true,
+  variant = 'default',
+  // Base advanced props
+  className,
+  id,
+}: FaqAccordionBlockProps) {
+  // Safe fallback for items array
+  const safeItems = items ?? []
+
+  // Determine default value for accordion
+  const defaultValue = defaultOpenFirst && safeItems.length > 0 ? 'item-0' : undefined
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 md:py-24',
+    { backgroundColor, className }
+  )
+
+  // Variant-specific classes for accordion container
+  const accordionContainerClasses = cn({
+    // Default: clean minimal style
+    'space-y-0': variant === 'default',
+    // Bordered: contained with border
+    'border rounded-lg overflow-hidden': variant === 'bordered',
+    // Separated: gaps between items
+    'space-y-4': variant === 'separated',
+  })
+
+  // Variant-specific classes for accordion items
+  const getItemClasses = () => {
+    if (variant === 'bordered') {
+      return cn(
+        'border-b last:border-b-0',
+        'px-6'
+      )
+    }
+    if (variant === 'separated') {
+      return 'border rounded-lg px-6 bg-card'
+    }
+    // Default variant
+    return ''
+  }
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.faqAccordion.container')}>
+      <div className="container mx-auto max-w-4xl">
+        {/* Section Header */}
+        {(title || subtitle) && (
+          <div className="mb-12 text-center">
+            {title && (
+              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+                {title}
+              </h2>
+            )}
+            {subtitle && (
+              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* FAQ Accordion - Render different types based on allowMultiple */}
+        {allowMultiple ? (
+          <Accordion
+            type="multiple"
+            className={accordionContainerClasses}
+          >
+            {safeItems.map((item: FaqItem, index: number) => (
+              <AccordionItem
+                key={index}
+                value={`item-${index}`}
+                className={getItemClasses()}
+                data-cy={sel('blocks.faqAccordion.item', { index: String(index) })}
+              >
+                <AccordionTrigger
+                  className="text-base font-semibold hover:no-underline"
+                  data-cy={sel('blocks.faqAccordion.question', { index: String(index) })}
+                >
+                  {item.question}
+                </AccordionTrigger>
+                <AccordionContent
+                  className="text-muted-foreground whitespace-pre-wrap"
+                  data-cy={sel('blocks.faqAccordion.answer', { index: String(index) })}
+                >
+                  {item.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        ) : (
+          <Accordion
+            type="single"
+            defaultValue={defaultValue}
+            collapsible
+            className={accordionContainerClasses}
+          >
+            {safeItems.map((item: FaqItem, index: number) => (
+              <AccordionItem
+                key={index}
+                value={`item-${index}`}
+                className={getItemClasses()}
+                data-cy={sel('blocks.faqAccordion.item', { index: String(index) })}
+              >
+                <AccordionTrigger
+                  className="text-base font-semibold hover:no-underline"
+                  data-cy={sel('blocks.faqAccordion.question', { index: String(index) })}
+                >
+                  {item.question}
+                </AccordionTrigger>
+                <AccordionContent
+                  className="text-muted-foreground whitespace-pre-wrap"
+                  data-cy={sel('blocks.faqAccordion.answer', { index: String(index) })}
+                >
+                  {item.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        )}
+      </div>
+    </section>
+  )
+}

package/blocks/faq-accordion/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'faq-accordion',
+  name: 'FAQ Accordion',
+  description: 'A frequently asked questions section with expandable/collapsible accordion items',
+  category: 'faq',
+  icon: 'HelpCircle',
+  thumbnail: '/theme/blocks/faq-accordion/thumbnail.png',
+  scope: ['pages']
+}

package/blocks/faq-accordion/examples.ts

@@ -0,0 +1,77 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Default',
+    description: 'Standard FAQ accordion',
+    props: {
+      title: 'Frequently Asked Questions',
+      subtitle: 'Find answers to common questions about our platform',
+      backgroundColor: 'white',
+      variant: 'default',
+      allowMultiple: false,
+      defaultOpenFirst: true,
+      items: [
+        {
+          question: 'How does the free trial work?',
+          answer: 'Start with our 14-day free trial with full access to all features. No credit card required. Cancel anytime.',
+        },
+        {
+          question: 'Can I upgrade or downgrade my plan?',
+          answer: 'Yes, you can change your plan at any time. Changes take effect immediately and we prorate billing automatically.',
+        },
+        {
+          question: 'What kind of support do you offer?',
+          answer: 'All plans include email support. Premium plans include priority support with 24/7 availability and dedicated account managers.',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Bordered',
+    description: 'FAQ with bordered cards',
+    props: {
+      title: 'Common Questions',
+      backgroundColor: 'gray-50',
+      variant: 'bordered',
+      allowMultiple: true,
+      defaultOpenFirst: true,
+      items: [
+        {
+          question: 'Is my data secure?',
+          answer: 'We use industry-standard encryption and are SOC 2 Type II certified. Your data is stored in secure, redundant data centers.',
+        },
+        {
+          question: 'Do you offer team pricing?',
+          answer: 'Yes, we have special pricing for teams of 10 or more. Contact our sales team for a custom quote.',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Separated',
+    description: 'FAQ with separated items',
+    props: {
+      title: 'Need Help?',
+      subtitle: 'Browse our most asked questions',
+      backgroundColor: 'white',
+      variant: 'separated',
+      allowMultiple: true,
+      defaultOpenFirst: false,
+      items: [
+        {
+          question: 'How do I get started?',
+          answer: 'Sign up for a free account, complete the onboarding wizard, and start inviting your team members.',
+        },
+        {
+          question: 'Can I import my existing data?',
+          answer: 'Yes, we support importing from CSV, Excel, and most major platforms. Our team can help with larger migrations.',
+        },
+        {
+          question: 'What payment methods do you accept?',
+          answer: 'We accept all major credit cards, PayPal, and wire transfers for annual plans.',
+        },
+      ],
+    },
+  },
+]

package/blocks/faq-accordion/fields.ts

@@ -0,0 +1,119 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * FAQ Accordion Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title (from base) + subtitle + items array
+ * - Design: backgroundColor (from base) + allowMultiple + defaultOpenFirst + variant
+ * - Advanced: className, id (from base)
+ */
+
+// FAQ-specific content fields
+const faqContentFields: FieldDefinition[] = [
+  {
+    name: 'subtitle',
+    label: 'Section Description',
+    type: 'textarea',
+    tab: 'content',
+    required: false,
+    placeholder: 'Find answers to commonly asked questions about our service...',
+    helpText: 'Optional description displayed below the title',
+    rows: 3,
+  },
+  {
+    name: 'items',
+    label: 'FAQ Items',
+    type: 'array',
+    tab: 'content',
+    required: true,
+    description: 'List of frequently asked questions and their answers',
+    helpText: 'Add up to 20 FAQ items',
+    minItems: 1,
+    maxItems: 20,
+    itemFields: [
+      {
+        name: 'question',
+        label: 'Question',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'What is your return policy?',
+        helpText: 'The question users are asking',
+        maxLength: 200,
+      },
+      {
+        name: 'answer',
+        label: 'Answer',
+        type: 'textarea',
+        tab: 'content',
+        required: true,
+        placeholder: 'Our return policy allows you to return items within 30 days...',
+        helpText: 'The answer to the question (supports basic formatting)',
+        maxLength: 1000,
+        rows: 4,
+      },
+    ],
+  },
+]
+
+// FAQ-specific design fields
+const faqDesignFields: FieldDefinition[] = [
+  {
+    name: 'allowMultiple',
+    label: 'Allow Multiple Open',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: false,
+    description: 'Allow multiple accordion items to be open at the same time',
+    helpText: 'When disabled, opening one item will close others',
+  },
+  {
+    name: 'defaultOpenFirst',
+    label: 'First Item Open by Default',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: true,
+    description: 'Automatically open the first FAQ item when the page loads',
+  },
+  {
+    name: 'variant',
+    label: 'Visual Style',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'default',
+    description: 'Choose the visual style variant for the accordion',
+    options: [
+      { label: 'Default', value: 'default' },
+      { label: 'Bordered', value: 'bordered' },
+      { label: 'Separated', value: 'separated' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + FAQ-specific
+  ...baseContentFields,
+  ...faqContentFields,
+
+  // Design tab: base fields + FAQ-specific
+  ...baseDesignFields,
+  ...faqDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/faq-accordion/index.ts

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

package/blocks/faq-accordion/schema.ts

@@ -0,0 +1,45 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * FAQ Item Schema
+ * Individual question-answer pair in the accordion
+ */
+const faqItemSchema = z.object({
+  question: z.string().min(1, 'Question is required').max(200),
+  answer: z.string().min(1, 'Answer is required').max(1000),
+})
+
+export type FaqItem = z.infer<typeof faqItemSchema>
+
+/**
+ * FAQ Accordion Block Schema
+ *
+ * Extends base schema with:
+ * - subtitle: Section description
+ * - items: Array of FAQ items (question, answer)
+ * - allowMultiple: Allow multiple items open at once
+ * - defaultOpenFirst: First item open by default
+ * - variant: Visual style variant
+ *
+ * Note: Uses base schema title, backgroundColor, className, id
+ */
+export const faqAccordionSpecificSchema = z.object({
+  // Content: subtitle and FAQ items
+  subtitle: z.string().optional(),
+  items: z.array(faqItemSchema)
+    .min(1, 'At least one FAQ item is required')
+    .max(20, 'Maximum 20 FAQ items allowed'),
+
+  // Design: accordion behavior and styling
+  allowMultiple: z.boolean().default(false),
+  defaultOpenFirst: z.boolean().default(true),
+  variant: z.enum(['default', 'bordered', 'separated']).default('default'),
+})
+
+/**
+ * Complete FAQ Accordion Block Schema
+ */
+export const schema = baseBlockSchema.merge(faqAccordionSpecificSchema)
+
+export type FaqAccordionBlockProps = z.infer<typeof schema>

package/blocks/features-grid/component.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import * as Icons from 'lucide-react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { FeaturesGridBlockProps, FeatureItem } from './schema'
+
+/**
+ * Features Grid Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta, items
+ * - Design: backgroundColor, columns
+ * - Advanced: className, id
+ */
+export function FeaturesGridBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Features-specific content
+  items,
+  // Base design props
+  backgroundColor,
+  // Features-specific design
+  columns = '3',
+  // Base advanced props
+  className,
+  id,
+  // Legacy props for backward compatibility
+  ...legacyProps
+}: FeaturesGridBlockProps & { features?: FeatureItem[]; description?: string }) {
+  // Handle legacy 'features' prop for backward compatibility
+  const safeItems = Array.isArray(items)
+    ? items
+    : Array.isArray((legacyProps as { features?: FeatureItem[] }).features)
+      ? (legacyProps as { features: FeatureItem[] }).features
+      : []
+
+  // Handle legacy description prop
+  const displayContent = content || (legacyProps as { description?: string }).description
+
+  // 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',
+  }
+
+  // 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.featuresGrid.container')}>
+      <div className="container mx-auto max-w-6xl">
+        {/* Section Header */}
+        {(title || displayContent) && (
+          <div className="mb-12 text-center">
+            {title && (
+              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+                {title}
+              </h2>
+            )}
+            {displayContent && (
+              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+                {displayContent}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Features Grid */}
+        <div className={cn('grid gap-8', columnClasses[columns] || columnClasses['3'])}>
+          {safeItems.map((item, index) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const IconComponent = (Icons as any)[item.icon] || Icons.Circle
+
+            return (
+              <div
+                key={index}
+                className="flex flex-col items-center text-center p-6 rounded-lg border bg-card"
+              >
+                <div className="mb-4 rounded-full bg-primary/10 p-4">
+                  <IconComponent className="h-8 w-8 text-primary" />
+                </div>
+                <h3 className="mb-2 text-xl font-semibold">{item.title}</h3>
+                <p className="text-muted-foreground">{item.description}</p>
+              </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/features-grid/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'features-grid',
+  name: 'Features Grid',
+  description: 'Grid layout displaying multiple features with icons, titles, and descriptions',
+  category: 'content',
+  icon: 'Grid',
+  thumbnail: '/theme/blocks/features-grid/thumbnail.png',
+  scope: ['pages']
+}

package/blocks/features-grid/examples.ts

@@ -0,0 +1,63 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: '3 Columns',
+    description: 'Feature grid with 3 columns',
+    props: {
+      title: 'Everything You Need',
+      content: 'Powerful features to help you build, launch, and grow your business',
+      backgroundColor: 'white',
+      columns: '3',
+      features: [
+        {
+          title: 'Team Collaboration',
+          description: 'Work together in real-time with your entire team',
+          icon: 'Users',
+        },
+        {
+          title: 'Advanced Analytics',
+          description: 'Track performance with detailed insights and reports',
+          icon: 'BarChart',
+        },
+        {
+          title: 'Automation',
+          description: 'Automate workflows and save hours every week',
+          icon: 'Zap',
+        },
+      ],
+    },
+  },
+  {
+    name: '4 Columns',
+    description: 'Feature grid with 4 columns',
+    props: {
+      title: 'Complete Feature Set',
+      content: 'All the tools you need in one platform',
+      backgroundColor: 'gray-50',
+      columns: '4',
+      features: [
+        {
+          title: 'Secure Storage',
+          description: 'Enterprise-grade encryption for all your files',
+          icon: 'Lock',
+        },
+        {
+          title: 'API Access',
+          description: 'Build custom integrations with our REST API',
+          icon: 'Code',
+        },
+        {
+          title: '24/7 Support',
+          description: 'Get help whenever you need it',
+          icon: 'MessageCircle',
+        },
+        {
+          title: 'Custom Domains',
+          description: 'Use your own domain for branding',
+          icon: 'Globe',
+        },
+      ],
+    },
+  },
+]