@zoyth/simple-site-framework 1.0.0

package/docs/components/CodeBlock.md

@@ -0,0 +1,52 @@
+# CodeBlock
+
+Syntax-highlighted code display component.
+
+## Import
+
+```typescript
+import { CodeBlock } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<CodeBlock
+  code={`function hello() {\n  console.log('Hello, world!');\n}`}
+  language="javascript"
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `code` | `string` | Yes | Code content |
+| `language` | `string` | Yes | Programming language |
+| `showLineNumbers` | `boolean` | No | Show line numbers |
+| `highlight` | `number[]` | No | Lines to highlight |
+| `className` | `string` | No | Custom classes |
+
+## Examples
+
+```typescript
+// With line numbers
+<CodeBlock
+  code={codeString}
+  language="typescript"
+  showLineNumbers
+/>
+
+// Highlight specific lines
+<CodeBlock
+  code={codeString}
+  language="javascript"
+  highlight={[3, 4, 5]}
+/>
+```
+
+## See Also
+
+- [Documentation](../guides/documentation.md)

package/docs/components/ComparisonTable.md

@@ -0,0 +1,40 @@
+# ComparisonTable
+
+Feature comparison table component.
+
+## Import
+
+```typescript
+import { ComparisonTable } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<ComparisonTable
+  columns={[
+    { name: 'Feature', key: 'feature' },
+    { name: 'Basic', key: 'basic' },
+    { name: 'Pro', key: 'pro' },
+  ]}
+  rows={[
+    { feature: 'Users', basic: '10', pro: 'Unlimited' },
+    { feature: 'Storage', basic: '10GB', pro: '1TB' },
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `columns` | `Column[]` | Yes | Table columns |
+| `rows` | `object[]` | Yes | Table rows |
+| `highlightColumn` | `number` | No | Highlighted column index |
+| `className` | `string` | No | Custom classes |
+
+## See Also
+
+- [PricingTable](./PricingTable.md)

package/docs/components/ComponentDemo.md

@@ -0,0 +1,38 @@
+# ComponentDemo
+
+Component demonstration wrapper with code preview.
+
+## Import
+
+```typescript
+import { ComponentDemo } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<ComponentDemo
+  title="Button Examples"
+  code={`<Button variant="filled">Click Me</Button>`}
+>
+  <Button variant="filled">Click Me</Button>
+</ComponentDemo>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `title` | `string` | No | Demo title |
+| `code` | `string` | No | Code to display |
+| `children` | `ReactNode` | Yes | Component to demo |
+| `description` | `string` | No | Demo description |
+| `className` | `string` | No | Custom classes |
+
+## See Also
+
+- [CodeBlock](./CodeBlock.md)
+- [StyleGuide](./StyleGuide.md)
+- Internal development/documentation tool

package/docs/components/CountdownTimer.md

@@ -0,0 +1,51 @@
+# CountdownTimer
+
+Countdown timer component for time-limited offers.
+
+## Import
+
+```typescript
+import { CountdownTimer } from '@zoyth/simple-site-framework/client';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<CountdownTimer
+  targetDate="2024-12-31T23:59:59"
+  onComplete={() => console.log('Timer ended')}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `targetDate` | `string \| Date` | Yes | Target date/time |
+| `onComplete` | `function` | No | Completion handler |
+| `format` | `'dhms' \| 'hms'` | No | Display format |
+| `className` | `string` | No | Custom classes |
+
+## Examples
+
+```typescript
+// Days, hours, minutes, seconds
+<CountdownTimer
+  targetDate="2024-06-01T00:00:00"
+  format="dhms"
+/>
+
+// Hours, minutes, seconds only
+<CountdownTimer
+  targetDate={saleEndDate}
+  format="hms"
+  onComplete={() => setSaleEnded(true)}
+/>
+```
+
+## See Also
+
+- [CTASection](./sections/CTASection.md)
+- [AnimatedCounter](./AnimatedCounter.md)

package/docs/components/ExitIntentModal.md

@@ -0,0 +1,56 @@
+# ExitIntentModal
+
+Modal that appears when user intends to leave.
+
+## Import
+
+```typescript
+import { ExitIntentModal } from '@zoyth/simple-site-framework/client';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<ExitIntentModal
+  title="Wait! Don't Go Yet"
+  message="Get 20% off your first purchase"
+  cta={{
+    text: 'Claim Discount',
+    href: '/signup?discount=exit20'
+  }}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `title` | `string \| LocalizedString` | Yes | Modal title |
+| `message` | `string \| LocalizedString` | Yes | Modal message |
+| `cta` | `CTAConfig` | Yes | Call-to-action |
+| `delay` | `number` | No | Delay before showing (ms) |
+| `cooldown` | `number` | No | Cooldown period (ms) |
+| `className` | `string` | No | Custom classes |
+| `locale` | `string` | No | Current locale |
+
+## Examples
+
+```typescript
+// Newsletter signup
+<ExitIntentModal
+  title="Stay Updated"
+  message="Subscribe to our newsletter for tips and updates"
+  cta={{
+    text: 'Subscribe',
+    href: '/newsletter'
+  }}
+  delay={3000}
+/>
+```
+
+## See Also
+
+- [Modal](./ui/Modal.md)
+- [MobileCTA](./conversion/MobileCTA.md)

package/docs/components/FAQAccordion.md

@@ -0,0 +1,66 @@
+# FAQAccordion
+
+Frequently asked questions accordion component.
+
+## Import
+
+```typescript
+import { FAQAccordion } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<FAQAccordion
+  faqs={[
+    {
+      question: 'What is included in the free trial?',
+      answer: 'Full access to all features for 14 days.',
+    },
+    {
+      question: 'Can I cancel anytime?',
+      answer: 'Yes, cancel anytime with no penalties.',
+    },
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `faqs` | `FAQ[]` | Yes | FAQ items |
+| `allowMultiple` | `boolean` | No | Allow multiple open (default: false) |
+| `defaultOpen` | `number[]` | No | Initially open items |
+| `className` | `string` | No | Custom classes |
+| `locale` | `string` | No | Current locale |
+
+### FAQ
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `question` | `string \| LocalizedString` | Yes | Question text |
+| `answer` | `string \| LocalizedString` | Yes | Answer text |
+
+## Examples
+
+```typescript
+// Allow multiple open
+<FAQAccordion
+  faqs={faqs}
+  allowMultiple
+/>
+
+// Default open first item
+<FAQAccordion
+  faqs={faqs}
+  defaultOpen={[0]}
+/>
+```
+
+## See Also
+
+- [Modal](./ui/Modal.md)
+- [Tabs](./ui/Tabs.md)

package/docs/components/FeaturesGrid.md

@@ -0,0 +1,55 @@
+# FeaturesGrid
+
+Grid of features with icons and descriptions.
+
+## Import
+
+```typescript
+import { FeaturesGrid } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<FeaturesGrid
+  heading="Why Choose Us"
+  features={[
+    {
+      title: 'Fast Performance',
+      description: 'Lightning-fast load times',
+      icon: 'zap',
+    },
+    {
+      title: 'Secure',
+      description: 'Enterprise-grade security',
+      icon: 'shield',
+    },
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `heading` | `string \| LocalizedString` | Yes | Section heading |
+| `description` | `string \| LocalizedString` | No | Section description |
+| `features` | `Feature[]` | Yes | Feature items |
+| `columns` | `number` | No | Grid columns (default: 3) |
+| `className` | `string` | No | Custom classes |
+| `locale` | `string` | No | Current locale |
+
+### Feature
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `title` | `string \| LocalizedString` | Yes | Feature title |
+| `description` | `string \| LocalizedString` | Yes | Feature description |
+| `icon` | `string` | No | Icon name |
+
+## See Also
+
+- [Icon](./Icon.md)
+- [Card](./ui/Card.md)

package/docs/components/FileUpload.md

@@ -0,0 +1,54 @@
+# FileUpload
+
+File upload component with drag-and-drop.
+
+## Import
+
+```typescript
+import { FileUpload } from '@zoyth/simple-site-framework/client';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<FileUpload
+  onUpload={(files) => handleFiles(files)}
+  accept="image/*"
+  maxSize={5242880} // 5MB
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `onUpload` | `function` | Yes | Upload handler |
+| `accept` | `string` | No | Accepted file types |
+| `maxSize` | `number` | No | Max file size (bytes) |
+| `multiple` | `boolean` | No | Allow multiple files |
+| `disabled` | `boolean` | No | Disable upload |
+| `className` | `string` | No | Custom classes |
+
+## Examples
+
+```typescript
+// Image upload
+<FileUpload
+  onUpload={handleImages}
+  accept="image/png,image/jpeg"
+  maxSize={10485760} // 10MB
+/>
+
+// Multiple files
+<FileUpload
+  onUpload={handleFiles}
+  multiple
+  accept=".pdf,.doc,.docx"
+/>
+```
+
+## See Also
+
+- [FormField](./forms/FormField.md)

package/docs/components/I18nMetaTags.md

@@ -0,0 +1,55 @@
+# I18nMetaTags
+
+Internationalization meta tags (hreflang, alternates).
+
+## Import
+
+```typescript
+import { I18nMetaTags } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<I18nMetaTags
+  currentLocale="en"
+  pathname="/about"
+  baseUrl="https://example.com"
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `currentLocale` | `string` | Yes | Current locale |
+| `pathname` | `string` | Yes | Current pathname |
+| `baseUrl` | `string` | Yes | Site base URL |
+
+## Generated Tags
+
+Automatically generates:
+- Canonical URL
+- hreflang alternate links for all locales
+- x-default alternate link
+- og:locale meta tag
+- og:locale:alternate meta tags
+
+## Examples
+
+```typescript
+// Basic usage
+<I18nMetaTags
+  currentLocale={locale}
+  pathname="/pricing"
+  baseUrl="https://mysite.com"
+/>
+```
+
+## See Also
+
+- [SEOMetaTags](./SEOMetaTags.md)
+- [LanguageSelector](./layout/LanguageSelector.md)
+- [Internationalization Guide](../features/internationalization.md)

package/docs/components/Icon.md

@@ -0,0 +1,53 @@
+# Icon
+
+Icon component with built-in icons.
+
+## Import
+
+```typescript
+import { Icon } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<Icon name="check" size="md" />
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `name` | `IconName` | Yes | Icon name |
+| `size` | `'sm' \| 'md' \| 'lg'` | No | Icon size |
+| `className` | `string` | No | Custom classes |
+
+## Available Icons
+
+Common icons include: `check`, `x`, `arrow-right`, `arrow-left`, `menu`, `close`, `search`, `user`, `mail`, `phone`, `star`, `heart`, `zap`, `shield`, `code`, `mobile`, `chart`, `clock`, `users`, and more.
+
+## Examples
+
+```typescript
+// Basic icon
+<Icon name="check" />
+
+// Large icon
+<Icon name="star" size="lg" />
+
+// Custom color
+<Icon name="heart" className="text-red-500" />
+
+// In button
+<Button>
+  <Icon name="arrow-right" size="sm" className="mr-2" />
+  Continue
+</Button>
+```
+
+## See Also
+
+- [FeaturesGrid](./FeaturesGrid.md)
+- [Button](./ui/Button.md)

package/docs/components/LazySection.md

@@ -0,0 +1,46 @@
+# LazySection
+
+Lazy-load sections below the fold for better performance.
+
+## Import
+
+```typescript
+import { LazySection } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<LazySection>
+  <TestimonialSection {...props} />
+</LazySection>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `children` | `ReactNode` | Yes | Content to lazy-load |
+| `threshold` | `number` | No | Intersection threshold (default: 0.1) |
+| `rootMargin` | `string` | No | Root margin (default: '50px') |
+| `className` | `string` | No | Custom classes |
+
+## Examples
+
+```typescript
+// Lazy-load testimonials
+<LazySection>
+  <TestimonialSection testimonials={testimonials} />
+</LazySection>
+
+// Custom threshold
+<LazySection threshold={0.5}>
+  <HeavyComponent />
+</LazySection>
+```
+
+## See Also
+
+- [Performance Guide](../guides/performance.md)

package/docs/components/LiveProof.md

@@ -0,0 +1,53 @@
+# LiveProof
+
+Social proof notification system showing recent activity.
+
+## Import
+
+```typescript
+import { LiveProof } from '@zoyth/simple-site-framework/client';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<LiveProof
+  notifications={[
+    {
+      message: 'John from New York just signed up',
+      timestamp: Date.now() - 60000,
+    },
+    {
+      message: 'Sarah purchased Pro Plan',
+      timestamp: Date.now() - 120000,
+    },
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `notifications` | `Notification[]` | Yes | Notification items |
+| `interval` | `number` | No | Display interval (ms) |
+| `position` | `'bottom-left' \| 'bottom-right'` | No | Screen position |
+| `className` | `string` | No | Custom classes |
+
+## Examples
+
+```typescript
+// Custom position
+<LiveProof
+  notifications={notifications}
+  position="bottom-left"
+  interval={5000}
+/>
+```
+
+## See Also
+
+- [TestimonialSection](./sections/TestimonialSection.md)
+- [MobileCTA](./conversion/MobileCTA.md)

package/docs/components/LoadingSpinner.md

@@ -0,0 +1,46 @@
+# LoadingSpinner
+
+Loading spinner component.
+
+## Import
+
+```typescript
+import { LoadingSpinner } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<LoadingSpinner />
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `size` | `'sm' \| 'md' \| 'lg'` | No | Spinner size |
+| `color` | `string` | No | Spinner color |
+| `className` | `string` | No | Custom classes |
+
+## Examples
+
+```typescript
+// Large spinner
+<LoadingSpinner size="lg" />
+
+// Custom color
+<LoadingSpinner color="primary" />
+
+// In button
+<Button disabled>
+  <LoadingSpinner size="sm" className="mr-2" />
+  Loading...
+</Button>
+```
+
+## See Also
+
+- [Skeleton](./Skeleton.md)
+- [Button](./ui/Button.md)