pdyform 1.1.0 → 2.0.0

package/packages/react/node_modules/.bin/vite

@@ -6,12 +6,12 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@7.3.1_@types+node@20.19.35_jiti@1.21.7/node_modules/vite/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@7.3.1_@types+node@20.19.35_jiti@1.21.7/node_modules/vite/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@7.3.1_@types+node@20.19.35_jiti@1.21.7/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@7.3.1_@types+node@20.19.35_jiti@1.21.7/node_modules/vite/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@7.3.1_@types+node@20.19.35_jiti@1.21.7/node_modules/vite/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@7.3.1_@types+node@20.19.35_jiti@1.21.7/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/bin/vite.js" "$@"
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@7.3.1_@types+node@20.19.35_jiti@1.21.7/node_modules/vite/bin/vite.js" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/bin/vite.js" "$@"
+  exec node  "$basedir/../../../../node_modules/.pnpm/vite@7.3.1_@types+node@20.19.35_jiti@1.21.7/node_modules/vite/bin/vite.js" "$@"
 fi

package/packages/react/node_modules/.vite/vitest/results.json

@@ -1 +1 @@
-{"version":"1.6.1","results":[[":src/DynamicForm.test.tsx",{"duration":26,"failed":false}]]}
+{"version":"1.6.1","results":[[":test/DynamicForm.test.tsx",{"duration":30,"failed":false}],[":test/FormFieldRenderer.test.tsx",{"duration":129,"failed":false}]]}

package/packages/react/package.json

