@zoyth/simple-site-framework 1.0.0

package/docs/components/MultiStepForm.md

@@ -0,0 +1,48 @@
+# MultiStepForm
+
+Multi-step form wizard component.
+
+## Import
+
+```typescript
+import { MultiStepForm } from '@zoyth/simple-site-framework/client';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<MultiStepForm
+  steps={[
+    {
+      title: 'Personal Info',
+      fields: [
+        { name: 'name', type: 'text', label: 'Name', required: true },
+        { name: 'email', type: 'email', label: 'Email', required: true },
+      ],
+    },
+    {
+      title: 'Company Info',
+      fields: [
+        { name: 'company', type: 'text', label: 'Company' },
+      ],
+    },
+  ]}
+  onSubmit={handleSubmit}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `steps` | `FormStep[]` | Yes | Form steps |
+| `onSubmit` | `function` | Yes | Submit handler |
+| `showProgress` | `boolean` | No | Show progress indicator |
+| `className` | `string` | No | Custom classes |
+
+## See Also
+
+- [ContactForm](./forms/ContactForm.md)
+- [FormField](./forms/FormField.md)

package/docs/components/PolicyLayout.md

@@ -0,0 +1,55 @@
+# PolicyLayout
+
+Layout component for policy pages (Privacy, Terms, etc.).
+
+## Import
+
+```typescript
+import { PolicyLayout } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<PolicyLayout
+  title="Privacy Policy"
+  lastUpdated="January 15, 2024"
+>
+  <h2>Introduction</h2>
+  <p>This privacy policy...</p>
+</PolicyLayout>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `title` | `string \| LocalizedString` | Yes | Policy title |
+| `lastUpdated` | `string` | No | Last updated date |
+| `children` | `ReactNode` | Yes | Policy content |
+| `showTOC` | `boolean` | No | Show table of contents |
+| `className` | `string` | No | Custom classes |
+| `locale` | `string` | No | Current locale |
+
+## Examples
+
+```typescript
+// With TOC
+<PolicyLayout
+  title="Terms of Service"
+  lastUpdated="March 1, 2024"
+  showTOC
+>
+  <h2>1. Agreement</h2>
+  <p>...</p>
+  <h2>2. Usage</h2>
+  <p>...</p>
+</PolicyLayout>
+```
+
+## See Also
+
+- [TableOfContents](./TableOfContents.md)
+- [SEOMetaTags](./SEOMetaTags.md)

package/docs/components/PricingTable.md

@@ -0,0 +1,49 @@
+# PricingTable
+
+Pricing comparison table component.
+
+## Import
+
+```typescript
+import { PricingTable } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<PricingTable
+  plans={[
+    {
+      name: 'Basic',
+      price: '$9',
+      period: '/month',
+      features: ['Feature 1', 'Feature 2'],
+      cta: { text: 'Get Started', href: '/signup?plan=basic' },
+    },
+    {
+      name: 'Pro',
+      price: '$29',
+      period: '/month',
+      features: ['All Basic features', 'Feature 3', 'Feature 4'],
+      cta: { text: 'Get Started', href: '/signup?plan=pro' },
+      highlighted: true,
+    },
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `plans` | `PricingPlan[]` | Yes | Pricing plans |
+| `billingPeriod` | `'monthly' \| 'annual'` | No | Default billing period |
+| `className` | `string` | No | Custom classes |
+| `locale` | `string` | No | Current locale |
+
+## See Also
+
+- [CTASection](./sections/CTASection.md)
+- [Card](./ui/Card.md)

package/docs/components/Radio.md

@@ -0,0 +1,59 @@
+# Radio
+
+Radio button input component.
+
+## Import
+
+```typescript
+import { Radio } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<>
+  <Radio name="plan" value="basic" label="Basic Plan" />
+  <Radio name="plan" value="pro" label="Pro Plan" />
+  <Radio name="plan" value="enterprise" label="Enterprise Plan" />
+</>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `name` | `string` | Yes | Radio group name |
+| `value` | `string` | Yes | Radio value |
+| `label` | `string \| LocalizedString` | Yes | Radio label |
+| `checked` | `boolean` | No | Checked state |
+| `disabled` | `boolean` | No | Disable radio |
+| `onChange` | `function` | No | Change handler |
+| `className` | `string` | No | Custom classes |
+
+## Examples
+
+```typescript
+// Radio group
+<fieldset>
+  <legend>Select a plan</legend>
+  <Radio name="plan" value="basic" label="Basic - $9/month" />
+  <Radio name="plan" value="pro" label="Pro - $29/month" />
+  <Radio name="plan" value="enterprise" label="Enterprise - Custom" />
+</fieldset>
+
+// Controlled radio
+<Radio
+  name="option"
+  value="yes"
+  label="Yes"
+  checked={selected === 'yes'}
+  onChange={() => setSelected('yes')}
+/>
+```
+
+## See Also
+
+- [Checkbox](./Checkbox.md)
+- [FormField](./forms/FormField.md)

package/docs/components/SEOMetaTags.md

