Implement UI components from @object-ui/types

packages/components/package.json

@@ -25,6 +25,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@object-ui/core": "workspace:*",
     "@object-ui/react": "workspace:*",
+    "@object-ui/types": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",

packages/components/src/renderers/basic/div.tsx

@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { DivSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('div', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: DivSchema; className?: string; [key: string]: any }) => (
     <div className={className} {...props}>
       {renderChildren(schema.body)}
     </div>

packages/components/src/renderers/basic/icon.tsx

@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { IconSchema } from '@object-ui/types';
 import { icons } from 'lucide-react';
 
 ComponentRegistry.register('icon',
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: IconSchema; className?: string; [key: string]: any }) => {
     const Icon = (icons as any)[schema.name || schema.icon];
     if (!Icon) return null;
     return <Icon className={className} {...props} />;

packages/components/src/renderers/basic/image.tsx

@@ -1,7 +1,8 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ImageSchema } from '@object-ui/types';
 
 ComponentRegistry.register('image',
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ImageSchema; className?: string; [key: string]: any }) => (
     <img
       src={schema.src}
       alt={schema.alt || ''}

packages/components/src/renderers/basic/separator.tsx

@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SeparatorSchema } from '@object-ui/types';
 import { Separator } from '@/ui';
 
 ComponentRegistry.register('separator', 
-  ({ className, ...props }) => (
-    <Separator className={className} {...props} />
+  ({ schema, className, ...props }: { schema: SeparatorSchema; className?: string; [key: string]: any }) => (
+    <Separator orientation={schema.orientation} className={className} {...props} />
   ),
   {
     label: 'Separator',

packages/components/src/renderers/basic/span.tsx

@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SpanSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('span', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: SpanSchema; className?: string; [key: string]: any }) => (
     <span className={className} {...props}>
       {renderChildren(schema.body)}
     </span>

packages/components/src/renderers/basic/text.tsx

@@ -1,7 +1,8 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TextSchema } from '@object-ui/types';
 
 ComponentRegistry.register('text', 
-  ({ schema }) => (
+  ({ schema }: { schema: TextSchema }) => (
     <>{schema.content}</>
   ),
   {

packages/components/src/renderers/complex/calendar-view.tsx

@@ -1,10 +1,11 @@
 import { ComponentRegistry } from '@object-ui/core';
-import { CalendarView, type CalendarEvent } from '@/ui';
+import type { CalendarViewSchema, CalendarEvent } from '@object-ui/types';
+import { CalendarView } from '@/ui';
 import React from 'react';
 
 // Calendar View Renderer - Airtable-style calendar for displaying records as events
 ComponentRegistry.register('calendar-view', 
-  ({ schema, className, onAction, ...props }) => {
+  ({ schema, className, onAction, ...props }: { schema: CalendarViewSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
     // Transform schema data to CalendarEvent format
     const events: CalendarEvent[] = React.useMemo(() => {
       if (!schema.data || !Array.isArray(schema.data)) return [];

packages/components/src/renderers/complex/carousel.tsx

@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { CarouselSchema } from '@object-ui/types';
 import { 
   Carousel, 
   CarouselContent, 
@@ -9,7 +10,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('carousel', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: CarouselSchema; className?: string; [key: string]: any }) => (
     <Carousel 
       opts={schema.opts} 
       orientation={schema.orientation || 'horizontal'}

packages/components/src/renderers/complex/chatbot.tsx

@@ -1,5 +1,6 @@
 import { ComponentRegistry } from '@object-ui/core';
-import { Chatbot, type ChatMessage } from '@/ui';
+import type { ChatbotSchema, ChatMessage } from '@object-ui/types';
+import { Chatbot } from '@/ui';
 import { useState } from 'react';
 
 /**

packages/components/src/renderers/complex/data-table.tsx

@@ -1,6 +1,7 @@
 // Enterprise-level DataTable Component (Airtable-like)
 import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import type { DataTableSchema } from '@object-ui/types';
 import { 
   Table, 
   TableHeader, 
@@ -38,71 +39,6 @@ import {
 
 type SortDirection = 'asc' | 'desc' | null;
 
-/**
- * Column configuration for the data table.
- * @interface Column
- */
-interface Column {
-  /** Display name of the column */
-  header: string;
-  /** Key to access the data field in each row object */
-  accessorKey: string;
-  /** Optional CSS classes for the column header */
-  className?: string;
-  /** Optional CSS classes for the column cells */
-  cellClassName?: string;
-  /** Width of the column (e.g., '80px' or 80) */
-  width?: string | number;
-  /** Whether sorting is enabled for this column (default: true) */
-  sortable?: boolean;
-  /** Whether filtering is enabled for this column (default: true) */
-  filterable?: boolean;
-  /** Whether column resizing is enabled (default: true) */
-  resizable?: boolean;
-}
-
-/**
- * Schema definition for the enterprise data table component.
- * Supports sorting, pagination, search, row selection, CSV export, and row actions.
- * @interface DataTableSchema
- */
-interface DataTableSchema {
-  /** Optional caption text displayed above the table */
-  caption?: string;
-  /** Array of column definitions */
-  columns: Column[];
-  /** Array of data objects to display. Each object should have an 'id' field for stable row identification */
-  data: any[];
-  /** Enable/disable pagination (default: true) */
-  pagination?: boolean;
-  /** Number of rows per page (default: 10) */
-  pageSize?: number;
-  /** Enable/disable search across all columns (default: true) */
-  searchable?: boolean;
-  /** Enable/disable row selection with checkboxes (default: false) */
-  selectable?: boolean;
-  /** Enable/disable column sorting (default: true) */
-  sortable?: boolean;
-  /** Enable/disable CSV export button (default: false) */
-  exportable?: boolean;
-  /** Show/hide edit and delete action buttons for each row (default: false) */
-  rowActions?: boolean;
-  /** Enable/disable column resizing by dragging (default: true) */
-  resizableColumns?: boolean;
-  /** Enable/disable column reordering by dragging (default: true) */
-  reorderableColumns?: boolean;
-  /** Callback function triggered when the edit button is clicked */
-  onRowEdit?: (row: any) => void;
-  /** Callback function triggered when the delete button is clicked */
-  onRowDelete?: (row: any) => void;
-  /** Callback function triggered when row selection changes, receives array of selected rows */
-  onSelectionChange?: (selectedRows: any[]) => void;
-  /** Callback function triggered when columns are reordered */
-  onColumnsReorder?: (columns: Column[]) => void;
-  /** Optional CSS classes for the table container */
-  className?: string;
-}
-
 /**
  * Enterprise-level data table component with Airtable-like features.
  * 

packages/components/src/renderers/complex/filter-builder.tsx

@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
-import { FilterBuilder, type FilterGroup } from '@/ui/filter-builder';
+import type { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
+import { FilterBuilder } from '@/ui/filter-builder';
 
 ComponentRegistry.register('filter-builder', 
-  ({ schema, className, onChange, ...props }) => {
+  ({ schema, className, onChange, ...props }: { schema: FilterBuilderSchema; className?: string; onChange?: (event: any) => void; [key: string]: any }) => {
     const handleChange = (value: FilterGroup) => {
       if (onChange) {
         onChange({

packages/components/src/renderers/complex/kanban.tsx

@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { KanbanSchema } from '@object-ui/types';
 import { KanbanBoard, type KanbanColumn, type KanbanCard } from '@/ui';
 import React from 'react';
 
 ComponentRegistry.register('kanban', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: KanbanSchema; className?: string; [key: string]: any }) => {
     return (
       <KanbanBoard 
         columns={schema.columns || []}

packages/components/src/renderers/complex/resizable.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import type { ResizableSchema } from '@object-ui/types';
 import { 
   ResizablePanelGroup, 
   ResizablePanel, 
@@ -8,7 +9,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('resizable', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ResizableSchema; className?: string; [key: string]: any }) => (
     <ResizablePanelGroup 
         direction={schema.direction || 'horizontal'} 
         className={className} 

packages/components/src/renderers/complex/scroll-area.tsx

@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ScrollAreaSchema } from '@object-ui/types';
 import { ScrollArea, ScrollBar } from '@/ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('scroll-area', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ScrollAreaSchema; className?: string; [key: string]: any }) => (
     <ScrollArea className={className} style={{ height: schema.height, width: schema.width }} {...props}>
       {renderChildren(schema.content || schema.children)}
       {schema.orientation === 'horizontal' && <ScrollBar orientation="horizontal" />}

packages/components/src/renderers/complex/table.tsx

@@ -1,5 +1,6 @@
 // table.tsx implementation
 import { ComponentRegistry } from '@object-ui/core';
+import type { TableSchema } from '@object-ui/types';
 import { 
   Table, 
   TableHeader, 
@@ -13,7 +14,7 @@ import {
 
 // A simple data-driven table
 ComponentRegistry.register('table', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: TableSchema; className?: string; [key: string]: any }) => (
     <Table className={className} {...props}>
       {schema.caption && <TableCaption>{schema.caption}</TableCaption>}
       <TableHeader>

packages/components/src/renderers/complex/timeline.tsx

@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TimelineSchema } from '@object-ui/types';
 import {
   Timeline,
   TimelineItem,
@@ -78,7 +79,7 @@ function formatDate(dateString: string, format?: string): string {
 
 ComponentRegistry.register(
   'timeline',
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: TimelineSchema; className?: string; [key: string]: any }) => {
     const {
       variant = 'vertical',
       items = [],

packages/components/src/renderers/data-display/alert.tsx

@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AlertSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import {
   Alert,
@@ -7,7 +8,7 @@ import {
 } from '@/ui';
 
 ComponentRegistry.register('alert', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: AlertSchema; className?: string; [key: string]: any }) => (
     <Alert variant={schema.variant} className={className} {...props}>
       <AlertTitle>{schema.title}</AlertTitle>
       <AlertDescription>{schema.description || renderChildren(schema.body)}</AlertDescription>

packages/components/src/renderers/data-display/avatar.tsx

@@ -1,12 +1,13 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AvatarSchema } from '@object-ui/types';
 import {
   Avatar,
   AvatarImage,
   AvatarFallback
 } from '@/ui';
 
 ComponentRegistry.register('avatar', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: AvatarSchema; className?: string; [key: string]: any }) => (
     <Avatar className={className} {...props}>
       <AvatarImage src={schema.src} alt={schema.alt} />
       <AvatarFallback>{schema.fallback}</AvatarFallback>

packages/components/src/renderers/data-display/badge.tsx

@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { BadgeSchema } from '@object-ui/types';
 import { Badge } from '@/ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('badge', 
-  ({ schema, ...props }) => (
+  ({ schema, ...props }: { schema: BadgeSchema; [key: string]: any }) => (
     <Badge variant={schema.variant} className={schema.className} {...props}>
       {schema.label || renderChildren(schema.body)}
     </Badge>

packages/components/src/renderers/data-display/chart.tsx

@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ChartSchema } from '@object-ui/types';
 import {
   ChartContainer,
   ChartTooltip,
@@ -20,7 +21,7 @@ import {
 } from 'recharts';
 
 ComponentRegistry.register('chart',
-  ({ schema, className }) => {
+  ({ schema, className }: { schema: ChartSchema; className?: string }) => {
     const { chartType = 'bar', data = [], config = {}, xAxisKey, series = [] } = schema;
 
     const ChartComponent = {

packages/components/src/renderers/data-display/list.tsx

@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ListSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('list', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: ListSchema; className?: string; [key: string]: any }) => {
     const ListTag = schema.ordered ? 'ol' : 'ul';
 
     return (

packages/components/src/renderers/data-display/markdown.tsx

@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { MarkdownSchema } from '@object-ui/types';
 import { Markdown } from '@/ui';
 
 /**
@@ -23,7 +24,7 @@ import { Markdown } from '@/ui';
  * - Tailwind CSS prose styling
  */
 ComponentRegistry.register('markdown', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: MarkdownSchema; className?: string; [key: string]: any }) => (
     <Markdown 
       content={schema.content || ''} 
       className={className}

packages/components/src/renderers/data-display/tree-view.tsx

@@ -1,16 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TreeViewSchema, TreeNode } from '@object-ui/types';
 import { ChevronRight, ChevronDown, Folder, File } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
 
-interface TreeNode {
-  id: string;
-  label: string;
-  icon?: string;
-  children?: TreeNode[];
-  data?: any;
-}
-
 const TreeNodeComponent = ({ 
   node, 
   level = 0, 

packages/components/src/renderers/disclosure/accordion.tsx

@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AccordionSchema } from '@object-ui/types';
 import { 
   Accordion, 
   AccordionItem, 
@@ -8,11 +9,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('accordion', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: AccordionSchema; className?: string; [key: string]: any }) => (
     <Accordion type={schema.accordionType || 'single'} collapsible={schema.collapsible} className={className} {...props}>
-      {schema.items?.map((item: any, index: number) => (
+      {schema.items?.map((item, index: number) => (
         <AccordionItem key={item.value || index} value={item.value || `item-${index}`}>
-          <AccordionTrigger>{item.trigger || item.label}</AccordionTrigger>
+          <AccordionTrigger>{item.title}</AccordionTrigger>
           <AccordionContent>
             {renderChildren(item.content)}
           </AccordionContent>