@object-ui/components 0.3.0

package/src/renderers/form/input-otp.tsx

@@ -0,0 +1,31 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { InputOTPSchema } from '@object-ui/types';
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '../../ui';
+
+ComponentRegistry.register('input-otp', 
+  ({ schema, className, ...props }: { schema: InputOTPSchema; className?: string; [key: string]: any }) => (
+    <InputOTP maxLength={schema.length || 6} className={className} {...props}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+  {
+    label: 'Input OTP',
+    inputs: [
+      { name: 'maxLength', type: 'number', label: 'Max Length', defaultValue: 6 },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      maxLength: 6
+    }
+  }
+);

package/src/renderers/form/input.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import type { InputSchema } from '@object-ui/types';
+import { Input, Label } from '../../ui';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('input', 
+  ({ schema, className, onChange, value, ...props }: { schema: InputSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+    
+    // Handle change for both raw inputs and form-bound inputs
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange) {
+        onChange(e.target.value);
+      }
+    };
+
+    // Extract designer-related props to apply to the wrapper
+    // These props are injected by SchemaRenderer for designer interaction
+    const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style, 
+      ...inputProps 
+    } = props;
+
+    return (
+      <div 
+        className={cn("grid w-full items-center gap-1.5", schema.wrapperClass)}
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+        style={style}
+      >
+        {schema.label && <Label htmlFor={schema.id} className={cn(schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>{schema.label}</Label>}
+        <Input 
+          type={schema.inputType || 'text'} 
+          id={schema.id} 
+          name={schema.name}
+          placeholder={schema.placeholder} 
+          className={className}
+          required={schema.required}
+          disabled={schema.disabled}
+          readOnly={schema.readOnly}
+          value={value ?? schema.value ?? ''} // Controlled if value provided
+          defaultValue={value === undefined ? schema.defaultValue : undefined}
+          onChange={handleChange}
+          min={schema.min}
+          max={schema.max}
+          step={schema.step}
+          maxLength={schema.maxLength}
+          pattern={schema.pattern}
+          {...inputProps} 
+        />
+        {schema.description && <p className="text-sm text-muted-foreground">{schema.description}</p>}
+        {schema.error && <p className="text-sm font-medium text-destructive">{schema.error}</p>}
+      </div>
+    );
+  },
+  {
+    label: 'Input Field',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'name', type: 'string', label: 'Field Name' },
+      { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { 
+        name: 'inputType', 
+        type: 'enum', 
+        label: 'Type',
+        enum: ['text', 'email', 'password', 'number', 'tel', 'url', 'date', 'time', 'datetime-local'],
+        defaultValue: 'text'
+      },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
+      { name: 'description', type: 'string', label: 'Description' }
+    ],
+    defaultProps: {
+      inputType: 'text'
+    }
+  }
+);

package/src/renderers/form/label.tsx