@@ -0,0 +1,58 @@
+# SEOMetaTags
+
+SEO meta tags component for page metadata.
+
+## Import
+
+```typescript
+import { SEOMetaTags } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<SEOMetaTags
+  title="Page Title"
+  description="Page description for search engines"
+  canonical="https://example.com/page"
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `title` | `string` | Yes | Page title |
+| `description` | `string` | Yes | Meta description |
+| `canonical` | `string` | No | Canonical URL |
+| `ogImage` | `string` | No | Open Graph image |
+| `ogType` | `string` | No | Open Graph type |
+| `noindex` | `boolean` | No | Prevent indexing |
+
+## Examples
+
+```typescript
+// Blog post
+<SEOMetaTags
+  title="How to Build Fast Websites"
+  description="Learn the best practices for building fast, performant websites"
+  canonical="https://example.com/blog/fast-websites"
+  ogImage="https://example.com/images/blog-og.jpg"
+  ogType="article"
+/>
+
+// No index
+<SEOMetaTags
+  title="Admin Dashboard"
+  description="Internal dashboard"
+  noindex
+/>
+```
+
+## See Also
+
+- [I18nMetaTags](./I18nMetaTags.md)
+- [StructuredData](./StructuredData.md)
+- [SEO Guide](../guides/seo-optimization.md)

package/docs/components/ScriptInjector.md

@@ -0,0 +1,50 @@
+# ScriptInjector
+
+Component for injecting third-party scripts.
+
+## Import
+
+```typescript
+import { ScriptInjector } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<ScriptInjector
+  src="https://example.com/script.js"
+  strategy="afterInteractive"
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `src` | `string` | Yes | Script URL |
+| `strategy` | `'beforeInteractive' \| 'afterInteractive' \| 'lazyOnload'` | No | Load strategy |
+| `onLoad` | `function` | No | Load callback |
+| `onError` | `function` | No | Error callback |
+
+## Examples
+
+```typescript
+// Analytics script
+<ScriptInjector
+  src="https://analytics.example.com/script.js"
+  strategy="afterInteractive"
+  onLoad={() => console.log('Analytics loaded')}
+/>
+
+// Chat widget
+<ScriptInjector
+  src="https://chat.example.com/widget.js"
+  strategy="lazyOnload"
+/>
+```
+
+## See Also
+
+- [AnalyticsTracker](./AnalyticsTracker.md)

package/docs/components/Select.md

@@ -0,0 +1,72 @@
+# Select
+
+Dropdown select input component.
+
+## Import
+
+```typescript
+import { Select } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<Select
+  name="country"
+  options={[
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'uk', label: 'United Kingdom' },
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `name` | `string` | Yes | Select name |
+| `options` | `SelectOption[]` | Yes | Select options |
+| `value` | `string` | No | Selected value |
+| `placeholder` | `string` | No | Placeholder text |
+| `disabled` | `boolean` | No | Disable select |
+| `required` | `boolean` | No | Required field |
+| `onChange` | `function` | No | Change handler |
+| `className` | `string` | No | Custom classes |
+
+### SelectOption
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `value` | `string` | Yes | Option value |
+| `label` | `string \| LocalizedString` | Yes | Option label |
+
+## Examples
+
+```typescript
+// With placeholder
+<Select
+  name="size"
+  placeholder="Select size"
+  options={[
+    { value: 'sm', label: 'Small' },
+    { value: 'md', label: 'Medium' },
+    { value: 'lg', label: 'Large' },
+  ]}
+/>
+
+// Controlled select
+<Select
+  name="category"
+  value={category}
+  options={categories}
+  onChange={(e) => setCategory(e.target.value)}
+/>
+```
+
+## See Also
+
+- [Input](./ui/Input.md)
+- [FormField](./forms/FormField.md)

package/docs/components/Skeleton.md

@@ -0,0 +1,47 @@
+# Skeleton
+
+Loading skeleton placeholder component.
+
+## Import
+
+```typescript
+import { Skeleton } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<Skeleton width="200px" height="20px" />
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `width` | `string \| number` | No | Skeleton width |
+| `height` | `string \| number` | No | Skeleton height |
+| `variant` | `'text' \| 'circular' \| 'rectangular'` | No | Shape variant |
+| `className` | `string` | No | Custom classes |
+
+## Examples
+
+```typescript
+// Text line
+<Skeleton variant="text" width="100%" />
+
+// Avatar
+<Skeleton variant="circular" width={40} height={40} />
+
+// Card placeholder
+<div>
+  <Skeleton width="100%" height="200px" />
+  <Skeleton variant="text" width="80%" className="mt-2" />
+  <Skeleton variant="text" width="60%" className="mt-2" />
+</div>
+```
+
+## See Also
+
+- [LoadingSpinner](./LoadingSpinner.md)

package/docs/components/StatsSection.md

