@object-ui/components 0.3.1 → 2.0.0

package/src/renderers/form/form.tsx

@@ -14,6 +14,7 @@ import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
 import { Textarea } from '../../ui/textarea';
 import { Checkbox } from '../../ui/checkbox';
+import { Switch } from '../../ui/switch';
 import { 
   Select, 
   SelectTrigger, 
@@ -36,10 +37,12 @@ ComponentRegistry.register('form',
       submitLabel = 'Submit',
       cancelLabel = 'Cancel',
       showCancel = false,
+      showSubmit = true,
       layout = 'vertical',
       columns = 1,
       onSubmit: onSubmitProp,
       onChange: onChangeProp,
+      onCancel: onCancelProp,
       resetOnSubmit = false,
       validationMode = 'onSubmit',
       disabled = false,
@@ -54,6 +57,11 @@ ComponentRegistry.register('form',
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const [submitError, setSubmitError] = React.useState<string | null>(null);
 
+    // React to defaultValues changes
+    React.useEffect(() => {
+      form.reset(defaultValues);
+    }, [defaultValues]);
+
     // Watch for form changes - only track changes when onAction is available
     React.useEffect(() => {
       if (onAction) {
@@ -73,12 +81,34 @@ ComponentRegistry.register('form',
       setIsSubmitting(true);
       setSubmitError(null);
 
+      // Defensive check: If data is an Event, use getValues()
+      let formData = data;
+      // Check for Event-like properties
+      const isEvent = data && (
+        (data as any).nativeEvent || 
+        typeof (data as any).preventDefault === 'function' || 
+        typeof (data as any).stopPropagation === 'function' ||
+        (data as any).target ||
+        (data as any).bubbles
+      );
+
+      if (isEvent) {
+        // This should not happen with RHF handleSubmit, but just in case
+        formData = form.getValues();
+      } else if (!formData || Object.keys(formData).length === 0) {
+        // Fallback: if data is empty check getValues(), in case RHF failed to pass it for some reason
+        const values = form.getValues();
+        if (values && Object.keys(values).length > 0) {
+             formData = values;
+        }
+      }
+
       try {
         if (onAction) {
           const result = await onAction({
             type: 'form_submit',
-            data,
-            formData: data,
+            data: formData,
+            formData: formData,
           }) as any;
 
           // Check if submission returned an error
@@ -89,7 +119,7 @@ ComponentRegistry.register('form',
         }
 
         if (onSubmitProp && typeof onSubmitProp === 'function') {
-          await onSubmitProp(data);
+          await onSubmitProp(formData);
         }
 
         if (resetOnSubmit) {
@@ -117,6 +147,11 @@ ComponentRegistry.register('form',
     // Handle cancel
     const handleCancel = () => {
       form.reset();
+      
+      if (onCancelProp && typeof onCancelProp === 'function') {
+        onCancelProp();
+      }
+
       if (onAction) {
         onAction({
           type: 'form_cancel',
@@ -137,11 +172,21 @@ ComponentRegistry.register('form',
       ? cn('grid gap-4', gridColsClass)
       : 'space-y-4';
 
-    // Extract designer-related props
+    // Extract designer-related props and conflicting handlers
     const { 
         'data-obj-id': dataObjId, 
         'data-obj-type': dataObjType,
-        style, 
+        style,
+        onSubmit: _ignoredOnSubmit, // Prevent overwriting our handleSubmit
+        onChange: _ignoredOnChange, // Prevent overwriting our onChange
+        // Extract schema props that should not be spread to DOM (handled separately by schema destructuring above)
+        submitLabel: _submitLabel,
+        cancelLabel: _cancelLabel,
+        showSubmit: _showSubmit,
+        showCancel: _showCancel,
+        resetOnSubmit: _resetOnSubmit,
+        defaultValues: _defaultValues,
+        inputType: _inputType,
         ...formProps 
     } = props;
 
@@ -183,9 +228,17 @@ ComponentRegistry.register('form',
                   disabled: fieldDisabled = false,
                   validation = {},
                   condition,
+                  colSpan,
+                  hidden,
+                  widget,
+                  visibleOn,
+                  readonly,
                   ...fieldProps
                 } = field;
 
+                // Skip hidden fields
+                if (hidden) return null;
+
                 // Handle conditional rendering with null/undefined safety
                 if (condition) {
                   const watchField = condition.field;
@@ -219,6 +272,17 @@ ComponentRegistry.register('form',
                 // Use field.id or field.name for stable keys (never use index alone)
                 const fieldKey = field.id ?? name;
 
+                // Resolve the component type: prefer widget override, fallback to field type
+                const resolvedType = widget || type;
+
+                // colSpan classes for grid layout
+                const colSpanClass = colSpan && colSpan > 1
+                  ? colSpan === 2 ? 'col-span-2'
+                  : colSpan === 3 ? 'col-span-3'
+                  : colSpan >= 4 ? 'col-span-4'
+                  : ''
+                  : '';
+
                 return (
                   <FormField
                     key={fieldKey}
@@ -226,7 +290,7 @@ ComponentRegistry.register('form',
                     name={name}
                     rules={rules}
                     render={({ field: formField }) => (
-                      <FormItem>
+                      <FormItem className={colSpanClass || undefined}>
                         {label && (
                           <FormLabel>
                             {label}
@@ -238,14 +302,17 @@ ComponentRegistry.register('form',
                           </FormLabel>
                         )}
                         <FormControl>
-                          {/* Render the actual field component based on type */}
-                          {renderFieldComponent(type, {
+                          {/* Render the actual field component based on resolved type */}
+                          {renderFieldComponent(resolvedType, {
                             ...fieldProps,
+                            // specialized fields needs raw metadata, but we should traverse down if it exists
+                            // field is the field configuration loop variable
+                            field: (field as any).field || field, 
                             ...formField,
                             inputType: fieldProps.inputType,
                             options: fieldProps.options,
                             placeholder: fieldProps.placeholder,
-                            disabled: disabled || fieldDisabled || isSubmitting,
+                            disabled: disabled || fieldDisabled || readonly || isSubmitting,
                           })}
                         </FormControl>
                         {description && (
@@ -273,6 +340,7 @@ ComponentRegistry.register('form',
                   {cancelLabel}
                 </Button>
               )}
+              {showSubmit && (
               <Button
                 type="submit"
                 disabled={isSubmitting || disabled}
@@ -280,6 +348,7 @@ ComponentRegistry.register('form',
                 {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 {submitLabel}
               </Button>
+              )}
             </div>
           )}
         </form>
@@ -287,6 +356,7 @@ ComponentRegistry.register('form',
     );
   },
   {
+    namespace: 'ui',
     label: 'Form',
     inputs: [
       { 
@@ -372,26 +442,52 @@ interface RenderFieldProps {
 }
 
 function renderFieldComponent(type: string, props: RenderFieldProps) {
+  // 1. Try to resolve specialized field widget from registry first
+  // We prioritize registry components (e.g., 'field.currency', 'field.date')
+  const RegisteredComponent = ComponentRegistry.get(type);
+
+  if (RegisteredComponent) {
+    // For specialized fields (e.g. fields package), they expect 'field' prop.
+    // Ensure we pass all props.
+    // Also pass 'schema' for standard renderers that expect it
+    return <RegisteredComponent schema={props} {...props} />;
+  }
+
   const { inputType, options = [], placeholder, ...fieldProps } = props;
 
   switch (type) {
     case 'input':
-      return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} />;
-    
+      if (inputType === 'file') {
+        // File inputs cannot be controlled with value prop
+         const { value, ...fileProps } = fieldProps;
+         return <Input type="file" placeholder={placeholder} {...fileProps} />;
+      }
+      return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} value={fieldProps.value ?? ''} />;
+      
     case 'textarea':
-      return <Textarea placeholder={placeholder} {...fieldProps} />;
+      return <Textarea placeholder={placeholder} {...fieldProps} value={fieldProps.value ?? ''} />;
     
     case 'checkbox': {
       // For checkbox, we need to handle the value differently
       const { value, onChange, ...checkboxProps } = fieldProps;
       return (
-        <div className="flex items-center space-x-2">
-          <Checkbox 
-            checked={value}
-            onCheckedChange={onChange}
-            {...checkboxProps}
-          />
-        </div>
+        <Checkbox 
+          checked={value}
+          onCheckedChange={onChange}
+          {...checkboxProps}
+        />
+      );
+    }
+
+    case 'switch': {
+      // For switch, we need to handle the value differently (same as checkbox)
+      const { value, onChange, ...switchProps } = fieldProps;
+      return (
+        <Switch 
+          checked={value}
+          onCheckedChange={onChange}
+          {...switchProps}
+        />
       );
     }
     

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

@@ -38,6 +38,7 @@ ComponentRegistry.register('input-otp',
     );
   },
   {
+    namespace: 'ui',
     label: 'Input OTP',
     inputs: [
       { name: 'maxLength', type: 'number', label: 'Max Length', defaultValue: 6 },

package/src/renderers/form/input.tsx

@@ -63,6 +63,7 @@ const InputRenderer = ({ schema, className, onChange, value, ...props }: { schem
 };
 
 ComponentRegistry.register('input', InputRenderer, {
+    namespace: 'ui',
     label: 'Input Field',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
@@ -88,6 +89,7 @@ ComponentRegistry.register('input', InputRenderer, {
 ComponentRegistry.register('email', 
   (props: any) => <InputRenderer {...props} schema={{ ...props.schema, inputType: 'email' }} />,
   {
+    namespace: 'ui',
     label: 'Email Input',
     icon: 'mail', 
     inputs: [
@@ -104,6 +106,7 @@ ComponentRegistry.register('email',
 ComponentRegistry.register('password', 
   (props: any) => <InputRenderer {...props} schema={{ ...props.schema, inputType: 'password' }} />,
   {
+    namespace: 'ui',
     label: 'Password Input',
     icon: 'lock',
     inputs: [

package/src/renderers/form/label.tsx

@@ -32,6 +32,7 @@ ComponentRegistry.register('label',
     );
   },
   {
+    namespace: 'ui',
     label: 'Label',
     inputs: [
       { name: 'text', type: 'string', label: 'Text', required: true },

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

@@ -38,6 +38,7 @@ ComponentRegistry.register('radio-group',
   );
   },
   {
+    namespace: 'ui',
     label: 'Radio Group',
     inputs: [
       { name: 'defaultValue', type: 'string', label: 'Default Value' },

package/src/renderers/form/select.tsx

@@ -16,44 +16,64 @@ import {
   SelectItem,
   Label
 } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
 
-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;
+const SelectRenderer = ({ schema, className, onChange, value, ...props }: { schema: SelectSchema; 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, 
+      ...selectProps 
+  } = props;
 
-    return (
+  const handleValueChange = (newValue: string) => {
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  return (
     <div 
-        className={`grid w-full max-w-sm items-center gap-1.5 ${schema.wrapperClass || ''}`}
+        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>{schema.label}</Label>}
-      <Select defaultValue={schema.defaultValue} {...selectProps}>
+      {schema.label && <Label className={cn(schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>{schema.label}</Label>}
+      <Select 
+        defaultValue={value === undefined ? schema.defaultValue : undefined} 
+        value={value ?? schema.value}
+        onValueChange={handleValueChange}
+        disabled={schema.disabled}
+        required={schema.required}
+        name={schema.name}
+        {...selectProps}
+      >
         <SelectTrigger className={className}>
           <SelectValue placeholder={schema.placeholder} />
         </SelectTrigger>
         <SelectContent>
           {schema.options?.map((opt) => (
-             <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+             <SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>{opt.label}</SelectItem>
           ))}
         </SelectContent>
       </Select>
     </div>
   );
-  },
+};
+
+ComponentRegistry.register('select', SelectRenderer,
   {
+    namespace: 'ui',
     label: 'Select',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
       { name: 'placeholder', type: 'string', label: 'Placeholder' },
       { name: 'defaultValue', type: 'string', label: 'Default Value' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
       { 
         name: 'options', 
         type: 'array', 

package/src/renderers/form/slider.tsx

@@ -41,6 +41,7 @@ ComponentRegistry.register('slider',
   );
   },
   {
+    namespace: 'ui',
     label: 'Slider',
     inputs: [
       { name: 'defaultValue', type: 'array', label: 'Default Value', defaultValue: [50] },

package/src/renderers/form/switch.tsx

@@ -33,6 +33,7 @@ ComponentRegistry.register('switch',
   );
   },
   {
+    namespace: 'ui',
     label: 'Switch',
     inputs: [
       { name: 'label', type: 'string', label: 'Label', required: true },

package/src/renderers/form/textarea.tsx

@@ -9,45 +9,68 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { TextareaSchema } from '@object-ui/types';
 import { Textarea, Label } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
 
-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;
+const TextareaRenderer = ({ schema, className, onChange, value, ...props }: { schema: TextareaSchema; 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<HTMLTextAreaElement>) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+
+  // Extract designer-related props
+  const { 
+    'data-obj-id': dataObjId, 
+    'data-obj-type': dataObjType,
+    style, 
+    ...inputProps 
+  } = props;
+
+  return (
+    <div 
+      className={cn("grid w-full 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>}
+      <Textarea 
+        id={schema.id} 
+        name={schema.name}
+        placeholder={schema.placeholder} 
+        className={className} 
+        disabled={schema.disabled}
+        readOnly={schema.readOnly}
+        required={schema.required}
+        rows={schema.rows}
+        value={value ?? schema.value ?? ''}
+        defaultValue={value === undefined ? schema.defaultValue : undefined}
+        onChange={handleChange}
+        {...inputProps} 
+      />
+    </div>
+  );
+};
 
-    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>
-    );
-  },
+ComponentRegistry.register('textarea', TextareaRenderer,
   {
+    namespace: 'ui',
     label: 'Textarea',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
       { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'rows', type: 'number', label: 'Rows' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
       { 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
+      rows: 3,
+      id: 'textarea-field'
     }
   }
 );

package/src/renderers/form/toggle.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { ToggleSchema } from '@object-ui/types';
-import { Toggle, ToggleGroup, ToggleGroupItem } from '../../ui';
+import { Toggle } from '../../ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('toggle', 
@@ -24,13 +24,14 @@ ComponentRegistry.register('toggle',
     </Toggle>
   ),
   {
+    namespace: 'ui',
     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' }
+      { name: 'ariaLabel', type: 'string', label: 'Aria Label' }
     ],
     defaultProps: {
       label: 'Toggle',
@@ -39,46 +40,3 @@ ComponentRegistry.register('toggle',
     }
   }
 );
-
-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

@@ -15,3 +15,4 @@ import './feedback';
 import './overlay';
 import './disclosure';
 import './complex';
+import './action';

package/src/renderers/layout/aspect-ratio.tsx

@@ -30,12 +30,13 @@ ComponentRegistry.register('aspect-ratio',
         {schema.image ? (
           <img src={schema.image} alt={schema.alt || ''} className="rounded-md object-cover w-full h-full" />
         ) : (
-          renderChildren(schema.body)
+          renderChildren(schema.children || schema.body)
         )}
       </AspectRatio>
     );
   },
   {
+    namespace: 'ui',
     label: 'Aspect Ratio',
     inputs: [
       { name: 'ratio', type: 'number', label: 'Ratio', defaultValue: 16/9 },

package/src/renderers/layout/card.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { CardSchema } from '@object-ui/types';
-import { renderChildren } from '../../lib/utils';
+import { renderChildren, cn } from '../../lib/utils';
 import {
   Card,
   CardHeader,
@@ -28,11 +28,18 @@ const CardRenderer = forwardRef<HTMLDivElement, { schema: CardSchema; className?
         style, 
         ...cardProps 
     } = props;
+    
+    const isClickable = schema.clickable || !!props.onClick;
+    const isHoverable = schema.hoverable || isClickable;
 
     return (
     <Card 
         ref={ref}
-        className={className} 
+        className={cn(
+          className, 
+          isHoverable && "transition-colors hover:bg-muted/50",
+          isClickable && "cursor-pointer active:bg-muted"
+        )} 
         {...cardProps}
         // Apply designer props
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
@@ -54,6 +61,7 @@ const CardRenderer = forwardRef<HTMLDivElement, { schema: CardSchema; className?
 ComponentRegistry.register('card', 
   CardRenderer,
   {
+    namespace: 'ui',
     label: 'Card',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/layout/container.tsx

@@ -77,6 +77,7 @@ const ContainerRenderer = forwardRef<HTMLDivElement, { schema: ContainerSchema;
 ComponentRegistry.register('container', 
   ContainerRenderer,
   {
+    namespace: 'ui',
     label: 'Container',
     inputs: [
       { 

package/src/renderers/layout/flex.tsx

@@ -76,6 +76,7 @@ ComponentRegistry.register('flex',
     );
   },
   {
+    namespace: 'ui',
     label: 'Flex Layout',
     inputs: [
       {