@@ -0,0 +1,36 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { LabelSchema } from '@object-ui/types';
+import { Label } from '../../ui';
+
+ComponentRegistry.register('label', 
+  ({ schema, className, ...props }: { schema: LabelSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...labelProps 
+    } = props;
+
+    return (
+      <Label 
+        className={className} 
+        {...labelProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {schema.text || schema.label || schema.content}
+      </Label>
+    );
+  },
+  {
+    label: 'Label',
+    inputs: [
+      { name: 'text', type: 'string', label: 'Text', required: true },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      text: 'Label Text'
+    }
+  }
+);

package/src/renderers/form/radio-group.tsx

@@ -0,0 +1,54 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { RadioGroupSchema } from '@object-ui/types';
+import { RadioGroup, RadioGroupItem, Label } from '../../ui';
+
+ComponentRegistry.register('radio-group', 
+  ({ schema, className, ...props }: { schema: RadioGroupSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...radioProps 
+    } = props;
+
+    return (
+    <RadioGroup 
+        defaultValue={schema.defaultValue} 
+        className={className} 
+        {...radioProps}
+        // Apply designer props to the root element
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    >
+      {schema.options?.map((item) => (
+        <div key={item.value} className="flex items-center space-x-2">
+          <RadioGroupItem value={item.value} id={`${schema.id}-${item.value}`} />
+          <Label htmlFor={`${schema.id}-${item.value}`}>{item.label}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+  },
+  {
+    label: 'Radio Group',
+    inputs: [
+      { name: 'defaultValue', type: 'string', label: 'Default Value' },
+      { name: 'id', type: 'string', label: 'Group ID', required: true },
+      { 
+        name: 'options', 
+        type: 'array', 
+        label: 'Options',
+        description: 'Array of {label, value} objects'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      id: 'radio-group', // Will be made unique by designer's ensureNodeIds
+      options: [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3' }
+      ]
+    }
+  }
+);

package/src/renderers/form/select.tsx

@@ -0,0 +1,66 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { SelectSchema } from '@object-ui/types';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  Label
+} from '../../ui';
+
+ComponentRegistry.register('select', 
+  ({ schema, className, ...props }: { schema: SelectSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...selectProps 
+    } = props;
+
+    return (
+    <div 
+        className={`grid w-full max-w-sm items-center gap-1.5 ${schema.wrapperClass || ''}`}
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+        style={style}
+    >
+      {schema.label && <Label>{schema.label}</Label>}
+      <Select defaultValue={schema.defaultValue} {...selectProps}>
+        <SelectTrigger className={className}>
+          <SelectValue placeholder={schema.placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {schema.options?.map((opt) => (
+             <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+  },
+  {
+    label: 'Select',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'defaultValue', type: 'string', label: 'Default Value' },
+      { 
+        name: 'options', 
+        type: 'array', 
+        label: 'Options',
+        description: 'Array of {label, value} objects'
+      }
+    ],
+    defaultProps: {
+      label: 'Select an option',
+      placeholder: 'Choose...',
+      options: [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3' }
+      ]
+    }
+  }
+);

package/src/renderers/form/slider.tsx

@@ -0,0 +1,45 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { SliderSchema } from '@object-ui/types';
+import { Slider } from '../../ui';
+
+ComponentRegistry.register('slider', 
+  ({ schema, className, ...props }: { schema: SliderSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...sliderProps 
+    } = props;
+
+    return (
+    <Slider 
+      defaultValue={schema.defaultValue} 
+      max={schema.max} 
+      min={schema.min}
+      step={schema.step}
+      className={className} 
+      {...sliderProps} 
+      // Apply designer props
+      {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    />
+  );
+  },
+  {
+    label: 'Slider',
+    inputs: [
+      { name: 'defaultValue', type: 'array', label: 'Default Value', defaultValue: [50] },
+      { name: 'max', type: 'number', label: 'Max', defaultValue: 100 },
+      { name: 'min', type: 'number', label: 'Min', defaultValue: 0 },
+      { name: 'step', type: 'number', label: 'Step', defaultValue: 1 },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      defaultValue: [50],
+      max: 100,
+      min: 0,
+      step: 1,
+      className: 'w-full'
+    }
+  }
+);

package/src/renderers/form/switch.tsx

@@ -0,0 +1,39 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { SwitchSchema } from '@object-ui/types';
+import { Switch, Label } from '../../ui';
+
+ComponentRegistry.register('switch', 
+  ({ schema, className, ...props }: { schema: SwitchSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...switchProps 
+    } = props;
+
+    return (
+    <div 
+        className={`flex items-center space-x-2 ${schema.wrapperClass || ''}`}
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+        style={style}
+    >
+      <Switch id={schema.id} className={className} {...switchProps} />
+      <Label htmlFor={schema.id}>{schema.label}</Label>
+    </div>
+  );
+  },
+  {
+    label: 'Switch',
+    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: 'Switch label',
+      id: 'switch-field' // Will be made unique by designer's ensureNodeIds
+    }
+  }
+);

package/src/renderers/form/textarea.tsx

@@ -0,0 +1,45 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { TextareaSchema } from '@object-ui/types';
+import { Textarea, Label } from '../../ui';
+
+ComponentRegistry.register('textarea', 
+  ({ schema, className, ...props }: { schema: TextareaSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style, 
+      ...inputProps 
+    } = props;
+
+    return (
+      <div 
+        className={`grid w-full gap-1.5 ${schema.wrapperClass || ''}`}
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+        style={style}
+      >
+        {schema.label && <Label htmlFor={schema.id}>{schema.label}</Label>}
+        <Textarea 
+          id={schema.id} 
+          placeholder={schema.placeholder} 
+          className={className} 
+          {...inputProps} 
+        />
+      </div>
+    );
+  },
+  {
+    label: 'Textarea',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'id', type: 'string', label: 'ID', required: true }
+    ],
+    defaultProps: {
+      label: 'Textarea label',
+      placeholder: 'Enter text here...',
+      id: 'textarea-field' // Will be made unique by designer's ensureNodeIds
+    }
+  }
+);

package/src/renderers/form/toggle.tsx

@@ -0,0 +1,76 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { ToggleSchema } from '@object-ui/types';
+import { Toggle, ToggleGroup, ToggleGroupItem } from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('toggle', 
+  ({ schema, ...props }: { schema: ToggleSchema; [key: string]: any }) => (
+    <Toggle 
+      variant={schema.variant} 
+      size={schema.size} 
+      pressed={schema.pressed}
+      aria-label={schema.ariaLabel}
+      {...props}
+    >
+      {schema.label || renderChildren(schema.children)}
+    </Toggle>
+  ),
+  {
+    label: 'Toggle',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'pressed', type: 'boolean', label: 'Pressed' },
+      { name: 'variant', type: 'enum', enum: ['default', 'outline'], defaultValue: 'default', label: 'Variant' },
+      { name: 'size', type: 'enum', enum: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' },
+         { name: 'ariaLabel', type: 'string', label: 'Aria Label' }
+    ],
+    defaultProps: {
+      label: 'Toggle',
+      variant: 'default',
+      size: 'default'
+    }
+  }
+);
+
+ComponentRegistry.register('toggle-group', 
+  ({ schema, className, ...props }) => (
+    <ToggleGroup 
+      type={schema.groupType || 'single'} 
+      variant={schema.variant} 
+      size={schema.size} 
+      className={className}
+      {...props}
+    >
+      {schema.items?.map((item: any) => (
+        <ToggleGroupItem key={item.value} value={item.value} aria-label={item.label}>
+          {item.icon || item.label}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  ),
+  {
+    label: 'Toggle Group',
+    inputs: [
+      { name: 'groupType', type: 'enum', enum: ['single', 'multiple'], defaultValue: 'single', label: '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: 'items', 
+        type: 'array', 
+        label: 'Items',
+        description: 'Array of {label, value, icon?} objects'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      groupType: 'single',
+      variant: 'default',
+      size: 'default',
+      items: [
+        { label: 'A', value: 'a' },
+        { label: 'B', value: 'b' },
+        { label: 'C', value: 'c' }
+      ]
+    }
+  }
+);

package/src/renderers/index.ts

@@ -0,0 +1,9 @@
+import './basic';
+import './form';
+import './layout';
+import './navigation';
+import './data-display';
+import './feedback';
+import './overlay';
+import './disclosure';
+import './complex';

package/src/renderers/layout/card.tsx

@@ -0,0 +1,69 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { CardSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter
+} from '../../ui';
+import { forwardRef } from 'react';
+
+const CardRenderer = forwardRef<HTMLDivElement, { schema: CardSchema; className?: string; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...cardProps 
+    } = props;
+
+    return (
+    <Card 
+        ref={ref}
+        className={className} 
+        {...cardProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    >
+      {(schema.title || schema.description || schema.header) && (
+        <CardHeader>
+          {schema.title && <CardTitle>{schema.title}</CardTitle>}
+          {schema.description && <CardDescription>{schema.description}</CardDescription>}
+          {schema.header && renderChildren(schema.header)}
+        </CardHeader>
+      )}
+      {(schema.children || schema.body) && <CardContent>{renderChildren(schema.children || schema.body)}</CardContent>}
+      {schema.footer && <CardFooter className="flex justify-between">{renderChildren(schema.footer)}</CardFooter>}
+    </Card>
+    );
+  }
+);
+
+ComponentRegistry.register('card', 
+  CardRenderer,
+  {
+    label: 'Card',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      title: 'Card Title',
+      description: 'Card description goes here',
+      className: 'w-full'
+    },
+    isContainer: true,
+    resizable: true,
+    resizeConstraints: {
+      width: true,
+      height: true,
+      minWidth: 200,
+      minHeight: 100
+    }
+  }
+);

package/src/renderers/layout/container.tsx

@@ -0,0 +1,113 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { ContainerSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import { cn } from '../../lib/utils';
+import { forwardRef } from 'react';
+
+const ContainerRenderer = forwardRef<HTMLDivElement, { schema: ContainerSchema; className?: string; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    const maxWidth = (schema.maxWidth || 'xl') as any;
+    const padding = schema.padding || 4;
+    const centered = schema.centered !== false; // Default to true
+    
+    const containerClass = cn(
+      // Base container
+      'w-full',
+      // Max width
+      maxWidth === 'sm' && 'max-w-sm',
+      maxWidth === 'md' && 'max-w-md',
+      maxWidth === 'lg' && 'max-w-lg',
+      maxWidth === 'xl' && 'max-w-xl',
+      maxWidth === '2xl' && 'max-w-2xl',
+      maxWidth === '3xl' && 'max-w-3xl',
+      maxWidth === '4xl' && 'max-w-4xl',
+      maxWidth === '5xl' && 'max-w-5xl',
+      maxWidth === '6xl' && 'max-w-6xl',
+      maxWidth === '7xl' && 'max-w-7xl',
+      maxWidth === 'full' && 'max-w-full',
+      maxWidth === 'screen' && 'max-w-screen-2xl',
+      // Centering
+      centered && 'mx-auto',
+      // Padding
+      padding === 0 && 'p-0',
+      padding === 1 && 'p-1',
+      padding === 2 && 'p-2',
+      padding === 3 && 'p-3',
+      padding === 4 && 'p-4',
+      padding === 5 && 'p-5',
+      padding === 6 && 'p-6',
+      padding === 7 && 'p-7',
+      padding === 8 && 'p-8',
+      padding === 10 && 'p-10',
+      padding === 12 && 'p-12',
+      padding === 16 && 'p-16',
+      className
+    );
+
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...containerProps 
+    } = props;
+
+    return (
+      <div 
+        ref={ref}
+        className={containerClass} 
+        {...containerProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {schema.children && renderChildren(schema.children)}
+      </div>
+    );
+  }
+);
+
+ComponentRegistry.register('container', 
+  ContainerRenderer,
+  {
+    label: 'Container',
+    inputs: [
+      { 
+        name: 'maxWidth', 
+        type: 'enum', 
+        enum: ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full', 'screen'],
+        label: 'Max Width',
+        defaultValue: 'xl'
+      },
+      { 
+        name: 'padding', 
+        type: 'number', 
+        label: 'Padding', 
+        defaultValue: 4,
+        description: 'Padding value (0, 1-8, 10, 12, 16)'
+      },
+      { 
+        name: 'centered', 
+        type: 'boolean', 
+        label: 'Center Horizontally', 
+        defaultValue: true
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      maxWidth: 'xl',
+      padding: 4,
+      centered: true,
+      children: [
+        { type: 'text', content: 'Container content goes here' }
+      ]
+    },
+    isContainer: true,
+    resizable: true,
+    resizeConstraints: {
+      width: true,
+      height: true,
+      minWidth: 200,
+      minHeight: 100
+    }
+  }
+);