@object-ui/components 0.3.1 → 0.5.0

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

@@ -8,69 +8,40 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { ListSchema } from '@object-ui/types';
-import { renderChildren } from '../../lib/utils';
-import { cn } from '../../lib/utils';
-import { ChevronRight, Hexagon, Terminal } from 'lucide-react';
+import { useDataScope } from '@object-ui/react';
+import { renderChildren, cn } from '../../lib/utils';
 
 ComponentRegistry.register('list', 
   ({ schema, className, ...props }: { schema: ListSchema; className?: string; [key: string]: any }) => {
-    // We use 'ul' for both to control semantics manually with visuals
-    const ListTag = 'ul';
+    // Support data binding
+    const boundData = useDataScope(schema.bind);
+    const items = boundData || schema.items || [];
     
-    return (
-      <div className={cn("relative p-4 rounded-lg bg-slate-950/30 border border-slate-800/50 backdrop-blur-sm", schema.wrapperClass)}>
-        {/* Decorative corner accents for container */}
-        <div className="absolute top-0 left-0 w-2 h-2 border-l-2 border-t-2 border-cyan-500/50 rounded-tl-sm" />
-        <div className="absolute top-0 right-0 w-2 h-2 border-r-2 border-t-2 border-cyan-500/50 rounded-tr-sm" />
-        <div className="absolute bottom-0 left-0 w-2 h-2 border-l-2 border-b-2 border-cyan-500/50 rounded-bl-sm" />
-        <div className="absolute bottom-0 right-0 w-2 h-2 border-r-2 border-b-2 border-cyan-500/50 rounded-br-sm" />
+    // We use 'ol' or 'ul' based on ordered prop
+    const ListTag = schema.ordered ? 'ol' : 'ul';
+    
+    // Default styles for ordered/unordered
+    const listStyle = schema.ordered ? "list-decimal" : "list-disc";
 
+    return (
+      <div className={cn("space-y-2", schema.wrapperClass)}>
         {schema.title && (
-          <div className="flex items-center gap-2 mb-4 pb-2 border-b border-cyan-900/30">
-             <Terminal className="w-4 h-4 text-cyan-500" />
-             <h3 className="text-sm font-bold uppercase tracking-widest text-cyan-400 drop-shadow-[0_0_5px_rgba(6,182,212,0.5)]">
-                {schema.title}
-             </h3>
-          </div>
+          <h3 className="text-lg font-semibold tracking-tight">
+             {schema.title}
+          </h3>
         )}
         
         <ListTag 
           className={cn(
-            "space-y-1",
+            "ml-6 [&>li]:mt-2",
+            listStyle,
             className
           )}
           {...props}
         >
-          {schema.items?.map((item: any, index: number) => (
-            <li 
-                key={index} 
-                className={cn(
-                    "group flex items-start gap-3 p-2 rounded-sm transition-all duration-300",
-                    "hover:bg-cyan-950/20 hover:pl-3",
-                    typeof item === 'object' && item.className
-                )}
-            >
-              {/* Marker Area */}
-              <div className="flex-shrink-0 mt-0.5">
-                {schema.ordered ? (
-                    <span className="flex items-center justify-center w-5 h-5 text-[10px] font-mono font-bold text-slate-950 bg-cyan-600 rounded-sm shadow-[0_0_8px_cyan] group-hover:bg-cyan-400 group-hover:scale-110 transition-all">
-                        {String(index + 1).padStart(2, '0')}
-                    </span>
-                ) : (
-                    <div className="relative flex items-center justify-center w-5 h-5">
-                        <Hexagon className="w-3 h-3 text-cyan-600 group-hover:text-cyan-400 group-hover:rotate-90 transition-transform duration-500" />
-                        <div className="absolute inset-0 bg-cyan-500/20 blur-[2px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
-                    </div>
-                )}
-              </div>
-
-              {/* Content Area */}
-              <div className="flex-1 text-sm text-slate-400 group-hover:text-cyan-100 font-medium font-sans leading-tight transition-colors">
-                {typeof item === 'string' ? item : item.content || renderChildren(item.body)}
-              </div>
-
-              {/* Hover Indicator */}
-              <ChevronRight className="w-4 h-4 text-cyan-500/0 -translate-x-2 group-hover:text-cyan-500 group-hover:translate-x-0 transition-all duration-300 opacity-0 group-hover:opacity-100" />
+          {items.map((item: any, index: number) => (
+            <li key={index} className={cn(typeof item === 'object' && item.className)}>
+              {typeof item === 'string' ? item : item.content || renderChildren(item.body)}
             </li>
           ))}
         </ListTag>
@@ -78,6 +49,7 @@ ComponentRegistry.register('list',
     );
   },
   {
+    namespace: 'ui',
     label: 'List',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

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

@@ -10,21 +10,36 @@ import { ComponentRegistry } from '@object-ui/core';
 import type { StatisticSchema } from '@object-ui/types';
 import { cn } from '../../lib/utils';
 import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
+
+// Helper to resolve icon
+const getIcon = (name: string) => {
+    if (!name) return null;
+    const pascalName = name.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
+    // Dynamic icon lookup from Lucide
+    const Icon = LucideIcons[pascalName] || LucideIcons[name];
+    return Icon;
+};
 
 const StatisticRenderer = ({ schema }: { schema: StatisticSchema }) => {
+  const Icon = schema.icon ? getIcon(schema.icon) : null;
+  
   return (
     <div className={cn(
         "group relative flex flex-col p-4 sm:p-5 md:p-6 rounded-xl border bg-card text-card-foreground shadow-sm",
         schema.className
     )}>
-      {/* Label */}
-      {schema.label && (
-        <div className="flex items-center gap-2 mb-2">
+      {/* Label & Header Icon */}
+      <div className="flex items-center justify-between mb-2">
+          {schema.label && (
             <p className="text-sm font-medium text-muted-foreground">
             {schema.label}
             </p>
-        </div>
-      )}
+          )}
+          {/* Dynamic icon resolution from Lucide, not component creation during render */}
+          {/* eslint-disable-next-line */}
+          {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+      </div>
 
       {/* Value Area */}
       <div className="flex items-baseline gap-2">
@@ -52,6 +67,7 @@ const StatisticRenderer = ({ schema }: { schema: StatisticSchema }) => {
 };
 
 ComponentRegistry.register('statistic', StatisticRenderer, {
+  namespace: 'ui',
   label: 'Statistic',
   category: 'data-display',
   icon: 'Activity',

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

@@ -19,9 +19,11 @@ import {
 } from '../../ui/table';
 import { cn } from '../../lib/utils';
 
-export const SimpleTableRenderer = ({ schema, className, ..._props }: any) => {
-  const data = useDataScope(schema.bind);
-  const columns = schema.props?.columns || [];
+export const SimpleTableRenderer = ({ schema, className }: any) => {
+  // Try to get data from binding first, then fall back to inline data
+  const boundData = useDataScope(schema.bind);
+  const data = boundData || schema.data || schema.props?.data || [];
+  const columns = schema.columns || schema.props?.columns || [];
 
   // If we have data but it's not an array, show error. 
   // If data is undefined, we might just be loading or empty.
@@ -36,8 +38,10 @@ export const SimpleTableRenderer = ({ schema, className, ..._props }: any) => {
       <Table>
         <TableHeader>
           <TableRow>
-            {columns.map((col: any) => (
-              <TableHead key={col.key}>{col.label}</TableHead>
+            {columns.map((col: any, index: number) => (
+              <TableHead key={col.key || col.accessorKey || index}>
+                {col.label || col.header}
+              </TableHead>
             ))}
           </TableRow>
         </TableHeader>
@@ -51,11 +55,15 @@ export const SimpleTableRenderer = ({ schema, className, ..._props }: any) => {
           ) : (
             displayData.map((row: any, i: number) => (
               <TableRow key={row.id || i}>
-                {columns.map((col: any) => (
-                  <TableCell key={col.key}>
-                    {row[col.key]}
-                  </TableCell>
-                ))}
+                {columns.map((col: any, index: number) => {
+                  const accessor = col.key || col.accessorKey || '';
+                  const value = accessor ? row[accessor] : '';
+                  return (
+                    <TableCell key={col.key || col.accessorKey || index}>
+                      {value}
+                    </TableCell>
+                  );
+                })}
               </TableRow>
             ))
           )}
@@ -65,4 +73,6 @@ export const SimpleTableRenderer = ({ schema, className, ..._props }: any) => {
   );
 };
 
-ComponentRegistry.register('table', SimpleTableRenderer);
+ComponentRegistry.register('table', SimpleTableRenderer, {
+  namespace: 'ui'
+});

package/src/renderers/data-display/tree-view.tsx

@@ -11,6 +11,7 @@ import type { TreeViewSchema, TreeNode } from '@object-ui/types';
 import { ChevronRight, ChevronDown, Folder, File, FolderOpen, CircuitBoard } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '../../lib/utils';
+import { useDataScope } from '@object-ui/react';
 
 const TreeNodeComponent = ({ 
   node, 
@@ -99,6 +100,10 @@ ComponentRegistry.register('tree-view',
       }
     };
 
+    // Support data binding
+    const boundData = useDataScope(schema.bind);
+    const nodes = boundData || schema.nodes || schema.data || [];
+
     return (
       <div className={cn(
           'relative border rounded-lg p-3 bg-card text-card-foreground',
@@ -112,7 +117,7 @@ ComponentRegistry.register('tree-view',
           </div>
         )}
         <div className="space-y-1">
-          {(schema.nodes || schema.data)?.map((node: TreeNode) => (
+          {nodes.map((node: TreeNode) => (
             <TreeNodeComponent
               key={node.id}
               node={node}
@@ -124,6 +129,7 @@ ComponentRegistry.register('tree-view',
     );
   },
   {
+    namespace: 'ui',
     label: 'Tree View',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/disclosure/accordion.tsx

@@ -30,6 +30,7 @@ ComponentRegistry.register('accordion',
     </Accordion>
   ),
   {
+    namespace: 'ui',
     label: 'Accordion',
     inputs: [
       { name: 'accordionType', type: 'enum', enum: ['single', 'multiple'], defaultValue: 'single', label: 'Type' },

package/src/renderers/disclosure/collapsible.tsx

@@ -27,6 +27,7 @@ ComponentRegistry.register('collapsible',
     </Collapsible>
   ),
   {
+    namespace: 'ui',
     label: 'Collapsible',
     inputs: [
       { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },

package/src/renderers/disclosure/toggle-group.tsx

@@ -16,6 +16,7 @@ ComponentRegistry.register('toggle-group',
         'data-obj-id': dataObjId, 
         'data-obj-type': dataObjType,
         style,
+        type, // Extract type to prevent overriding the one we set below
         ...toggleGroupProps
     } = props;
     
@@ -38,6 +39,7 @@ ComponentRegistry.register('toggle-group',
     );
   },
   {
+    namespace: 'ui',
     label: 'Toggle Group',
     inputs: [
       { 

package/src/renderers/feedback/empty.tsx

@@ -35,6 +35,7 @@ ComponentRegistry.register('empty',
     );
   },
   {
+    namespace: 'ui',
     label: 'Empty',
     inputs: [
       { name: 'title', type: 'string', label: 'Title', defaultValue: 'No data' },

package/src/renderers/feedback/loading.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { LoadingSchema } from '@object-ui/types';
-import { Spinner } from '../../ui';
+import { Spinner } from '../../custom';
 import { cn } from '../../lib/utils';
 
 ComponentRegistry.register('loading', 
@@ -50,6 +50,7 @@ ComponentRegistry.register('loading',
     );
   },
   {
+    namespace: 'ui',
     label: 'Loading',
     inputs: [
       { name: 'text', type: 'string', label: 'Loading Text' },

package/src/renderers/feedback/progress.tsx

@@ -15,6 +15,7 @@ ComponentRegistry.register('progress',
     <Progress value={schema.value} className={className} {...props} />
   ),
   {
+    namespace: 'ui',
     label: 'Progress',
     inputs: [
       { name: 'value', type: 'number', label: 'Value', defaultValue: 0 },

package/src/renderers/feedback/skeleton.tsx

@@ -15,6 +15,7 @@ ComponentRegistry.register('skeleton',
     <Skeleton className={className} {...props} style={{ width: schema.width, height: schema.height }} />
   ),
   {
+    namespace: 'ui',
     label: 'Skeleton',
     inputs: [
       { name: 'width', type: 'string', label: 'Width' },

package/src/renderers/feedback/sonner.tsx

@@ -32,6 +32,7 @@ ComponentRegistry.register('sonner',
     );
   },
   {
+    namespace: 'ui',
     label: 'Sonner Toast',
     inputs: [
       { name: 'message', type: 'string', label: 'Message' },

package/src/renderers/feedback/spinner.tsx

@@ -36,6 +36,7 @@ ComponentRegistry.register('spinner',
     );
   },
   {
+    namespace: 'ui',
     label: 'Spinner',
     inputs: [
       { 

package/src/renderers/feedback/toast.tsx

@@ -33,6 +33,7 @@ ComponentRegistry.register('toast',
     );
   },
   {
+    namespace: 'ui',
     label: 'Toast',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/feedback/toaster.tsx

@@ -15,6 +15,7 @@ ComponentRegistry.register('toaster',
     return <SonnerToaster />;
   },
   {
+    namespace: 'ui',
     label: 'Toaster',
     inputs: [],
     defaultProps: {}

package/src/renderers/form/button.tsx

@@ -11,6 +11,20 @@ import type { ButtonSchema } from '@object-ui/types';
 import { Button } from '../../ui';
 import { renderChildren } from '../../lib/utils';
 import { forwardRef } from 'react';
+import { Loader2, icons, type LucideIcon } from 'lucide-react';
+
+// Helper to convert icon names to PascalCase (e.g., "arrow-right" -> "ArrowRight")
+function toPascalCase(str: string): string {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}
+
+// Map of renamed icons in lucide-react
+const iconNameMap: Record<string, string> = {
+  'Home': 'House',
+};
 
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema; [key: string]: any }>(
   ({ schema, ...props }, ref) => {
@@ -22,17 +36,36 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema; [ke
         ...buttonProps 
     } = props;
 
+    // Resolve icon
+    let Icon: LucideIcon | null = null;
+    if (schema.icon) {
+      const iconName = toPascalCase(schema.icon);
+      const mappedIconName = iconNameMap[iconName] || iconName;
+      Icon = (icons as any)[mappedIconName] as LucideIcon;
+    }
+    
+    // Determine loading state
+    const isLoading = schema.loading || props.loading;
+    
+    // Determine disabled state
+    const isDisabled = schema.disabled || props.disabled || isLoading;
+
     return (
     <Button 
         ref={ref}
+        type={schema.buttonType || "button"}
         variant={schema.variant} 
         size={schema.size} 
         className={schema.className} 
+        disabled={isDisabled}
         {...buttonProps}
         // Apply designer props
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
     >
-      {schema.label || renderChildren(schema.body)}
+      {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {!isLoading && Icon && schema.iconPosition !== 'right' && <Icon className="mr-2 h-4 w-4" />}
+      {schema.label || renderChildren(schema.body || schema.children)}
+      {!isLoading && Icon && schema.iconPosition === 'right' && <Icon className="ml-2 h-4 w-4" />}
     </Button>
   );
   }
@@ -41,6 +74,7 @@ ButtonRenderer.displayName = 'ButtonRenderer';
 
 ComponentRegistry.register('button', ButtonRenderer,
   {
+    namespace: 'ui',
     label: 'Button',
     inputs: [
       { name: 'label', type: 'string', label: 'Label', defaultValue: 'Button' },

package/src/renderers/form/calendar.tsx

@@ -20,6 +20,7 @@ ComponentRegistry.register('calendar',
     />
   ),
   {
+    namespace: 'ui',
     label: 'Calendar',
     inputs: [
       { name: 'mode', type: 'enum', enum: ['default', 'single', 'multiple', 'range'], defaultValue: 'single', label: 'Mode' },

package/src/renderers/form/checkbox.tsx

@@ -9,41 +9,63 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { CheckboxSchema } from '@object-ui/types';
 import { Checkbox, Label } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
 
-ComponentRegistry.register('checkbox', 
-  ({ schema, className, ...props }: { schema: CheckboxSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...checkboxProps 
-    } = props;
+const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+  // Extract designer-related props
+  const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style, 
+      ...checkboxProps 
+  } = props;
 
-    return (
+  const handleCheckedChange = (checked: boolean) => {
+    if (onChange) {
+      onChange(checked);
+    }
+  };
+
+  return (
     <div 
-        className={`flex items-center space-x-2 ${schema.wrapperClass || ''}`}
+        className={cn("flex items-center space-x-2", schema.wrapperClass)}
         data-obj-id={dataObjId}
         data-obj-type={dataObjType}
         style={style}
     >
-      <Checkbox id={schema.id} className={className} {...checkboxProps} />
-      <Label htmlFor={schema.id} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      <Checkbox 
+        id={schema.id} 
+        className={className} 
+        checked={value ?? schema.checked ?? false}
+        defaultChecked={value === undefined ? schema.defaultChecked : undefined}
+        onCheckedChange={handleCheckedChange}
+        disabled={schema.disabled}
+        required={schema.required}
+        name={schema.name}
+        {...checkboxProps} 
+      />
+      <Label htmlFor={schema.id} className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>
         {schema.label}
       </Label>
     </div>
   );
-  },
+};
+
+ComponentRegistry.register('checkbox', CheckboxRenderer,
   {
+    namespace: 'ui',
     label: 'Checkbox',
     inputs: [
       { name: 'label', type: 'string', label: 'Label', required: true },
       { name: 'id', type: 'string', label: 'ID', required: true },
-      { name: 'checked', type: 'boolean', label: 'Checked' }
+      { name: 'checked', type: 'boolean', label: 'Checked' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' }
     ],
     defaultProps: {
       label: 'Checkbox label',
-      id: 'checkbox-field' // Will be made unique by designer's ensureNodeIds
+      id: 'checkbox-field'
     }
   }
 );

package/src/renderers/form/combobox.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { ComboboxSchema } from '@object-ui/types';
-import { Combobox } from '../../ui';
+import { Combobox } from '../../custom';
 
 ComponentRegistry.register('combobox', 
   ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
@@ -32,6 +32,7 @@ ComponentRegistry.register('combobox',
   );
   },
   {
+    namespace: 'ui',
     label: 'Combobox',
     inputs: [
       { name: 'placeholder', type: 'string', label: 'Placeholder' },

package/src/renderers/form/command.tsx

@@ -42,6 +42,7 @@ ComponentRegistry.register('command',
   );
   },
   {
+    namespace: 'ui',
     label: 'Command',
     inputs: [
       { name: 'placeholder', type: 'string', label: 'Placeholder' },

package/src/renderers/form/date-picker.tsx

@@ -66,6 +66,7 @@ ComponentRegistry.register('date-picker',
     );
   },
   {
+    namespace: 'ui',
     label: 'Date Picker',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },

package/src/renderers/form/file-upload.tsx

@@ -165,6 +165,7 @@ ComponentRegistry.register('file-upload',
     );
   },
   {
+    namespace: 'ui',
     label: 'File Upload',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },