@object-ui/components 0.3.0 → 0.5.0

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

@@ -0,0 +1,50 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import type { KbdSchema } from '@object-ui/types';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('kbd', 
+  ({ schema, ...props }: { schema: KbdSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...kbdProps
+    } = props;
+    
+    const keys = Array.isArray(schema.keys) ? schema.keys : [schema.keys || schema.label || 'K'];
+    
+    return (
+      <div className={cn('inline-flex flex-wrap gap-1', schema.className)}>
+        {keys.map((key, idx) => (
+          <kbd
+            key={idx}
+            className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+            {...kbdProps}
+            {...(idx === 0 ? { 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style } : {})}
+          >
+            {key}
+          </kbd>
+        ))}
+      </div>
+    );
+  },
+  {
+    namespace: 'ui',
+    label: 'Keyboard Key',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      label: 'K'
+    }
+  }
+);

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

@@ -1,68 +1,47 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 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>
@@ -70,6 +49,7 @@ ComponentRegistry.register('list',
     );
   },
   {
+    namespace: 'ui',
     label: 'List',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

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

@@ -1,76 +1,73 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 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-5 rounded-xl transition-all duration-300 overflow-hidden",
-        "bg-slate-950/40 border border-slate-800/60 backdrop-blur-sm",
-        "hover:bg-slate-900/60 hover:border-cyan-500/50 hover:shadow-[0_0_30px_-10px_rgba(6,182,212,0.3)]", 
+        "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
     )}>
