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>

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>

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>

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>

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>

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>

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>

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>