@object-ui/components 0.3.0

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

@@ -0,0 +1,98 @@
+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';
+
+const StatisticRenderer = ({ schema }: { schema: StatisticSchema }) => {
+  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)]", 
+        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">
+            {schema.label}
+            </p>
+        </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"
+        )}>
+          {schema.value}
+        </h3>
+        
+        {/* 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" />}
+                 {schema.trend === 'neutral' && <Minus className="mr-1 h-3 w-3" />}
+                 {schema.description && <span className="max-w-[100px] truncate">{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, {
+  label: 'Statistic',
+  category: 'data-display',
+  icon: 'Activity',
+  inputs: [
+    { name: 'label', type: 'string', label: 'Label' },
+    { name: 'value', type: 'string', label: 'Value' },
+    { name: 'description', type: 'string', label: 'Description' },
+    { 
+      name: 'trend', 
+      type: 'enum', 
+      enum: [
+        { label: 'Up', value: 'up' },
+        { label: 'Down', value: 'down' },
+        { label: 'Neutral', value: 'neutral' }
+      ], 
+      label: 'Trend' 
+    }
+  ],
+  defaultProps: {
+    label: 'Total Revenue',
+    value: '$45,231.89',
+    trend: 'up',
+    description: '+20.1% from last month'
+  }
+});

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

@@ -0,0 +1,180 @@
+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';
+
+const TreeNodeComponent = ({ 
+  node, 
+  onNodeClick,
+  isChild = false
+}: { 
+  node: TreeNode; 
+  onNodeClick?: (node: TreeNode) => void;
+  isChild?: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const hasChildren = node.children && node.children.length > 0;
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpen(!isOpen);
+  };
+
+  const handleClick = () => {
+    if (onNodeClick) {
+      onNodeClick(node);
+    }
+  };
+
+  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
+        )}
+        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"
+          >
+            {isOpen ? (
+              <ChevronDown className="h-4 w-4 drop-shadow-[0_0_5px_cyan]" />
+            ) : (
+              <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" />
+          </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" />
+        ) : (
+          <File className="h-4 w-4 mr-2 text-slate-500 group-hover:text-cyan-200 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"
+        )}>
+            {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" />
+           
+          {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>
+  );
+};
+
+ComponentRegistry.register('tree-view', 
+  ({ schema, className, ...props }) => {
+    const handleNodeClick = (node: TreeNode) => {
+      if (schema.onNodeClick) {
+        schema.onNodeClick(node);
+      }
+    };
+
+    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',
+          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>
+        )}
+        <div className="space-y-1 relative z-10">
+          {schema.nodes?.map((node: TreeNode) => (
+            <TreeNodeComponent
+              key={node.id}
+              node={node}
+              onNodeClick={handleNodeClick}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  },
+  {
+    label: 'Tree View',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { 
+        name: 'nodes', 
+        type: 'array', 
+        label: 'Tree Nodes',
+        description: 'Array of { id, label, icon, children, data }'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      title: 'File Explorer',
+      nodes: [
+        {
+          id: '1',
+          label: 'Documents',
+          icon: 'folder',
+          children: [
+            { id: '1-1', label: 'Resume.pdf', icon: 'file' },
+            { id: '1-2', label: 'Cover Letter.docx', icon: 'file' }
+          ]
+        },
+        {
+          id: '2',
+          label: 'Photos',
+          icon: 'folder',
+          children: [
+            { id: '2-1', label: 'Vacation', icon: 'folder', children: [
+              { id: '2-1-1', label: 'Beach.jpg', icon: 'file' }
+            ]},
+            { id: '2-2', label: 'Family.jpg', icon: 'file' }
+          ]
+        },
+        {
+          id: '3',
+          label: 'README.md',
+          icon: 'file'
+        }
+      ]
+    }
+  }
+);

package/src/renderers/disclosure/accordion.tsx

@@ -0,0 +1,60 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { AccordionSchema } from '@object-ui/types';
+import { 
+  Accordion, 
+  AccordionItem, 
+  AccordionTrigger, 
+  AccordionContent 
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('accordion', 
+  ({ 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, index: number) => (
+        <AccordionItem key={item.value || index} value={item.value || `item-${index}`}>
+          <AccordionTrigger>{item.title}</AccordionTrigger>
+          <AccordionContent>
+            {renderChildren(item.content)}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  ),
+  {
+    label: 'Accordion',
+    inputs: [
+      { name: 'accordionType', type: 'enum', enum: ['single', 'multiple'], defaultValue: 'single', label: 'Type' },
+      { name: 'collapsible', type: 'boolean', label: 'Collapsible (for single type)' },
+       { 
+        name: 'items', 
+        type: 'array', 
+        label: 'Items',
+        description: 'Array of { trigger, content, value }'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      accordionType: 'single',
+      collapsible: true,
+      items: [
+        { 
+          label: 'Item 1', 
+          value: 'item-1', 
+          content: [{ type: 'text', content: 'Content for item 1' }] 
+        },
+        { 
+          label: 'Item 2', 
+          value: 'item-2', 
+          content: [{ type: 'text', content: 'Content for item 2' }] 
+        },
+        { 
+          label: 'Item 3', 
+          value: 'item-3', 
+          content: [{ type: 'text', content: 'Content for item 3' }] 
+        }
+      ],
+      className: 'w-full'
+    }
+  }
+);

package/src/renderers/disclosure/collapsible.tsx

@@ -0,0 +1,44 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { CollapsibleSchema } from '@object-ui/types';
+import { 
+  Collapsible, 
+  CollapsibleTrigger, 
+  CollapsibleContent 
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('collapsible', 
+  ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
+    <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
+       <CollapsibleTrigger asChild>
+         {renderChildren(schema.trigger)}
+       </CollapsibleTrigger>
+       <CollapsibleContent>
+         {renderChildren(schema.content)}
+       </CollapsibleContent>
+    </Collapsible>
+  ),
+  {
+    label: 'Collapsible',
+    inputs: [
+      { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
+       { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger' 
+      },
+      { 
+        name: 'content', 
+        type: 'slot', 
+        label: 'Content' 
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      trigger: [{ type: 'button', label: 'Toggle', variant: 'outline' }],
+      content: [{ type: 'text', content: 'Collapsible content goes here' }],
+      className: 'w-full'
+    }
+  }
+);

package/src/renderers/disclosure/index.ts

@@ -0,0 +1,2 @@
+import './accordion';
+import './collapsible';

package/src/renderers/feedback/index.ts

@@ -0,0 +1,4 @@
+import './progress';
+import './skeleton';
+import './toaster';
+import './loading';

package/src/renderers/feedback/loading.tsx

@@ -0,0 +1,69 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { LoadingSchema } from '@object-ui/types';
+import { Spinner } from '../../ui';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('loading', 
+  ({ schema, className, ...props }: { schema: LoadingSchema; className?: string; [key: string]: any }) => {
+    const size = schema.size || 'md';
+    const fullscreen = schema.fullscreen || false;
+    
+    const loadingContent = (
+      <div className={cn('flex flex-col items-center justify-center gap-2', className)}>
+        <Spinner 
+          className={cn(
+            size === 'sm' && 'h-4 w-4',
+            size === 'md' && 'h-8 w-8',
+            size === 'lg' && 'h-12 w-12',
+            size === ('xl' as any) && 'h-16 w-16'
+          )}
+        />
+        {schema.text && (
+          <p className="text-sm text-muted-foreground">{schema.text}</p>
+        )}
+      </div>
+    );
+
+    if (fullscreen) {
+      return (
+        <div 
+          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
+          {...props}
+        >
+          {loadingContent}
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex items-center justify-center p-8" {...props}>
+        {loadingContent}
+      </div>
+    );
+  },
+  {
+    label: 'Loading',
+    inputs: [
+      { name: 'text', type: 'string', label: 'Loading Text' },
+      { 
+        name: 'size', 
+        type: 'enum', 
+        enum: ['sm', 'md', 'lg', 'xl'],
+        label: 'Size',
+        defaultValue: 'md'
+      },
+      { 
+        name: 'fullscreen', 
+        type: 'boolean', 
+        label: 'Fullscreen Overlay', 
+        defaultValue: false
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      text: 'Loading...',
+      size: 'md',
+      fullscreen: false
+    }
+  }
+);

package/src/renderers/feedback/progress.tsx

@@ -0,0 +1,20 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { ProgressSchema } from '@object-ui/types';
+import { Progress } from '../../ui';
+
+ComponentRegistry.register('progress', 
+  ({ schema, className, ...props }: { schema: ProgressSchema; className?: string; [key: string]: any }) => (
+    <Progress value={schema.value} className={className} {...props} />
+  ),
+  {
+    label: 'Progress',
+    inputs: [
+      { name: 'value', type: 'number', label: 'Value', defaultValue: 0 },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      value: 50,
+      className: 'w-full'
+    }
+  }
+);

package/src/renderers/feedback/skeleton.tsx

@@ -0,0 +1,22 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { SkeletonSchema } from '@object-ui/types';
+import { Skeleton } from '../../ui';
+
+ComponentRegistry.register('skeleton', 
+  ({ schema, className, ...props }: { schema: SkeletonSchema; className?: string; [key: string]: any }) => (
+    <Skeleton className={className} {...props} style={{ width: schema.width, height: schema.height }} />
+  ),
+  {
+    label: 'Skeleton',
+    inputs: [
+      { name: 'width', type: 'string', label: 'Width' },
+      { name: 'height', type: 'string', label: 'Height' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      width: '100%',
+      height: '20px',
+      className: 'rounded-md'
+    }
+  }
+);

package/src/renderers/feedback/toaster.tsx

@@ -0,0 +1,26 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { ToasterSchema } from '@object-ui/types';
+import { Toaster as SonnerToaster } from '../../ui';
+import { Toaster as DefaultToaster } from '../../ui'; 
+// Note: In shadcn/ui typical setup, Toaster is exported from 'components/ui/toaster' and 'components/ui/sonner'.
+// But in @object-ui/ui index.tsx, we need to check if they are exported.
+// Assuming they are exported as Toaster and Sonner (or similar).
+// Let's assume standard exports.
+
+ComponentRegistry.register('toaster', 
+  ({ schema }: { schema: ToasterSchema }) => {
+    if (schema.provider === 'sonner') {
+        return <SonnerToaster />;
+    }
+    return <DefaultToaster />;
+  },
+  {
+    label: 'Toaster',
+    inputs: [
+      { name: 'provider', type: 'enum', enum: ['default', 'sonner'], defaultValue: 'default', label: 'Provider' }
+    ],
+    defaultProps: {
+      provider: 'default'
+    }
+  }
+);

package/src/renderers/form/button.tsx

@@ -0,0 +1,61 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { ButtonSchema } from '@object-ui/types';
+import { Button } from '../../ui';
+import { renderChildren } from '../../lib/utils';
+import { forwardRef } from 'react';
+
+const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema; [key: string]: any }>(
+  ({ schema, ...props }, ref) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...buttonProps 
+    } = props;
+
+    return (
+    <Button 
+        ref={ref}
+        variant={schema.variant} 
+        size={schema.size} 
+        className={schema.className} 
+        {...buttonProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    >
+      {schema.label || renderChildren(schema.body)}
+    </Button>
+  );
+  }
+);
+ButtonRenderer.displayName = 'ButtonRenderer';
+
+ComponentRegistry.register('button', ButtonRenderer,
+  {
+    label: 'Button',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label', defaultValue: 'Button' },
+      { 
+        name: 'variant', 
+        type: 'enum', 
+        label: 'Variant',
+        enum: ['default', 'secondary', 'destructive', 'outline', 'ghost', 'link'],
+        defaultValue: 'default'
+      },
+      {
+        name: 'size',
+        type: 'enum',
+        label: 'Size',
+        enum: ['default', 'sm', 'lg', 'icon'],
+        defaultValue: 'default'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class', advanced: true }
+    ],
+    defaultProps: {
+      label: 'Button',
+      variant: 'default',
+      size: 'default'
+    }
+  }
+);

package/src/renderers/form/calendar.tsx

@@ -0,0 +1,25 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { CalendarSchema } from '@object-ui/types';
+import { Calendar } from '../../ui';
+
+ComponentRegistry.register('calendar', 
+  ({ schema, className, ...props }: { schema: CalendarSchema; className?: string; [key: string]: any }) => (
+    <Calendar
+      mode={(schema.mode || "single") as any}
+      selected={(schema.value || schema.defaultValue) as any}
+      className={className}
+      {...props}
+    />
+  ),
+  {
+    label: 'Calendar',
+    inputs: [
+      { name: 'mode', type: 'enum', enum: ['default', 'single', 'multiple', 'range'], defaultValue: 'single', label: 'Mode' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      mode: 'single',
+      className: 'rounded-md border'
+    }
+  }
+);

package/src/renderers/form/checkbox.tsx

@@ -0,0 +1,41 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { CheckboxSchema } from '@object-ui/types';
+import { Checkbox, Label } from '../../ui';
+
+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;
+
+    return (
+    <div 
+        className={`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">
+        {schema.label}
+      </Label>
+    </div>
+  );
+  },
+  {
+    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' }
+    ],
+    defaultProps: {
+      label: 'Checkbox label',
+      id: 'checkbox-field' // Will be made unique by designer's ensureNodeIds
+    }
+  }
+);