-      {/* Decorative scanner line */}
-      <div className="absolute top-0 left-0 w-full h-[1px] bg-linear-to-r from-transparent via-cyan-500/50 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]" />
-      <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-5 pointer-events-none" />
-
-      {/* Label */}
-      {schema.label && (
-        <div className="flex items-center gap-2 mb-2">
-            <div className="w-1 h-3 bg-cyan-500 rounded-full shadow-[0_0_8px_cyan]" />
-            <p className="text-[10px] font-mono font-bold uppercase tracking-[0.2em] text-cyan-600/80 group-hover:text-cyan-400 transition-colors">
+      {/* 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-3 my-1 relative z-10">
-        <h3 className={cn(
-            "text-4xl font-black tracking-tight text-white transition-all duration-300",
-            "drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]",
-            "group-hover:scale-110 group-hover:text-cyan-100 group-hover:drop-shadow-[0_0_15px_rgba(6,182,212,0.6)] group-hover:-translate-y-1"
-        )}>
+      <div className="flex items-baseline gap-2">
+        <h3 className="text-2xl font-bold tracking-tight">
           {schema.value}
         </h3>
+      </div>
         
-        {/* Trend Indicator */}
-        {schema.trend && (
-            <div className={cn(
-                "flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border backdrop-blur-md transition-all",
-                schema.trend === 'up' && "text-emerald-400 border-emerald-500/30 bg-emerald-950/30 shadow-[0_0_10px_-4px_rgba(52,211,153,0.5)]",
-                schema.trend === 'down' && "text-rose-400 border-rose-500/30 bg-rose-950/30 shadow-[0_0_10px_-4px_rgba(251,113,133,0.5)]",
-                schema.trend === 'neutral' && "text-amber-400 border-amber-500/30 bg-amber-950/30 shadow-[0_0_10px_-4px_rgba(251,191,36,0.5)]",
-                "group-hover:scale-105"
-            )}>
-                 {schema.trend === 'up' && <TrendingUp className="mr-1 h-3 w-3" />}
-                 {schema.trend === 'down' && <TrendingDown className="mr-1 h-3 w-3" />}
+      {/* Footer / Trend */}
+      {(schema.trend || schema.description) && (
+            <div className="mt-1 flex items-center text-xs text-muted-foreground">
+                 {schema.trend === 'up' && <TrendingUp className="mr-1 h-3 w-3 text-emerald-500" />}
+                 {schema.trend === 'down' && <TrendingDown className="mr-1 h-3 w-3 text-rose-500" />}
                  {schema.trend === 'neutral' && <Minus className="mr-1 h-3 w-3" />}
-                 {schema.description && <span className="max-w-[100px] truncate">{schema.description}</span>}
+                 <span className={cn(
+                     schema.trend === 'up' && "text-emerald-500 font-medium",
+                     schema.trend === 'down' && "text-rose-500 font-medium",
+                 )}>
+                    {schema.description}
+                 </span>
             </div>
-        )}
-      </div>
-
-      {/* Footer / Description Text if needed below (optional, mostly handled by trend pill now, but keeping separate if text is long) */}
-      {schema.description && !schema.trend && (
-        <p className="text-xs text-slate-500 font-mono mt-1 group-hover:text-slate-400 transition-colors">
-          {schema.description}
-        </p>
       )}
-      
-      {/* Decorative accent corners */}
-      <div className="absolute right-0 bottom-0 w-8 h-8 opacity-20 group-hover:opacity-100 transition-opacity">
-        <svg viewBox="0 0 24 24" fill="none" className="w-full h-full text-cyan-500" stroke="currentColor" strokeWidth="1">
-            <path d="M22 22L12 22L22 12Z" fill="currentColor" fillOpacity="0.2" />
-            <path d="M22 17L22 22L17 22" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      </div>
     </div>
   );
 };
 
 ComponentRegistry.register('statistic', StatisticRenderer, {
+  namespace: 'ui',
   label: 'Statistic',
   category: 'data-display',
   icon: 'Activity',

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

@@ -0,0 +1,78 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { useDataScope } from '@object-ui/react';
+import { 
+  Table, 
+  TableBody, 
+  TableCell, 
+  TableHead, 
+  TableHeader, 
+  TableRow 
+} from '../../ui/table';
+import { cn } from '../../lib/utils';
+
+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.
+  if (data && !Array.isArray(data)) {
+    return <div className="text-red-500 p-2 border border-red-200 bg-red-50 rounded text-sm">Table data must be an array</div>;
+  }
+  
+  const displayData = Array.isArray(data) ? data : [];
+
+  return (
+    <div className={cn("rounded-md border", className)}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((col: any, index: number) => (
+              <TableHead key={col.key || col.accessorKey || index}>
+                {col.label || col.header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {displayData.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          ) : (
+            displayData.map((row: any, i: number) => (
+              <TableRow key={row.id || i}>
+                {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>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+ComponentRegistry.register('table', SimpleTableRenderer, {
+  namespace: 'ui'
+});

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

@@ -1,17 +1,24 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 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, 
-  onNodeClick,
-  isChild = false
+  onNodeClick
 }: { 
   node: TreeNode; 
   onNodeClick?: (node: TreeNode) => void;
-  isChild?: boolean;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const hasChildren = node.children && node.children.length > 0;
@@ -29,68 +36,56 @@ const TreeNodeComponent = ({
 
   return (
     <div className="relative">
-       {/* Connecting line for siblings (visual aid, tricky to do perfectly without depth context, so we focus on the left border of the container) */}
-       
       <div
         className={cn(
-          'group flex items-center py-1.5 px-2 rounded-sm cursor-pointer transition-all duration-200 border border-transparent',
-          'hover:bg-cyan-950/30 hover:border-cyan-500/20 hover:shadow-[inset_0_0_10px_-5px_cyan]',
-          isOpen && hasChildren && 'bg-slate-900/40' // Active parent state
+          'group flex items-center py-1.5 px-2 rounded-sm cursor-pointer transition-colors',
+          'hover:bg-accent hover:text-accent-foreground',
+          isOpen && hasChildren && 'bg-accent/50' 
         )}
         onClick={handleClick}
       >
-        {/* Indentation adjustment triggered by parent's padding/margin, not calculated prop here to allow CSS lines */}
-        
         {hasChildren ? (
           <button
             onClick={handleToggle}
-            className="mr-2 p-0.5 h-5 w-5 flex items-center justify-center rounded-sm hover:bg-cyan-500/20 text-cyan-600 transition-colors"
+            className="mr-2 p-0.5 h-5 w-5 flex items-center justify-center rounded-sm hover:bg-muted text-muted-foreground transition-colors"
           >
             {isOpen ? (
-              <ChevronDown className="h-4 w-4 drop-shadow-[0_0_5px_cyan]" />
+              <ChevronDown className="h-4 w-4" />
             ) : (
               <ChevronRight className="h-4 w-4" />
             )}
           </button>
         ) : (
           <span className="mr-2 w-5 flex justify-center">
-             <div className="w-1 h-1 rounded-full bg-slate-700/50 group-hover:bg-cyan-500/50" />
+             <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
           </span>
         )}
         
         {node.icon === 'folder' || hasChildren ? (
           isOpen ? 
-            <FolderOpen className="h-4 w-4 mr-2 text-cyan-400 drop-shadow-[0_0_5px_rgba(6,182,212,0.5)]" /> : 
-            <Folder className="h-4 w-4 mr-2 text-cyan-600 group-hover:text-cyan-400 transition-colors" />
+            <FolderOpen className="h-4 w-4 mr-2 text-primary" /> : 
+            <Folder className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-primary transition-colors" />
         ) : (
-          <File className="h-4 w-4 mr-2 text-slate-500 group-hover:text-cyan-200 transition-colors" />
+          <File className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-primary transition-colors" />
         )}
         
         <span className={cn(
-            "text-sm font-mono tracking-wide transition-colors",
-            isOpen ? "text-cyan-100 font-bold shadow-cyan-500/20" : "text-slate-400 group-hover:text-cyan-300"
+            "text-sm transition-colors",
+            isOpen ? "font-medium text-foreground" : "text-muted-foreground group-hover:text-foreground"
         )}>
             {node.label}
         </span>
       </div>
 
-      {/* Children Container with Circuit Line */}
       {hasChildren && isOpen && (
-        <div className="relative ml-[11px] pl-3 border-l border-cyan-800/40 animate-in slide-in-from-left-2 fade-in duration-200">
-           {/* Decorative little bulb at the junction */}
-           <div className="absolute top-0 -left-[1px] -translate-x-1/2 w-1.5 h-1.5 bg-cyan-700/50 rounded-full" />
-           
+        <div className="relative ml-[11px] pl-3 border-l border-border animate-in slide-in-from-left-2 fade-in duration-200">
           {node.children!.map((child) => (
             <TreeNodeComponent
               key={child.id}
               node={child}
               onNodeClick={onNodeClick}
-              isChild={true}
             />
           ))}
-          
-           {/* Decorative end cap */}
-           <div className="absolute bottom-0 -left-[1px] -translate-x-1/2 w-1 h-1 bg-cyan-800/50 rounded-full" />
         </div>
       )}
     </div>
@@ -105,25 +100,24 @@ 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 border-border/60 rounded-lg p-3 bg-card/40 backdrop-blur-md overflow-hidden',
-          'shadow-lg shadow-primary/5',
+          'relative border rounded-lg p-3 bg-card text-card-foreground',
           className
         )} 
         {...props}
       >
-        {/* Background Grid */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--border)/0.1)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border)/0.1)_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
-
         {schema.title && (
-          <div className="flex items-center gap-2 mb-3 pb-2 border-b border-primary/20 relative z-10">
-            <CircuitBoard className="w-4 h-4 text-primary" />
-            <h3 className="text-xs font-bold font-mono uppercase tracking-widest text-primary">{schema.title}</h3>
+          <div className="flex items-center gap-2 mb-3 pb-2 border-b">
+            <h3 className="text-sm font-semibold">{schema.title}</h3>
           </div>
         )}
-        <div className="space-y-1 relative z-10">
-          {schema.nodes?.map((node: TreeNode) => (
+        <div className="space-y-1">
+          {nodes.map((node: TreeNode) => (
             <TreeNodeComponent
               key={node.id}
               node={node}
@@ -135,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

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { AccordionSchema } from '@object-ui/types';
 import { 
@@ -22,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

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { CollapsibleSchema } from '@object-ui/types';
 import { 
@@ -19,6 +27,7 @@ ComponentRegistry.register('collapsible',
     </Collapsible>
   ),
   {
+    namespace: 'ui',
     label: 'Collapsible',
     inputs: [
       { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },

package/src/renderers/disclosure/index.ts

@@ -1,2 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import './accordion';
 import './collapsible';
+import './toggle-group';

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

@@ -0,0 +1,79 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import type { ToggleGroupSchema } from '@object-ui/types';
+import { ToggleGroup, ToggleGroupItem } from '../../ui/toggle-group';
+
+ComponentRegistry.register('toggle-group', 
+  ({ schema, ...props }: { schema: ToggleGroupSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        type, // Extract type to prevent overriding the one we set below
+        ...toggleGroupProps
+    } = props;
+    
+    return (
+      <ToggleGroup 
+        type={(schema.selectionType || 'single') as any}
+        variant={schema.variant}
+        size={schema.size}
+        value={schema.value as any}
+        className={schema.className} 
+        {...toggleGroupProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {schema.items?.map((item, idx) => (
+          <ToggleGroupItem key={idx} value={item.value} aria-label={item.label}>
+            {item.label}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    );
+  },
+  {
+    namespace: 'ui',
+    label: 'Toggle Group',
+    inputs: [
+      { 
+        name: 'selectionType', 
+        type: 'enum', 
+        enum: ['single', 'multiple'], 
+        defaultValue: 'single',
+        label: 'Selection Type'
+      },
+      { 
+        name: 'variant', 
+        type: 'enum', 
+        enum: ['default', 'outline'], 
+        defaultValue: 'default',
+        label: 'Variant'
+      },
+      { 
+        name: 'size', 
+        type: 'enum', 
+        enum: ['default', 'sm', 'lg'], 
+        defaultValue: 'default',
+        label: 'Size'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      selectionType: 'single',
+      variant: 'default',
+      size: 'default',
+      items: [
+        { value: 'bold', label: 'Bold' },
+        { value: 'italic', label: 'Italic' },
+        { value: 'underline', label: 'Underline' }
+      ]
+    }
+  }
+);