@object-ui/fields 0.3.0

package/src/widgets/BooleanField.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Switch, Checkbox, Label } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+export function BooleanField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<boolean>) {
+  if (readonly) {
+    return <span className="text-sm">{value ? 'Yes' : 'No'}</span>;
+  }
+
+  // Use simple type assertion for arbitrary custom properties not in BaseFieldMetadata
+  const widget = (field as any).widget;
+
+  if (widget === 'checkbox') {
+     return (
+        <div className="flex items-center space-x-2">
+            <Checkbox 
+                id={field.name}
+                checked={!!value}
+                onCheckedChange={(checked) => onChange(!!checked)}
+                disabled={readonly}
+                className={props.className}
+            />
+            <Label htmlFor={field.name}>{field.label}</Label>
+        </div>
+     )
+  }
+
+  return (
+    <div className="flex items-center space-x-2">
+        <Switch 
+            id={field.name} 
+            checked={!!value} 
+            onCheckedChange={onChange}
+            disabled={readonly}
+            className={props.className}
+        />
+        <Label htmlFor={field.name}>{field.label}</Label>
+    </div>
+  );
+}

package/src/widgets/CurrencyField.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Format currency value for display
+ */
+function formatCurrency(value: number, currency: string = 'USD'): string {
+  try {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency,
+    }).format(value);
+  } catch {
+    return `${currency} ${value.toFixed(2)}`;
+  }
+}
+
+export function CurrencyField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<number>) {
+  const currencyField = field as any;
+  const currency = currencyField.currency || 'USD';
+  const precision = currencyField.precision ?? 2;
+
+  if (readonly) {
+    if (value == null) return <span className="text-sm">-</span>;
+    return (
+      <span className="text-sm font-medium tabular-nums">
+        {formatCurrency(Number(value), currency)}
+      </span>
+    );
+  }
+
+  // Parse and format on blur to ensure valid currency format
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const val = parseFloat(e.target.value);
+    if (!isNaN(val)) {
+      onChange(parseFloat(val.toFixed(precision)));
+    }
+  };
+
+  return (
+    <div className="relative">
+      <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
+        {currency === 'USD' ? '$' : currency}
+      </span>
+      <Input
+        type="number"
+        value={value ?? ''}
+        onChange={(e) => {
+          const val = e.target.value === '' ? null : parseFloat(e.target.value);
+          onChange(val as any);
+        }}
+        onBlur={handleBlur}
+        placeholder={field.placeholder || '0.00'}
+        disabled={readonly}
+        className={`pl-8 ${props.className || ''}`}
+        step={Math.pow(10, -precision).toFixed(precision)}
+        aria-invalid={!!errorMessage}
+      />
+    </div>
+  );
+}

package/src/widgets/DateField.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+export function DateField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  if (readonly) {
+    return <span className="text-sm">{value ? new Date(value).toLocaleDateString() : '-'}</span>;
+  }
+
+  return (
+    <Input
+      type="date"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={readonly}
+      className={props.className}
+    />
+  );
+}

package/src/widgets/EmailField.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+export function EmailField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+  if (readonly) {
+    if (!value) return <span className="text-sm">-</span>;
+    return (
+      <a 
+        href={`mailto:${value}`}
+        className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
+      >
+        {value}
+      </a>
+    );
+  }
+
+  return (
+    <Input
+      type="email"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={field.placeholder || 'email@example.com'}
+      disabled={readonly}
+      className={props.className}
+      aria-invalid={!!errorMessage}
+    />
+  );
+}

