@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/text-content/component.tsx

@@ -0,0 +1,97 @@
+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 { TextContentBlockProps } from './schema'
+
+/**
+ * Text Content Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content (rich-text), cta
+ * - Design: backgroundColor, maxWidth, alignment
+ * - Advanced: className, id
+ *
+ * Note: `content` is the main rich-text body of this block
+ */
+export function TextContentBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Base design props
+  backgroundColor,
+  // Text-content-specific design
+  maxWidth = 'lg',
+  alignment = 'left',
+  // Base advanced props
+  className,
+  id,
+}: TextContentBlockProps) {
+  const maxWidthClasses: Record<string, string> = {
+    sm: 'max-w-2xl',
+    md: 'max-w-3xl',
+    lg: 'max-w-4xl',
+    xl: 'max-w-5xl',
+    full: 'max-w-none',
+  }
+
+  const alignmentClasses: Record<string, string> = {
+    left: 'text-left',
+    center: 'text-center mx-auto',
+    right: 'text-right ml-auto',
+  }
+
+  // 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.textContent.container')}>
+      <div className="container mx-auto">
+        {/* Optional Section Title */}
+        {title && (
+          <div className={cn(
+            'mb-8',
+            maxWidthClasses[maxWidth],
+            alignmentClasses[alignment]
+          )}>
+            <h2 className="text-3xl font-bold md:text-4xl">
+              {title}
+            </h2>
+          </div>
+        )}
+
+        {/* Rich Text Content */}
+        <div
+          className={cn(
+            'prose prose-lg dark:prose-invert',
+            maxWidthClasses[maxWidth],
+            alignmentClasses[alignment]
+          )}
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+
+        {/* Optional CTA */}
+        {cta && (
+          <div className={cn(
+            'mt-8',
+            maxWidthClasses[maxWidth],
+            alignmentClasses[alignment]
+          )}>
+            <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/text-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: 'text-content',
+  name: 'Text Content',
+  description: 'Rich text content block for paragraphs, lists, and formatted text',
+  category: 'content',
+  icon: 'FileText',
+  thumbnail: '/theme/blocks/text-content/thumbnail.png',
+  scope: ['pages']
+}

package/blocks/text-content/examples.ts

@@ -0,0 +1,30 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Default',
+    description: 'Standard text content block',
+    props: {
+      title: 'About Our Platform',
+      content: `
+        <p>We built this platform with one goal in mind: to make professional-grade tools accessible to teams of all sizes. Whether you're a startup or an enterprise, you deserve software that works as hard as you do.</p>
+
+        <p>Our journey started in 2020 when we recognized a gap in the market for intuitive, powerful collaboration tools. Today, we serve thousands of teams across 150+ countries, helping them streamline their workflows and achieve more.</p>
+
+        <h3>Our Mission</h3>
+        <p>To empower teams with technology that amplifies their capabilities without adding complexity. We believe the best tools are the ones you don't have to think about - they just work.</p>
+
+        <h3>Core Values</h3>
+        <ul>
+          <li><strong>Simplicity:</strong> Complex problems deserve simple solutions</li>
+          <li><strong>Reliability:</strong> Your work depends on us, we take that seriously</li>
+          <li><strong>Innovation:</strong> Constantly evolving to meet your needs</li>
+          <li><strong>Support:</strong> Real people, real help, real time</li>
+        </ul>
+      `,
+      backgroundColor: 'white',
+      maxWidth: '4xl',
+      textAlign: 'left',
+    },
+  },
+]

package/blocks/text-content/fields.ts

