Add shadcn components, renderers, TypeScript types, and comprehensive fumadocs documentation

docs/components/basic/button-group.mdx

@@ -0,0 +1,128 @@
+---
+title: "Button Group"
+description: "Group multiple buttons together with shared styling"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+The Button Group component groups multiple buttons together with consistent styling.
+
+## Basic Usage
+
+<ComponentDemo
+  schema={{
+    type: 'button-group',
+    buttons: [
+      { label: 'Left', value: 'left' },
+      { label: 'Center', value: 'center' },
+      { label: 'Right', value: 'right' }
+    ]
+  }}
+  title="Basic Button Group"
+/>
+
+## Variants
+
+<DemoGrid>
+  <ComponentDemo
+    schema={{
+      type: 'button-group',
+      variant: 'outline',
+      buttons: [
+        { label: 'Day', value: 'day' },
+        { label: 'Week', value: 'week' },
+        { label: 'Month', value: 'month' }
+      ]
+    }}
+    title="Outline Variant"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'button-group',
+      variant: 'default',
+      buttons: [
+        { label: 'Grid', value: 'grid', icon: 'grid' },
+        { label: 'List', value: 'list', icon: 'list' }
+      ]
+    }}
+    title="With Icons"
+  />
+</DemoGrid>
+
+## Selection Mode
+
+<DemoGrid>
+  <ComponentDemo
+    schema={{
+      type: 'button-group',
+      selectionMode: 'single',
+      value: 'option2',
+      buttons: [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3' }
+      ]
+    }}
+    title="Single Selection"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'button-group',
+      selectionMode: 'multiple',
+      value: ['bold', 'italic'],
+      buttons: [
+        { label: 'Bold', value: 'bold', icon: 'bold' },
+        { label: 'Italic', value: 'italic', icon: 'italic' },
+        { label: 'Underline', value: 'underline', icon: 'underline' }
+      ]
+    }}
+    title="Multiple Selection"
+  />
+</DemoGrid>
+
+## Schema
+
+```typescript
+interface ButtonGroupButton {
+  label?: string;
+  value: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+interface ButtonGroupSchema {
+  type: 'button-group';
+  buttons: ButtonGroupButton[];   // Button definitions
+  value?: string | string[];      // Selected value(s)
+  selectionMode?: 'single' | 'multiple' | 'none';
+  variant?: 'default' | 'outline' | 'ghost';
+  size?: 'sm' | 'default' | 'lg';
+
+  // Events
+  onValueChange?: string | ActionConfig;
+
+  // States
+  disabled?: boolean;
+
+  // Styling
+  className?: string;
+}
+```
+
+## Examples
+
+### Toolbar Actions
+
+<ComponentDemo
+  schema={{
+    type: 'button-group',
+    variant: 'outline',
+    size: 'sm',
+    buttons: [
+      { icon: 'copy', value: 'copy' },
+      { icon: 'scissors', value: 'cut' },
+      { icon: 'clipboard', value: 'paste' }
+    ]
+  }}
+  title="Icon Toolbar"
+/>

docs/components/basic/meta.json

@@ -5,6 +5,10 @@
     "icon",
     "image",
     "separator",
-    "html"
+    "html",
+    "button-group",
+    "pagination",
+    "navigation-menu",
+    "sidebar"
   ]
 }

docs/components/basic/navigation-menu.mdx

@@ -0,0 +1,88 @@
+---
+title: "Navigation Menu"
+description: "Accessible navigation menu with dropdown support"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+The Navigation Menu component provides an accessible menu for site navigation.
+
+## Basic Usage
+
+<ComponentDemo
+  schema={{
+    type: 'navigation-menu',
+    items: [
+      {
+        label: 'Home',
+        href: '/'
+      },
+      {
+        label: 'Products',
+        items: [
+          { label: 'All Products', href: '/products' },
+          { label: 'New Arrivals', href: '/products/new' },
+          { label: 'Best Sellers', href: '/products/popular' }
+        ]
+      },
+      {
+        label: 'About',
+        href: '/about'
+      },
+      {
+        label: 'Contact',
+        href: '/contact'
+      }
+    ]
+  }}
+  title="Site Navigation"
+/>
+
+## With Descriptions
+
+<ComponentDemo
+  schema={{
+    type: 'navigation-menu',
+    items: [
+      {
+        label: 'Getting Started',
+        items: [
+          {
+            label: 'Introduction',
+            description: 'Learn the basics',
+            href: '/docs/intro'
+          },
+          {
+            label: 'Installation',
+            description: 'Install the package',
+            href: '/docs/install'
+          },
+          {
+            label: 'Quick Start',
+            description: 'Build your first app',
+            href: '/docs/quick-start'
+          }
+        ]
+      }
+    ]
+  }}
+  title="Documentation Nav"
+/>
+
+## Schema
+
+```typescript
+interface NavigationMenuItem {
+  label: string;
+  href?: string;
+  description?: string;
+  icon?: string;
+  items?: NavigationMenuItem[];   // Submenu items
+}
+
+interface NavigationMenuSchema {
+  type: 'navigation-menu';
+  items: NavigationMenuItem[];    // Menu items
+  className?: string;
+}
+```

