@object-ui/components 0.3.1 → 0.5.0

package/src/renderers/basic/image.tsx

@@ -33,6 +33,7 @@ ComponentRegistry.register('image',
   );
   },
   {
+    namespace: 'ui',
     label: 'Image',
     icon: 'image',
     category: 'basic',

package/src/renderers/basic/navigation-menu.tsx

@@ -66,6 +66,7 @@ ComponentRegistry.register('navigation-menu',
     );
   },
   {
+    namespace: 'ui',
     label: 'Navigation Menu',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }

package/src/renderers/basic/pagination.tsx

@@ -9,6 +9,7 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { PaginationSchema } from '@object-ui/types';
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '../../ui/pagination';
+import React from 'react';
 
 ComponentRegistry.register('pagination', 
   ({ schema, ...props }: { schema: PaginationSchema; [key: string]: any }) => {
@@ -16,13 +17,23 @@ ComponentRegistry.register('pagination',
         'data-obj-id': dataObjId, 
         'data-obj-type': dataObjType,
         style,
+        onPageChange,
         ...paginationProps
     } = props;
     
     const currentPage = schema.currentPage || schema.page || 1;
     const totalPages = schema.totalPages || 1;
-    const showEllipsis = totalPages > 7;
     
+    const handlePageChange = (page: number, e: React.MouseEvent) => {
+      e.preventDefault();
+      if (page === currentPage) return;
+      if (page < 1 || page > totalPages) return;
+      
+      if (onPageChange) {
+        onPageChange(page);
+      }
+    };
+
     const getPageNumbers = () => {
       if (totalPages <= 7) {
         return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -47,27 +58,43 @@ ComponentRegistry.register('pagination',
       >
         <PaginationContent>
           <PaginationItem>
-            <PaginationPrevious href="#" />
+            <PaginationPrevious 
+              href="#" 
+              onClick={(e) => handlePageChange(currentPage - 1, e)}
+              className={currentPage <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              aria-disabled={currentPage <= 1}
+            />
           </PaginationItem>
           {getPageNumbers().map((page, idx) => (
             <PaginationItem key={idx}>
               {page === -1 ? (
                 <PaginationEllipsis />
               ) : (
-                <PaginationLink href="#" isActive={page === currentPage}>
+                <PaginationLink 
+                  href="#" 
+                  isActive={page === currentPage}
+                  onClick={(e) => handlePageChange(page, e)}
+                  className="cursor-pointer"
+                >
                   {page}
                 </PaginationLink>
               )}
             </PaginationItem>
           ))}
           <PaginationItem>
-            <PaginationNext href="#" />
+            <PaginationNext 
+              href="#" 
+              onClick={(e) => handlePageChange(currentPage + 1, e)}
+              className={currentPage >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              aria-disabled={currentPage >= totalPages}
+            />
           </PaginationItem>
         </PaginationContent>
       </Pagination>
     );
   },
   {
+    namespace: 'ui',
     label: 'Pagination',
     inputs: [
       { name: 'currentPage', type: 'number', label: 'Current Page', defaultValue: 1 },

package/src/renderers/basic/separator.tsx

@@ -37,6 +37,7 @@ const SeparatorRenderer = forwardRef<HTMLDivElement, { schema: SeparatorSchema;
 ComponentRegistry.register('separator', 
   SeparatorRenderer,
   {
+    namespace: 'ui',
     label: 'Separator',
     inputs: [
       { 

package/src/renderers/basic/span.tsx

@@ -13,6 +13,16 @@ import { forwardRef } from 'react';
 
 const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className?: string; [key: string]: any }>(
   ({ schema, className, ...props }, ref) => {
+    // Deprecation warning
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        '[ObjectUI] The "span" component is deprecated. Please use Shadcn components instead:\n' +
+        '  - For badges/labels: use "badge" component\n' +
+        '  - For inline text emphasis: use "text" component with appropriate className\n' +
+        'See documentation at https://www.objectui.org/docs/components for alternatives.'
+      );
+    }
+    
     // Extract designer-related props
     const { 
         'data-obj-id': dataObjId, 
@@ -38,7 +48,8 @@ const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className
 ComponentRegistry.register('span', 
   SpanRenderer,
   {
-    label: 'Inline Container',
+    namespace: 'ui',
+    label: 'Inline Container (Deprecated)',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],

package/src/renderers/basic/text.tsx

@@ -22,13 +22,14 @@ ComponentRegistry.register('text',
         ...rest 
     } = props;
 
-    // If we have designer props, we must wrap it to make it selectable
-    if (dataObjId) {
+    // If we have designer props or className, we must wrap it to make it selectable and styleable
+    if (dataObjId || schema.className || rest.className) {
         return (
             <span 
                 data-obj-id={dataObjId}
                 data-obj-type={dataObjType}
                 style={style}
+                className={schema.className || rest.className}
                 {...rest}
             >
                 {schema.content || schema.value}
@@ -39,6 +40,7 @@ ComponentRegistry.register('text',
     return <>{schema.content || schema.value}</>;
   },
   {
+    namespace: 'ui',
     label: 'Text',
     inputs: [
       { name: 'content', type: 'string', label: 'Content', required: true }

package/src/renderers/complex/carousel.tsx

@@ -41,6 +41,7 @@ ComponentRegistry.register('carousel',
     </Carousel>
   ),
   {
+    namespace: 'ui',
     label: 'Carousel',
     inputs: [
       { name: 'orientation', type: 'enum', enum: ['horizontal', 'vertical'], defaultValue: 'horizontal', label: 'Orientation' },

package/src/renderers/complex/data-table.tsx

@@ -8,6 +8,7 @@
 
 // Enterprise-level DataTable Component (Airtable-like)
 import React, { useState, useMemo, useRef, useEffect } from 'react';
+import { cn } from '../../lib/utils';
 import { ComponentRegistry } from '@object-ui/core';
 import type { DataTableSchema } from '@object-ui/types';
 import { 
@@ -360,55 +361,60 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     return selectedRowIds.has(rowId);
   }) && !allPageRowsSelected;
 
+  const showToolbar = searchable || exportable || (selectable && selectedRowIds.size > 0);
+
   return (
-    <div className={`space-y-4 ${className || ''}`}>
+    <div className={`flex flex-col h-full gap-4 ${className || ''}`}>
       {/* Toolbar */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-2 flex-1">
-          {searchable && (
-            <div className="relative max-w-sm flex-1">
-              <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="Search..."
-                value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                  setCurrentPage(1);
-                }}
-                className="pl-8"
-              />
-            </div>
-          )}
-        </div>
-        
-        <div className="flex items-center gap-2">
-          {exportable && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleExport}
-              disabled={sortedData.length === 0}
-            >
-              <Download className="h-4 w-4 mr-2" />
-              Export CSV
-            </Button>
-          )}
+      {showToolbar && (
+        <div className="flex items-center justify-between gap-4 flex-none">
+          <div className="flex items-center gap-2 flex-1">
+            {searchable && (
+              <div className="relative max-w-sm flex-1">
+                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => {
+                    setSearchQuery(e.target.value);
+                    setCurrentPage(1);
+                  }}
+                  className="pl-8"
+                />
+              </div>
+            )}
+          </div>
           
-          {selectable && selectedRowIds.size > 0 && (
-            <div className="text-sm text-muted-foreground">
-              {selectedRowIds.size} selected
-            </div>
-          )}
+          <div className="flex items-center gap-2">
+            {exportable && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleExport}
+                disabled={sortedData.length === 0}
+              >
+                <Download className="h-4 w-4 mr-2" />
+                Export CSV
+              </Button>
+            )}
+            
+            {selectable && selectedRowIds.size > 0 && (
+              <div className="text-sm text-muted-foreground">
+                {selectedRowIds.size} selected
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Table */}
-      <Table>
+      <div className="rounded-md border flex-1 min-h-0 overflow-auto relative bg-background">
+        <Table>
           {caption && <TableCaption>{caption}</TableCaption>}
-          <TableHeader>
+          <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
             <TableRow>
               {selectable && (
-                <TableHead className="w-12">
+                <TableHead className="w-12 bg-background">
                   <Checkbox
                     checked={allPageRowsSelected ? true : somePageRowsSelected ? 'indeterminate' : false}
                     onCheckedChange={handleSelectAll}
@@ -423,7 +429,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 return (
                   <TableHead
                     key={col.accessorKey}
-                    className={`${col.className || ''} ${sortable && col.sortable !== false ? 'cursor-pointer select-none' : ''} ${isDragging ? 'opacity-50' : ''} ${isDragOver ? 'border-l-2 border-primary' : ''} relative group`}
+                    className={`${col.className || ''} ${sortable && col.sortable !== false ? 'cursor-pointer select-none' : ''} ${isDragging ? 'opacity-50' : ''} ${isDragOver ? 'border-l-2 border-primary' : ''} relative group bg-background`}
                     style={{ 
                       width: columnWidth,
                       minWidth: columnWidth 
@@ -455,7 +461,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 );
               })}
               {rowActions && (
-                <TableHead className="w-24 text-right">Actions</TableHead>
+                <TableHead className="w-24 text-right bg-background">Actions</TableHead>
               )}
             </TableRow>
           </TableHeader>
@@ -464,69 +470,101 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
               <TableRow>
                 <TableCell
                   colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)}
-                  className="h-24 text-center text-muted-foreground"
+                  className="h-96 text-center text-muted-foreground"
                 >
-                  No data available
+                  <div className="flex flex-col items-center justify-center gap-2">
+                    <Search className="h-8 w-8 text-muted-foreground/50" />
+                    <p>No results found</p>
+                    <p className="text-xs text-muted-foreground/50">Try adjusting your filters or search query.</p>
+                  </div>
                 </TableCell>
               </TableRow>
             ) : (
-              paginatedData.map((row, rowIndex) => {
-                const globalIndex = (currentPage - 1) * pageSize + rowIndex;
-                const rowId = getRowId(row, globalIndex);
-                const isSelected = selectedRowIds.has(rowId);
-                
-                return (
-                  <TableRow key={rowId} data-state={isSelected ? 'selected' : undefined}>
-                    {selectable && (
-                      <TableCell>
-                        <Checkbox
-                          checked={isSelected}
-                          onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
-                        />
-                      </TableCell>
-                    )}
-                    {columns.map((col, colIndex) => {
-                      const columnWidth = columnWidths[col.accessorKey] || col.width;
-                      return (
-                        <TableCell 
-                          key={colIndex} 
-                          className={col.cellClassName}
-                          style={{
-                            width: columnWidth,
-                            minWidth: columnWidth,
-                            maxWidth: columnWidth
-                          }}
-                        >
-                          {row[col.accessorKey]}
+              <>
+                {paginatedData.map((row, rowIndex) => {
+                  const globalIndex = (currentPage - 1) * pageSize + rowIndex;
+                  const rowId = getRowId(row, globalIndex);
+                  const isSelected = selectedRowIds.has(rowId);
+                  
+                  return (
+                    <TableRow 
+                      key={rowId} 
+                      data-state={isSelected ? 'selected' : undefined}
+                      className={cn(
+                        // @ts-expect-error - onRowClick might not be in schema type definition
+                        schema.onRowClick && "cursor-pointer"
+                      )}
+                      onClick={(e) => {
+                        // @ts-expect-error - onRowClick might not be in schema type definition
+                        if (schema.onRowClick && !e.defaultPrevented) {
+                           // Simple heuristic to avoid triggering on interactive elements if they didn't stop propagation
+                           const target = e.target as HTMLElement;
+                           if (target.closest('button') || target.closest('[role="checkbox"]') || target.closest('a')) {
+                             return;
+                           }
+                           // @ts-expect-error - onRowClick might not be in schema type definition
+                           schema.onRowClick(row);
+                        }
+                      }}
+                    >
+                      {selectable && (
+                        <TableCell>
+                          <Checkbox
+                            checked={isSelected}
+                            onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
+                          />
                         </TableCell>
-                      );
-                    })}
-                    {rowActions && (
-                      <TableCell className="text-right">
-                        <div className="flex items-center justify-end gap-1">
-                          <Button
-                            variant="ghost"
-                            size="icon-sm"
-                            onClick={() => schema.onRowEdit?.(row)}
-                          >
-                            <Edit className="h-4 w-4" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon-sm"
-                            onClick={() => schema.onRowDelete?.(row)}
+                      )}
+                      {columns.map((col, colIndex) => {
+                        const columnWidth = columnWidths[col.accessorKey] || col.width;
+                        return (
+                          <TableCell 
+                            key={colIndex} 
+                            className={col.cellClassName}
+                            style={{
+                              width: columnWidth,
+                              minWidth: columnWidth,
+                              maxWidth: columnWidth
+                            }}
                           >
-                            <Trash2 className="h-4 w-4 text-destructive" />
-                          </Button>
-                        </div>
-                      </TableCell>
-                    )}
+                            {row[col.accessorKey]}
+                          </TableCell>
+                        );
+                      })}
+                      {rowActions && (
+                        <TableCell className="text-right">
+                          <div className="flex items-center justify-end gap-1">
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              onClick={() => schema.onRowEdit?.(row)}
+                            >
+                              <Edit className="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              onClick={() => schema.onRowDelete?.(row)}
+                            >
+                              <Trash2 className="h-4 w-4 text-destructive" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      )}
+                    </TableRow>
+                  );
+                })}
+                {/* Filler rows to maintain height consistency */}
+                {paginatedData.length > 0 && Array.from({ length: Math.max(0, pageSize - paginatedData.length) }).map((_, i) => (
+                  <TableRow key={`empty-${i}`} className="hover:bg-transparent">
+                    <TableCell colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} className="h-[52px] p-0" />
                   </TableRow>
-                );
-              })
+                ))}
+              </>
             )}
           </TableBody>
         </Table>
+      </div>
 
       {/* Pagination */}
       {pagination && sortedData.length > 0 && (
@@ -600,6 +638,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
 // Register the component
 ComponentRegistry.register('data-table', DataTableRenderer, {
+  namespace: 'ui',
   label: 'Data Table',
   icon: 'table',
   inputs: [

package/src/renderers/complex/filter-builder.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
-import { FilterBuilder } from '../../ui/filter-builder';
+import { FilterBuilder } from '../../custom/filter-builder';
 
 ComponentRegistry.register('filter-builder', 
   ({ schema, className, onChange, ...props }: { schema: FilterBuilderSchema; className?: string; onChange?: (event: any) => void; [key: string]: any }) => {
@@ -39,6 +39,7 @@ ComponentRegistry.register('filter-builder',
     );
   },
   {
+    namespace: 'ui',
     label: 'Filter Builder',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },

package/src/renderers/complex/resizable.tsx

@@ -19,7 +19,7 @@ import { renderChildren } from '../../lib/utils';
 ComponentRegistry.register('resizable', 
   ({ schema, className, ...props }: { schema: ResizableSchema; className?: string; [key: string]: any }) => (
     <ResizablePanelGroup 
-        direction={schema.direction || 'horizontal'} 
+        orientation={(schema.direction || 'horizontal') as "horizontal" | "vertical"}
         className={className} 
         {...props}
         style={{ minHeight: schema.minHeight || '200px' }}
@@ -35,6 +35,7 @@ ComponentRegistry.register('resizable',
     </ResizablePanelGroup>
   ),
   {
+    namespace: 'ui',
     label: 'Resizable Panel Group',
     inputs: [
       { name: 'direction', type: 'enum', enum: ['horizontal', 'vertical'], defaultValue: 'horizontal', label: 'Direction' },

package/src/renderers/complex/scroll-area.tsx

@@ -12,26 +12,44 @@ import { ScrollArea, ScrollBar } from '../../ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('scroll-area', 
-  ({ 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" />}
+  ({ schema, className, ...props }: { schema: ScrollAreaSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...scrollAreaProps 
+    } = props;
+
+    const orientation = schema.orientation || 'vertical';
+
+    return (
+    <ScrollArea 
+        className={className} 
+        style={{ height: schema.height, width: schema.width, ...style }} 
+        {...scrollAreaProps}
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+    >
+      {renderChildren(schema.children)}
+      {(orientation === 'horizontal' || orientation === 'both') && <ScrollBar orientation="horizontal" />}
+      {(orientation === 'vertical' || orientation === 'both') && <ScrollBar orientation="vertical" />}
     </ScrollArea>
-  ),
+  )},
   {
+    namespace: 'ui',
     label: 'Scroll Area',
     inputs: [
       { name: 'height', type: 'string', label: 'Height (e.g. 200px)' },
       { name: 'width', type: 'string', label: 'Width' },
       { name: 'orientation', type: 'enum', enum: ['vertical', 'horizontal', 'both'], defaultValue: 'vertical', label: 'Orientation' },
-      { name: 'content', type: 'slot', label: 'Content' },
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
       height: '200px',
       width: '100%',
       orientation: 'vertical',
-      content: [
+      children: [
         { type: 'div', className: 'p-4', body: [{ type: 'text', content: 'Scrollable content goes here. Add more content to see scrolling behavior.' }] }
       ],
       className: 'rounded-md border'

package/src/renderers/complex/table.tsx

@@ -59,6 +59,7 @@ ComponentRegistry.register('table',
     </Table>
   ),
   {
+    namespace: 'ui',
     label: 'Table',
     inputs: [
       { name: 'caption', type: 'string', label: 'Caption' },

package/src/renderers/data-display/alert.tsx

@@ -23,6 +23,7 @@ ComponentRegistry.register('alert',
     </Alert>
   ),
   {
+    namespace: 'ui',
     label: 'Alert',
     inputs: [
       { name: 'title', type: 'string', label: 'Title', required: true },

package/src/renderers/data-display/avatar.tsx

@@ -22,6 +22,7 @@ ComponentRegistry.register('avatar',
     </Avatar>
   ),
   {
+    namespace: 'ui',
     label: 'Avatar',
     inputs: [
       { name: 'src', type: 'string', label: 'Image URL' },

package/src/renderers/data-display/badge.tsx

@@ -34,6 +34,7 @@ ComponentRegistry.register('badge',
   );
   },
   {
+    namespace: 'ui',
     label: 'Badge',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },

package/src/renderers/data-display/breadcrumb.tsx

@@ -44,6 +44,7 @@ ComponentRegistry.register('breadcrumb',
     );
   },
   {
+    namespace: 'ui',
     label: 'Breadcrumb',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }

package/src/renderers/data-display/kbd.tsx

@@ -37,6 +37,7 @@ ComponentRegistry.register('kbd',
     );
   },
   {
+    namespace: 'ui',
     label: 'Keyboard Key',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },