@object-ui/components 0.3.1 → 0.5.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;
 
@@ -241,6 +286,9 @@ ComponentRegistry.register('form',
                           {/* Render the actual field component based on type */}
                           {renderFieldComponent(type, {
                             ...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,
@@ -273,6 +321,7 @@ ComponentRegistry.register('form',
                   {cancelLabel}
                 </Button>
               )}
+              {showSubmit && (
               <Button
                 type="submit"
                 disabled={isSubmitting || disabled}
@@ -280,6 +329,7 @@ ComponentRegistry.register('form',
                 {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 {submitLabel}
               </Button>
+              )}
             </div>
           )}
         </form>
@@ -287,6 +337,7 @@ ComponentRegistry.register('form',
     );
   },
   {
+    namespace: 'ui',
     label: 'Form',
     inputs: [
       { 
@@ -372,26 +423,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/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: [
       { 

package/src/renderers/layout/grid.tsx

@@ -50,13 +50,27 @@ const GAPS: Record<number, string> = {
 ComponentRegistry.register('grid', 
   ({ schema, className, ...props }: { schema: GridSchema & { smColumns?: number, mdColumns?: number, lgColumns?: number, xlColumns?: number }; className?: string; [key: string]: any }) => {
     // Determine columns configuration
-    // Supports direct number or responsive object logic if schema allows, 
-    // but here we primarily handle the flat properties supported by the designer inputs
-    const baseCols = typeof schema.columns === 'number' ? schema.columns : 2;
-    const smCols = schema.smColumns;
-    const mdCols = schema.mdColumns;
-    const lgCols = schema.lgColumns;
-    const xlCols = schema.xlColumns;
+    // Supports detailed object configuration from schema
+    let baseCols = 2;
+    let smCols, mdCols, lgCols, xlCols;
+
+    if (typeof schema.columns === 'number') {
+      baseCols = schema.columns;
+    } else if (typeof schema.columns === 'object' && schema.columns !== null) {
+      // Handle responsive object: { xs: 1, sm: 2, md: 3, lg: 4 }
+      // Note: 'xs' corresponds to base (mobile-first)
+      baseCols = schema.columns.xs ?? 1;
+      smCols = schema.columns.sm;
+      mdCols = schema.columns.md;
+      lgCols = schema.columns.lg;
+      xlCols = schema.columns.xl;
+    }
+
+    // Fallback to legacy flat props if provided (from designer)
+    if (schema.smColumns) smCols = schema.smColumns;
+    if (schema.mdColumns) mdCols = schema.mdColumns;
+    if (schema.lgColumns) lgCols = schema.lgColumns;
+    if (schema.xlColumns) xlCols = schema.xlColumns;
 
     const gap = schema.gap ?? 4;
     
@@ -71,7 +85,7 @@ ComponentRegistry.register('grid',
       lgCols && GRID_COLS_LG[lgCols],
       xlCols && GRID_COLS_XL[xlCols],
       // Gap
-      GAPS[gap] || 'gap-4',
+      GAPS[gap] || `gap-[${gap * 0.25}rem]`, // Fallback for arbitrary values if not in map
       className
     );
 
@@ -97,6 +111,7 @@ ComponentRegistry.register('grid',
     );
   },
   {
+    namespace: 'ui',
     label: 'Grid Layout',
     inputs: [
       {