docs/components/basic/pagination.mdx

@@ -0,0 +1,50 @@
+---
+title: "Pagination"
+description: "Navigate through pages of content"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+The Pagination component allows users to navigate through pages of data.
+
+## Basic Usage
+
+<ComponentDemo
+  schema={{
+    type: 'pagination',
+    currentPage: 1,
+    totalPages: 10
+  }}
+  title="Basic Pagination"
+/>
+
+## With Page Size
+
+<ComponentDemo
+  schema={{
+    type: 'pagination',
+    currentPage: 3,
+    totalPages: 20,
+    pageSize: 10,
+    totalItems: 200
+  }}
+  title="With Item Count"
+/>
+
+## Schema
+
+```typescript
+interface PaginationSchema {
+  type: 'pagination';
+  currentPage: number;            // Current page (1-based)
+  totalPages: number;             // Total number of pages
+  pageSize?: number;              // Items per page
+  totalItems?: number;            // Total number of items
+
+  // Events
+  onPageChange?: string | ActionConfig;
+
+  // Styling
+  className?: string;
+}
+```

docs/components/basic/sidebar.mdx

@@ -0,0 +1,109 @@
+---
+title: "Sidebar"
+description: "Collapsible navigation sidebar"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+The Sidebar component provides a collapsible navigation sidebar for applications.
+
+## Basic Usage
+
+<ComponentDemo
+  schema={{
+    type: 'sidebar',
+    items: [
+      { label: 'Dashboard', icon: 'home', href: '/' },
+      { label: 'Projects', icon: 'folder', href: '/projects' },
+      { label: 'Team', icon: 'users', href: '/team' },
+      { label: 'Settings', icon: 'settings', href: '/settings' }
+    ]
+  }}
+  title="Basic Sidebar"
+/>
+
+## With Groups
+
+<ComponentDemo
+  schema={{
+    type: 'sidebar',
+    groups: [
+      {
+        title: 'Main',
+        items: [
+          { label: 'Dashboard', icon: 'home', href: '/' },
+          { label: 'Analytics', icon: 'bar-chart', href: '/analytics' }
+        ]
+      },
+      {
+        title: 'Management',
+        items: [
+          { label: 'Projects', icon: 'folder', href: '/projects' },
+          { label: 'Team', icon: 'users', href: '/team' }
+        ]
+      }
+    ]
+  }}
+  title="Grouped Sidebar"
+/>
+
+## Collapsible
+
+<ComponentDemo
+  schema={{
+    type: 'sidebar',
+    collapsible: true,
+    defaultCollapsed: false,
+    items: [
+      { label: 'Home', icon: 'home', href: '/' },
+      { label: 'Files', icon: 'folder', href: '/files' },
+      { label: 'Settings', icon: 'settings', href: '/settings' }
+    ]
+  }}
+  title="Collapsible Sidebar"
+/>
+
+## Schema
+
+```typescript
+interface SidebarItem {
+  label: string;
+  icon?: string;
+  href?: string;
+  active?: boolean;
+  badge?: string | number;
+}
+
+interface SidebarGroup {
+  title?: string;
+  items: SidebarItem[];
+}
+
+interface SidebarSchema {
+  type: 'sidebar';
+  items?: SidebarItem[];          // Flat list of items
+  groups?: SidebarGroup[];        // Grouped items
+  collapsible?: boolean;          // Allow collapse
+  defaultCollapsed?: boolean;     // Initial state
+
+  // Styling
+  className?: string;
+}
+```
+
+## Examples
+
+### With Badges
+
+<ComponentDemo
+  schema={{
+    type: 'sidebar',
+    items: [
+      { label: 'Inbox', icon: 'inbox', href: '/inbox', badge: 12 },
+      { label: 'Drafts', icon: 'file-text', href: '/drafts', badge: 3 },
+      { label: 'Sent', icon: 'send', href: '/sent' },
+      { label: 'Trash', icon: 'trash', href: '/trash' }
+    ]
+  }}
+  title="Sidebar with Badges"
+/>