package/src/widgets/LookupField.tsx

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { 
+  Button, 
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Badge
+} from '@object-ui/components';
+import { Search, X } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+interface LookupOption {
+  value: string | number;
+  label: string;
+  [key: string]: any;
+}
+
+/**
+ * Lookup field for selecting related records
+ * Supports single and multi-select with search
+ */
+export function LookupField({ value, onChange, field, readonly }: FieldWidgetProps<any>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const lookupField = field as any;
+  const options: LookupOption[] = lookupField.options || [];
+  const multiple = lookupField.multiple || false;
+  const displayField = lookupField.display_field || 'label';
+
+  // Filter options based on search
+  const filteredOptions = options.filter(opt =>
+    opt.label.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Get selected option(s)
+  const selectedOptions = multiple
+    ? (Array.isArray(value) ? value : []).map(v => 
+        options.find(opt => opt.value === v)
+      ).filter(Boolean)
+    : value ? [options.find(opt => opt.value === value)].filter(Boolean) : [];
+
+  const handleSelect = (option: LookupOption) => {
+    if (multiple) {
+      const currentValues = Array.isArray(value) ? value : [];
+      const isSelected = currentValues.includes(option.value);
+      
+      if (isSelected) {
+        onChange(currentValues.filter(v => v !== option.value));
+      } else {
+        onChange([...currentValues, option.value]);
+      }
+    } else {
+      onChange(option.value);
+      setIsOpen(false);
+    }
+  };
+
+  const handleRemove = (optionValue: any) => {
+    if (multiple) {
+      const currentValues = Array.isArray(value) ? value : [];
+      onChange(currentValues.filter(v => v !== optionValue));
+    } else {
+      onChange(null);
+    }
+  };
+
+  if (readonly) {
+    if (!selectedOptions.length) {
+      return <span className="text-sm">-</span>;
+    }
+
+    if (multiple) {
+      return (
+        <div className="flex flex-wrap gap-1">
+          {selectedOptions.map((opt, idx) => (
+            <Badge key={idx} variant="outline">
+              {opt?.[displayField] || opt?.label}
+            </Badge>
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <span className="text-sm">
+        {selectedOptions[0]?.[displayField] || selectedOptions[0]?.label}
+      </span>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* Selected values display */}
+      {selectedOptions.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {selectedOptions.map((opt, idx) => (
+            <Badge 
+              key={idx} 
+              variant="outline"
+              className="gap-1"
+            >
+              {opt?.[displayField] || opt?.label}
+              <button
+                onClick={() => handleRemove(opt?.value)}
+                className="ml-1 hover:text-destructive"
+                type="button"
+                aria-label={`Remove ${opt?.[displayField] || opt?.label}`}
+              >
+                <X className="size-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {/* Lookup dialog trigger */}
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTrigger asChild>
+          <Button 
+            variant="outline" 
+            className="w-full justify-start text-left font-normal"
+            type="button"
+          >
+            <Search className="mr-2 size-4" />
+            {selectedOptions.length === 0 
+              ? field.placeholder || 'Select...'
+              : multiple ? `${selectedOptions.length} selected` : 'Change selection'
+            }
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {field.label || 'Select'} {multiple && '(multiple)'}
+            </DialogTitle>
+          </DialogHeader>
+          
+          {/* Search input */}
+          <div className="space-y-4">
+            <Input
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full"
+            />
+
+            {/* Options list */}
+            <div className="max-h-64 overflow-y-auto space-y-1">
+              {filteredOptions.length === 0 ? (
+                <p className="text-sm text-gray-500 text-center py-4">
+                  No options found
+                </p>
+              ) : (
+                filteredOptions.map((option) => {
+                  const isSelected = multiple
+                    ? (Array.isArray(value) ? value : []).includes(option.value)
+                    : value === option.value;
+
+                  return (
+                    <button
+                      key={option.value}
+                      onClick={() => handleSelect(option)}
+                      className={`w-full text-left px-3 py-2 rounded-md text-sm hover:bg-gray-100 flex items-center justify-between ${
+                        isSelected ? 'bg-blue-50 text-blue-700' : ''
+                      }`}
+                      type="button"
+                    >
+                      <span>{option.label}</span>
+                      {isSelected && (
+                        <Badge variant="default" className="ml-2">Selected</Badge>
+                      )}
+                    </button>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/widgets/NumberField.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { NumberFieldMetadata } from '@object-ui/types';
+import { FieldWidgetProps } from './types';
+
+export function NumberField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<number>) {
+  if (readonly) {
+    return <span className="text-sm">{value ?? '-'}</span>;
+  }
+
+  const precision = (field as unknown as NumberFieldMetadata).precision;
+
+  return (
+    <Input
+      type="number"
+      value={value ?? ''}
+      onChange={(e) => {
+        const val = e.target.value;
+        onChange(val === '' ? (null as any) : Number(val));
+      }}
+      placeholder={field.placeholder}
+      disabled={readonly}
+      step={precision ? Math.pow(10, -precision) : 'any'}
+      className={props.className}
+    />
+  );
+}

package/src/widgets/PhoneField.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+export function PhoneField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+  if (readonly) {
+    if (!value) return <span className="text-sm">-</span>;
+    return (
+      <a 
+        href={`tel:${value}`}
+        className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
+      >
+        {value}
+      </a>
+    );
+  }
+
+  return (
+    <Input
+      type="tel"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={field.placeholder || '(555) 123-4567'}
+      disabled={readonly}
+      className={props.className}
+      aria-invalid={!!errorMessage}
+    />
+  );
+}

package/src/widgets/RichTextField.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Textarea } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Rich text field with markdown/HTML support
+ * For now, this is a simple textarea. A full implementation would use
+ * a rich text editor like TipTap, Lexical, or Slate.
+ */
+export function RichTextField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+  if (readonly) {
+    return (
+      <div 
+        className="text-sm prose prose-sm max-w-none"
+      >
+        {value || '-'}
+      </div>
+    );
+  }
+
+  const richField = field as any;
+  const rows = richField.rows || 8;
+  const format = richField.format || 'markdown'; // 'markdown' or 'html'
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-xs text-gray-500">
+        <span>Format: {format}</span>
+        <span className="italic">Rich text editor (basic)</span>
+      </div>
+      <Textarea
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={field.placeholder || 'Enter text...'}
+        disabled={readonly}
+        rows={rows}
+        className={`font-mono text-sm ${props.className || ''}`}
+        aria-invalid={!!errorMessage}
+      />
+    </div>
+  );
+}

package/src/widgets/SelectField.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from '@object-ui/components';
+import { SelectFieldMetadata } from '@object-ui/types';
+import { FieldWidgetProps } from './types';
+
+export function SelectField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  const options = (field as unknown as SelectFieldMetadata).options || [];
+
+  if (readonly) {
+    const option = options.find((o) => o.value === value);
+    return <span className="text-sm">{option?.label || value || '-'}</span>;
+  }
+
+  return (
+    <Select 
+      value={value} 
+      onValueChange={onChange}
+      disabled={readonly}
+    >
+      <SelectTrigger className={props.className}>
+        <SelectValue placeholder={field.placeholder || "Select an option"} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/widgets/TextAreaField.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Textarea } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+export function TextAreaField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+  if (readonly) {
+    return (
+      <div className="text-sm whitespace-pre-wrap">
+        {value || '-'}
+      </div>
+    );
+  }
+
+  const textareaField = field as any;
+  const rows = textareaField.rows || 4;
+  const maxLength = textareaField.max_length;
+
+  return (
+    <div className="relative">
+      <Textarea
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={field.placeholder}
+        disabled={readonly}
+        rows={rows}
+        maxLength={maxLength}
+        className={props.className}
+        aria-invalid={!!errorMessage}
+      />
+      {maxLength && (
+        <div 
+          className="absolute bottom-2 right-2 text-xs text-gray-400"
+          aria-live="polite"
+          aria-label={`Character count: ${(value || '').length} of ${maxLength}`}
+        >
+          {(value || '').length}/{maxLength}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/widgets/TextField.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Input, Textarea } from '@object-ui/components';
+import { TextareaFieldMetadata } from '@object-ui/types';
+import { FieldWidgetProps } from './types';
+
+export function TextField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  if (readonly) {
+    return <span className="text-sm">{value || '-'}</span>;
+  }
+
+  // Cast for rows property
+  const rows = (field as unknown as TextareaFieldMetadata).rows;
+
+  if (rows && rows > 1) {
+    return (
+      <Textarea
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={field.placeholder}
+        disabled={readonly}
+        className={props.className}
+      />
+    );
+  }
+
+  return (
+    <Input
+      type={field.type === 'password' ? 'password' : 'text'}
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={field.placeholder}
+      disabled={readonly}
+      className={props.className}
+    />
+  );
+}

package/src/widgets/UrlField.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+export function UrlField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+  if (readonly) {
+    if (!value) return <span className="text-sm">-</span>;
+    
+    // Validate URL to prevent javascript: or data: URLs
+    const isValidUrl = value.startsWith('http://') || value.startsWith('https://');
+    if (!isValidUrl) {
+      return <span className="text-sm">{value}</span>;
+    }
+    
+    return (
+      <a 
+        href={value}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
+      >
+        {value}
+      </a>
+    );
+  }
+
+  return (
+    <Input
+      type="url"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={field.placeholder || 'https://example.com'}
+      disabled={readonly}
+      className={props.className}
+      aria-invalid={!!errorMessage}
+    />
+  );
+}

package/src/widgets/types.ts

@@ -0,0 +1,11 @@
+import { FieldMetadata } from '@object-ui/types';
+
+export type FieldWidgetProps<T = any> = {
+  value: T;
+  onChange: (val: T) => void;
+  // Use a looser type for field to avoid complex circular dependencies for now
+  field: FieldMetadata; 
+  readonly?: boolean;
+  className?: string;
+  errorMessage?: string;
+}