@@ -0,0 +1,88 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Text Content Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, cta (from base) + content (rich-text, replaces base content)
+ * - Design: backgroundColor (from base) + maxWidth, alignment
+ * - Advanced: className, id (from base)
+ *
+ * Note: The `content` field is overridden with a rich-text version
+ */
+
+// Filter out base content field (we'll replace it with rich-text version)
+const baseContentFieldsWithoutContent = baseContentFields.filter(
+  (field) => field.name !== 'content'
+)
+
+// Text-content-specific content fields (rich-text content)
+const textContentFields: FieldDefinition[] = [
+  {
+    name: 'content',
+    label: 'Content',
+    type: 'rich-text',
+    tab: 'content',
+    required: true,
+    placeholder: 'Enter your content here...',
+    helpText: 'Rich text content with formatting support',
+  },
+]
+
+// Text-content-specific design fields
+const textDesignFields: FieldDefinition[] = [
+  {
+    name: 'maxWidth',
+    label: 'Maximum Width',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'lg',
+    helpText: 'Maximum content width',
+    options: [
+      { label: 'Small (640px)', value: 'sm' },
+      { label: 'Medium (768px)', value: 'md' },
+      { label: 'Large (1024px)', value: 'lg' },
+      { label: 'Extra Large (1280px)', value: 'xl' },
+      { label: 'Full Width', value: 'full' },
+    ],
+  },
+  {
+    name: 'alignment',
+    label: 'Text Alignment',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'left',
+    helpText: 'Text alignment within the content area',
+    options: [
+      { label: 'Left', value: 'left' },
+      { label: 'Center', value: 'center' },
+      { label: 'Right', value: 'right' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields (without content) + rich-text content
+  ...baseContentFieldsWithoutContent,
+  ...textContentFields,
+
+  // Design tab: base fields + text-specific
+  ...baseDesignFields,
+  ...textDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/text-content/index.ts

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

package/blocks/text-content/schema.ts

@@ -0,0 +1,30 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Text Content Block Schema
+ *
+ * Extends base schema with:
+ * - content: Rich text/HTML content (overrides base content with required)
+ * - maxWidth: Content width constraint
+ * - alignment: Text alignment
+ *
+ * Note: Uses base schema title, cta, backgroundColor, className, id
+ * The `content` field is overridden to be required and serves as rich-text body
+ */
+export const textContentSpecificSchema = z.object({
+  // Content: rich text body (overrides base optional content)
+  content: z.string().min(1, 'Content is required'),
+
+  // Design: layout options
+  maxWidth: z.enum(['sm', 'md', 'lg', 'xl', 'full']).default('lg'),
+  alignment: z.enum(['left', 'center', 'right']).default('left'),
+})
+
+/**
+ * Complete Text Content Block Schema
+ * Note: textContentSpecificSchema.content overrides baseBlockSchema.content
+ */
+export const schema = baseBlockSchema.merge(textContentSpecificSchema)
+
+export type TextContentBlockProps = z.infer<typeof schema>

package/blocks/text-content/thumbnail.png

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

package/blocks/timeline/component.tsx

@@ -0,0 +1,267 @@
+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 { TimelineBlockProps, TimelineItem } from './schema'
+
+/**
+ * Timeline Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, subtitle, items
+ * - Design: backgroundColor, layout, alternating, showConnector, variant
+ * - Advanced: className, id
+ */
+export function TimelineBlock({
+  // Base content props
+  title,
+  // Timeline-specific content
+  subtitle,
+  items,
+  // Base design props
+  backgroundColor,
+  // Timeline-specific design
+  layout = 'vertical',
+  alternating = true,
+  showConnector = true,
+  variant = 'default',
+  // Base advanced props
+  className,
+  id,
+}: TimelineBlockProps) {
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 md:py-24',
+    { backgroundColor, className }
+  )
+
+  // Safe items array
+  const safeItems = Array.isArray(items) ? items : []
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.timeline.container')}>
+      <div className="container mx-auto max-w-6xl">
+        {/* Section Header */}
+        {(title || subtitle) && (
+          <div className="mb-16 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>
+        )}
+
+        {/* Timeline */}
+        {layout === 'vertical' ? (
+          <VerticalTimeline
+            items={safeItems}
+            alternating={alternating}
+            showConnector={showConnector}
+            variant={variant}
+          />
+        ) : (
+          <HorizontalTimeline
+            items={safeItems}
+            showConnector={showConnector}
+            variant={variant}
+          />
+        )}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * Vertical Timeline Layout
+ */
+function VerticalTimeline({
+  items,
+  alternating,
+  showConnector,
+  variant,
+}: {
+  items: TimelineItem[]
+  alternating: boolean
+  showConnector: boolean
+  variant: 'default' | 'minimal' | 'cards'
+}) {
+  return (
+    <div className="relative">
+      {/* Connector Line */}
+      {showConnector && (
+        <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-border -translate-x-1/2 hidden md:block" />
+      )}
+      {showConnector && (
+        <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-border md:hidden" />
+      )}
+
+      {/* Timeline Items */}
+      <div className="space-y-12">
+        {items.map((item, index) => {
+          const isLeft = alternating && index % 2 === 0
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                'relative flex items-center gap-8',
+                alternating ? 'md:justify-center' : 'md:justify-start md:pl-[50%]',
+                'justify-start pl-16 md:pl-0'
+              )}
+            >
+              {/* Mobile/Left Content */}
+              <div className={cn(
+                'flex-1',
+                alternating && !isLeft && 'md:text-right md:order-1',
+                !alternating && 'md:pl-8'
+              )}>
+                <TimelineItemContent item={item} variant={variant} align={alternating && !isLeft ? 'right' : 'left'} />
+              </div>
+
+              {/* Center Dot */}
+              <div className="absolute left-8 md:left-1/2 md:-translate-x-1/2 flex-shrink-0">
+                <TimelineIcon item={item} />
+              </div>
+
+              {/* Desktop Spacer (for alternating layout) */}
+              {alternating && (
+                <div className="hidden md:block flex-1" />
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Horizontal Timeline Layout
+ * Note: Becomes vertical on mobile for better UX
+ */
+function HorizontalTimeline({
+  items,
+  showConnector,
+  variant,
+}: {
+  items: TimelineItem[]
+  showConnector: boolean
+  variant: 'default' | 'minimal' | 'cards'
+}) {
+  return (
+    <div className="relative">
+      {/* Mobile: Vertical Layout */}
+      <div className="md:hidden">
+        {showConnector && (
+          <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-border" />
+        )}
+        <div className="space-y-12">
+          {items.map((item, index) => (
+            <div key={index} className="relative pl-16">
+              <div className="absolute left-8 -translate-x-1/2">
+                <TimelineIcon item={item} />
+              </div>
+              <TimelineItemContent item={item} variant={variant} align="left" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Desktop: Horizontal Layout */}
+      <div className="hidden md:block overflow-x-auto pb-4">
+        <div className="relative min-w-max">
+          {/* Connector Line */}
+          {showConnector && (
+            <div className="absolute left-0 right-0 top-12 h-0.5 bg-border" />
+          )}
+
+          {/* Timeline Items */}
+          <div className="flex gap-8 pt-8">
+            {items.map((item, index) => (
+              <div key={index} className="relative flex flex-col items-center w-64 flex-shrink-0">
+                {/* Icon */}
+                <div className="relative z-10 mb-8">
+                  <TimelineIcon item={item} />
+                </div>
+
+                {/* Content */}
+                <TimelineItemContent item={item} variant={variant} align="center" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Timeline Icon Component
+ */
+function TimelineIcon({ item }: { item: TimelineItem }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const IconComponent = item.icon ? ((Icons as any)[item.icon] || Icons.Circle) : Icons.Circle
+
+  return (
+    <div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-primary-foreground border-4 border-background">
+      <IconComponent className="h-5 w-5" />
+    </div>
+  )
+}
+
+/**
+ * Timeline Item Content
+ */
+function TimelineItemContent({
+  item,
+  variant,
+  align,
+}: {
+  item: TimelineItem
+  variant: 'default' | 'minimal' | 'cards'
+  align: 'left' | 'right' | 'center'
+}) {
+  const alignClasses = {
+    left: 'text-left',
+    right: 'text-right',
+    center: 'text-center',
+  }
+
+  const contentClasses = cn(
+    alignClasses[align],
+    variant === 'cards' && 'p-6 rounded-lg border bg-card shadow-sm',
+    variant === 'default' && 'p-4 rounded-lg bg-muted/30',
+    variant === 'minimal' && 'p-2'
+  )
+
+  return (
+    <div className={contentClasses}>
+      {/* Date Badge */}
+      <div className={cn(
+        'inline-block mb-2 px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary',
+        align === 'center' && 'mx-auto'
+      )}>
+        {item.date}
+      </div>
+
+      {/* Title */}
+      <h3 className="text-xl font-semibold mb-2">
+        {item.title}
+      </h3>
+
+      {/* Description */}
+      {item.description && (
+        <p className="text-muted-foreground">
+          {item.description}
+        </p>
+      )}
+    </div>
+  )
+}

package/blocks/timeline/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'timeline',
+  name: 'Timeline',
+  description: 'A vertical or horizontal timeline showing chronological events, process steps, or history',
+  category: 'content',
+  icon: 'GitBranch',
+  thumbnail: '/theme/blocks/timeline/thumbnail.png',
+  scope: ['pages', 'posts']
+}

package/blocks/timeline/examples.ts

@@ -0,0 +1,68 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Vertical',
+    description: 'Vertical timeline layout',
+    props: {
+      title: 'Our Journey',
+      content: 'Key milestones in our growth story',
+      backgroundColor: 'white',
+      orientation: 'vertical',
+      events: [
+        {
+          date: '2020',
+          title: 'Company Founded',
+          description: 'Started with a vision to transform how teams collaborate',
+        },
+        {
+          date: '2021',
+          title: 'First 1,000 Users',
+          description: 'Reached our first major milestone and expanded our team',
+        },
+        {
+          date: '2022',
+          title: 'Series A Funding',
+          description: 'Secured $10M to accelerate product development',
+        },
+        {
+          date: '2023',
+          title: 'Global Expansion',
+          description: 'Opened offices in 5 countries and reached 10,000+ customers',
+        },
+        {
+          date: '2024',
+          title: 'Platform Launch',
+          description: 'Launched next-generation platform with AI-powered features',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Horizontal',
+    description: 'Horizontal timeline layout',
+    props: {
+      title: 'Product Roadmap',
+      content: 'What we are building next',
+      backgroundColor: 'gray-50',
+      orientation: 'horizontal',
+      events: [
+        {
+          date: 'Q1 2024',
+          title: 'Advanced Analytics',
+          description: 'New dashboard with predictive insights',
+        },
+        {
+          date: 'Q2 2024',
+          title: 'Mobile Apps',
+          description: 'Native iOS and Android applications',
+        },
+        {
+          date: 'Q3 2024',
+          title: 'API v2',
+          description: 'Enhanced API with GraphQL support',
+        },
+      ],
+    },
+  },
+]