@@ -27,10 +27,15 @@
     "lint": "eslint src/**/*.{ts,tsx} --no-error-on-unmatched-pattern"
   },
   "dependencies": {
-    "clsx": "^2.0.0",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.300.0",
     "pdyform": "workspace:*",
-    "tailwind-merge": "^2.0.0"
+    "tailwind-merge": "^2.6.1"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/packages/react/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/packages/react/src/FormFieldRenderer.tsx

@@ -1,130 +1,50 @@
 import React from 'react';
-import { FormField } from 'pdyform/core';
+import type { FormField } from 'pdyform/core';
+import { Label, defaultComponentMap, InputRenderer } from './components';
+import type { FieldComponentMap } from './components';
 
-interface FormFieldRendererProps {
+export interface FormFieldRendererProps {
   field: FormField;
   value: any;
   onChange: (value: any) => void;
   onBlur?: () => void;
   error?: string;
+  /**
+   * Custom component map merged with the default map — external entries win.
+   *
+   * @example
+   * ```tsx
+   * import { defaultComponentMap } from 'pdyform-react';
+   * const myMap = { ...defaultComponentMap, text: MyInput, rating: StarRating };
+   * <FormFieldRenderer componentMap={myMap} ... />
+   * ```
+   */
+  componentMap?: FieldComponentMap;
 }
 
-export const FormFieldRenderer: React.FC<FormFieldRendererProps> = ({ field, value, onChange, onBlur, error }) => {
-  const { type, label, placeholder, options, description, disabled, name } = field;
+export const FormFieldRenderer: React.FC<FormFieldRendererProps> = ({
+  field,
+  value,
+  onChange,
+  onBlur,
+  error,
+  componentMap,
+}) => {
+  const { label, description, name, type } = field;
   const fieldId = `field-${name}`;
 
-  const baseInputClasses = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50";
+  const resolvedMap: FieldComponentMap = componentMap
+    ? { ...defaultComponentMap, ...componentMap }
+    : defaultComponentMap;
 
-  const renderInput = () => {
-    switch (type) {
-      case 'textarea':
-        return (
-          <textarea
-            id={fieldId}
-            className={`${baseInputClasses} min-h-[80px]`}
-            placeholder={placeholder}
-            value={value || ''}
-            onChange={(e) => onChange(e.target.value)}
-            onBlur={onBlur}
-            disabled={disabled}
-            name={name}
-          />
-        );
-      case 'select':
-        return (
-          <select
-            id={fieldId}
-            className={baseInputClasses}
-            value={value || ''}
-            onChange={(e) => onChange(e.target.value)}
-            onBlur={onBlur}
-            disabled={disabled}
-            name={name}
-          >
-            <option value="" disabled>{placeholder || 'Select an option'}</option>
-            {options?.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        );
-      case 'checkbox':
-        return (
-          <div className="flex flex-wrap gap-4">
-            {options?.map((opt) => (
-              <label key={opt.value} className="flex items-center space-x-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                <input
-                  type="checkbox"
-                  className="h-4 w-4 rounded border-primary text-primary focus:ring-primary"
-                  checked={Array.isArray(value) && value.includes(opt.value)}
-                  onChange={(e) => {
-                    const newValue = Array.isArray(value) ? [...value] : [];
-                    if (e.target.checked) {
-                      newValue.push(opt.value);
-                    } else {
-                      const index = newValue.indexOf(opt.value);
-                      if (index > -1) newValue.splice(index, 1);
-                    }
-                    onChange(newValue);
-                  }}
-                  onBlur={onBlur}
-                  disabled={disabled}
-                />
-                <span>{opt.label}</span>
-              </label>
-            ))}
-          </div>
-        );
-      case 'radio':
-        return (
-          <div className="flex flex-wrap gap-4">
-            {options?.map((opt) => (
-              <label key={opt.value} className="flex items-center space-x-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                <input
-                  type="radio"
-                  className="h-4 w-4 border-primary text-primary focus:ring-primary"
-                  name={field.name}
-                  checked={value === opt.value}
-                  onChange={() => onChange(opt.value)}
-                  onBlur={onBlur}
-                  disabled={disabled}
-                />
-                <span>{opt.label}</span>
-              </label>
-            ))}
-          </div>
-        );
-      default:
-        return (
-          <input
-            id={fieldId}
-            type={type}
-            className={baseInputClasses}
-            placeholder={placeholder}
-            value={value || ''}
-            onChange={(e) => onChange(e.target.value)}
-            onBlur={onBlur}
-            disabled={disabled}
-            name={name}
-          />
-        );
-    }
-  };
+  const FieldComponent = resolvedMap[type] ?? InputRenderer;
 
   return (
     <div className={`space-y-2 ${field.className || ''}`}>
-      {label && (
-        <label
-          htmlFor={fieldId}
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          {label}
-        </label>
-      )}
-      {renderInput()}
-      {description && <p className="text-sm text-muted-foreground">{description}</p>}
-      {error && <p className="text-sm font-medium text-destructive">{error}</p>}
+      {label && <Label htmlFor={fieldId}>{label}</Label>}
+      <FieldComponent field={field} value={value} onChange={onChange} onBlur={onBlur} fieldId={fieldId} />
+      {description && <p className="text-[0.8rem] text-muted-foreground">{description}</p>}
+      {error && <p className="text-[0.8rem] font-medium text-destructive">{error}</p>}
     </div>
   );
 };

package/packages/react/src/components/Checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "../utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/packages/react/src/components/CheckboxRenderer.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { FieldRenderContext } from './types';
+import { Checkbox } from './Checkbox';
+import { Label } from './Label';
+
+const CheckboxRenderer: React.FC<FieldRenderContext> = ({ field, value, onChange, onBlur }) => (
+  <div className="flex flex-wrap gap-4">
+    {field.options?.map((opt) => {
+      const checked = Array.isArray(value) && value.includes(opt.value);
+      return (
+        <div key={opt.value} className="flex items-center space-x-2">
+          <Checkbox
+            id={`checkbox-${field.name}-${opt.value}`}
+            checked={checked}
+            disabled={field.disabled}
+            onCheckedChange={(c) => {
+              const next = Array.isArray(value) ? [...value] : [];
+              if (c) {
+                next.push(opt.value);
+              } else {
+                const idx = next.indexOf(opt.value);
+                if (idx > -1) next.splice(idx, 1);
+              }
+              onChange(next);
+            }}
+            onBlur={onBlur}
+          />
+          <Label htmlFor={`checkbox-${field.name}-${opt.value}`} className="font-normal">
+            {opt.label}
+          </Label>
+        </div>
+      );
+    })}
+  </div>
+);
+
+export default CheckboxRenderer;

package/packages/react/src/components/Input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "../utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/packages/react/src/components/InputRenderer.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FieldRenderContext } from './types';
+import { Input } from './Input';
+
+const InputRenderer: React.FC<FieldRenderContext> = ({ field, value, onChange, onBlur, fieldId }) => {
+  const handleChange = (nextValue: string) => {
+    if (field.type !== 'number') {
+      onChange(nextValue);
+      return;
+    }
+
+    onChange(nextValue === '' ? '' : Number(nextValue));
+  };
+
+  return (
+    <Input
+      id={fieldId}
+      type={field.type}
+      placeholder={field.placeholder}
+      value={value ?? ''}
+      onChange={(e) => handleChange(e.target.value)}
+      onBlur={onBlur}
+      disabled={field.disabled}
+      name={field.name}
+    />
+  );
+};
+
+export default InputRenderer;

package/packages/react/src/components/Label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/packages/react/src/components/RadioGroup.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "../utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

package/packages/react/src/components/RadioRenderer.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FieldRenderContext } from './types';
+import { RadioGroup, RadioGroupItem } from './RadioGroup';
+import { Label } from './Label';
+
+const RadioRenderer: React.FC<FieldRenderContext> = ({ field, value, onChange, onBlur }) => (
+  <RadioGroup
+    value={value != null ? String(value) : ''}
+    onValueChange={onChange}
+    disabled={field.disabled}
+    name={field.name}
+    className="flex flex-wrap gap-4"
+  >
+    {field.options?.map((opt) => (
+      <div key={opt.value} className="flex items-center space-x-2">
+        <RadioGroupItem
+          value={String(opt.value)}
+          id={`radio-${field.name}-${opt.value}`}
+          onBlur={onBlur}
+        />
+        <Label htmlFor={`radio-${field.name}-${opt.value}`} className="font-normal">
+          {opt.label}
+        </Label>
+      </div>
+    ))}
+  </RadioGroup>
+);
+
+export default RadioRenderer;

package/packages/react/src/components/Select.tsx

@@ -0,0 +1,93 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "../utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+}

package/packages/react/src/components/SelectRenderer.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { FieldRenderContext } from './types';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from './Select';
+
+const SelectRenderer: React.FC<FieldRenderContext> = ({ field, value, onChange, onBlur, fieldId }) => (
+  <Select
+    value={value != null ? String(value) : ''}
+    onValueChange={onChange}
+    disabled={field.disabled}
+    name={field.name}
+  >
+    <SelectTrigger id={fieldId} onBlur={onBlur}>
+      <SelectValue placeholder={field.placeholder || 'Select an option'} />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        {field.options?.map((opt) => (
+          <SelectItem key={opt.value} value={String(opt.value)}>
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+);
+
+export default SelectRenderer;

package/packages/react/src/components/Textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { cn } from "../utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/packages/react/src/components/TextareaRenderer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { FieldRenderContext } from './types';
+import { Textarea } from './Textarea';
+
+const TextareaRenderer: React.FC<FieldRenderContext> = ({ field, value, onChange, onBlur, fieldId }) => (
+  <Textarea
+    id={fieldId}
+    placeholder={field.placeholder}
+    value={value ?? ''}
+    onChange={(e) => onChange(e.target.value)}
+    onBlur={onBlur}
+    disabled={field.disabled}
+    name={field.name}
+  />
+);
+
+export default TextareaRenderer;

package/packages/react/src/components/index.ts

@@ -0,0 +1,55 @@
+// ─── Primitive UI components ─────────────────────────────────────────────────
+export { Input } from './Input';
+export { Textarea } from './Textarea';
+export { Checkbox } from './Checkbox';
+export { RadioGroup, RadioGroupItem } from './RadioGroup';
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+} from './Select';
+export { Label } from './Label';
+
+// ─── Field renderer components ────────────────────────────────────────────────
+export { default as InputRenderer } from './InputRenderer';
+export { default as TextareaRenderer } from './TextareaRenderer';
+export { default as SelectRenderer } from './SelectRenderer';
+export { default as CheckboxRenderer } from './CheckboxRenderer';
+export { default as RadioRenderer } from './RadioRenderer';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+export type { FieldRenderContext, FieldRenderer, FieldComponentMap } from './types';
+
+// ─── Default component map ───────────────────────────────────────────────────
+import InputRenderer from './InputRenderer';
+import TextareaRenderer from './TextareaRenderer';
+import SelectRenderer from './SelectRenderer';
+import CheckboxRenderer from './CheckboxRenderer';
+import RadioRenderer from './RadioRenderer';
+import type { FieldComponentMap } from './types';
+
+/**
+ * The default built-in component map.
+ * Import and spread this to extend or override individual field types:
+ *
+ * @example
+ * ```tsx
+ * import { defaultComponentMap } from 'pdyform-react';
+ * const myMap = { ...defaultComponentMap, text: MyInput, rating: StarRating };
+ * <FormFieldRenderer componentMap={myMap} ... />
+ * ```
+ */
+export const defaultComponentMap: FieldComponentMap = {
+  text: InputRenderer,
+  number: InputRenderer,
+  password: InputRenderer,
+  email: InputRenderer,
+  date: InputRenderer,
+  textarea: TextareaRenderer,
+  select: SelectRenderer,
+  checkbox: CheckboxRenderer,
+  radio: RadioRenderer,
+};