@@ -0,0 +1,48 @@
+# StatsSection
+
+Statistics display section with animated counters.
+
+## Import
+
+```typescript
+import { StatsSection } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<StatsSection
+  heading="Our Impact"
+  stats={[
+    { value: '10,000+', label: 'Customers' },
+    { value: '99%', label: 'Satisfaction Rate' },
+    { value: '24/7', label: 'Support' },
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `heading` | `string \| LocalizedString` | No | Section heading |
+| `stats` | `Stat[]` | Yes | Statistics items |
+| `variant` | `'default' \| 'cards'` | No | Display variant |
+| `animated` | `boolean` | No | Animate counters |
+| `className` | `string` | No | Custom classes |
+| `locale` | `string` | No | Current locale |
+
+### Stat
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `value` | `string \| number` | Yes | Stat value |
+| `label` | `string \| LocalizedString` | Yes | Stat label |
+| `suffix` | `string` | No | Value suffix |
+
+## See Also
+
+- [AboutSection](./sections/AboutSection.md)
+- [AnimatedCounter](./AnimatedCounter.md)

package/docs/components/StickyBar.md

@@ -0,0 +1,62 @@
+# StickyBar
+
+Sticky banner/bar component (top or bottom).
+
+## Import
+
+```typescript
+import { StickyBar } from '@zoyth/simple-site-framework/client';
+```
+
+**Type:** Client Component
+
+## Basic Usage
+
+```typescript
+<StickyBar
+  position="top"
+  message="🎉 New feature released!"
+  cta={{
+    text: 'Learn More',
+    href: '/features/new'
+  }}
+  onDismiss={() => setShowBar(false)}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `message` | `string \| LocalizedString` | Yes | Bar message |
+| `position` | `'top' \| 'bottom'` | No | Position (default: 'top') |
+| `cta` | `CTAConfig` | No | Call-to-action |
+| `dismissible` | `boolean` | No | Show close button |
+| `onDismiss` | `function` | No | Dismiss handler |
+| `className` | `string` | No | Custom classes |
+| `locale` | `string` | No | Current locale |
+
+## Examples
+
+```typescript
+// Announcement bar
+<StickyBar
+  position="top"
+  message="Limited time offer - 50% off all plans!"
+  cta={{ text: 'Get Started', href: '/pricing' }}
+  dismissible
+/>
+
+// Cookie notice
+<StickyBar
+  position="bottom"
+  message="We use cookies to improve your experience."
+  cta={{ text: 'Learn More', href: '/privacy' }}
+  onDismiss={() => setCookieConsent(true)}
+/>
+```
+
+## See Also
+
+- [MobileCTA](./conversion/MobileCTA.md)
+- [Toast](./Toast.md)

package/docs/components/StructuredData.md

@@ -0,0 +1,99 @@
+# StructuredData
+
+JSON-LD structured data component for rich snippets.
+
+## Import
+
+```typescript
+import { StructuredData } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<StructuredData
+  type="Organization"
+  data={{
+    name: "Acme Corp",
+    url: "https://acme.com",
+    logo: "https://acme.com/logo.png",
+  }}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `type` | `string` | Yes | Schema.org type |
+| `data` | `object` | Yes | Structured data object |
+
+## Supported Types
+
+- `Organization`
+- `WebSite`
+- `Article`
+- `BreadcrumbList`
+- `FAQPage`
+- `Product`
+- `Review`
+
+## Examples
+
+```typescript
+// Organization
+<StructuredData
+  type="Organization"
+  data={{
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: "Acme Corporation",
+    url: "https://acme.com",
+    logo: "https://acme.com/logo.png",
+    sameAs: [
+      "https://twitter.com/acmecorp",
+      "https://linkedin.com/company/acmecorp"
+    ]
+  }}
+/>
+
+// Article
+<StructuredData
+  type="Article"
+  data={{
+    "@context": "https://schema.org",
+    "@type": "Article",
+    headline: "How to Build Fast Websites",
+    author: {
+      "@type": "Person",
+      name: "John Doe"
+    },
+    datePublished: "2024-01-15"
+  }}
+/>
+
+// FAQ
+<StructuredData
+  type="FAQPage"
+  data={{
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: faqs.map(faq => ({
+      "@type": "Question",
+      name: faq.question,
+      acceptedAnswer: {
+        "@type": "Answer",
+        text: faq.answer
+      }
+    }))
+  }}
+/>
+```
+
+## See Also
+
+- [SEOMetaTags](./SEOMetaTags.md)
+- [FAQAccordion](./FAQAccordion.md)
+- [SEO Guide](../guides/seo-optimization.md)

package/docs/components/StyleGuide.md

@@ -0,0 +1,46 @@
+# StyleGuide
+
+Component library style guide/showcase.
+
+## Import
+
+```typescript
+import { StyleGuide } from '@zoyth/simple-site-framework';
+```
+
+**Type:** Server Component
+
+## Basic Usage
+
+```typescript
+<StyleGuide
+  title="Design System"
+  sections={[
+    'colors',
+    'typography',
+    'buttons',
+    'forms',
+    'icons'
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `title` | `string` | No | Style guide title |
+| `sections` | `string[]` | No | Sections to display |
+| `className` | `string` | No | Custom classes |
+
+## Displays
+
+- Color palette
+- Typography scale
+- Component variants
+- Spacing system
+- Icon library
+
+## See Also
+
+- Internal development tool