pdyform 2.1.0 → 2.2.1

package/packages/core/dist/utils.d.cts

@@ -1,9 +1,21 @@
-import { FormField } from './types.cjs';
+import { ErrorMessageTemplates, FormField, FormResolver } from './types.cjs';
 
+/**
+ * Default error message templates
+ */
+declare const defaultErrorMessages: Required<ErrorMessageTemplates>;
+/**
+ * Simple get utility for nested objects
+ */
+declare function get(obj: any, path: string, defaultValue?: any): any;
+/**
+ * Simple set utility for nested objects that returns a new object (immutable)
+ */
+declare function set(obj: any, path: string, value: any): any;
 declare function normalizeFieldValue(field: FormField, value: unknown): unknown;
-declare function validateField(value: any, field: FormField): string | null;
-declare function validateFieldByName(fields: FormField[], name: string, value: unknown): string | null;
-declare function validateForm(fields: FormField[], values: Record<string, any>): Record<string, string>;
+declare function validateField(value: any, field: FormField, customMessages?: ErrorMessageTemplates): Promise<string | null>;
+declare function validateFieldByName(fields: FormField[], name: string, value: unknown, resolver?: FormResolver, allValues?: any, customMessages?: ErrorMessageTemplates): Promise<string | null>;
+declare function validateForm(fields: FormField[], values: Record<string, any>, resolver?: FormResolver, customMessages?: ErrorMessageTemplates): Promise<Record<string, string>>;
 declare function getDefaultValues(fields: FormField[]): Record<string, any>;
 
-export { getDefaultValues, normalizeFieldValue, validateField, validateFieldByName, validateForm };
+export { defaultErrorMessages, get, getDefaultValues, normalizeFieldValue, set, validateField, validateFieldByName, validateForm };

package/packages/core/dist/utils.d.ts

@@ -1,9 +1,21 @@
-import { FormField } from './types.js';
+import { ErrorMessageTemplates, FormField, FormResolver } from './types.js';
 
+/**
+ * Default error message templates
+ */
+declare const defaultErrorMessages: Required<ErrorMessageTemplates>;
+/**
+ * Simple get utility for nested objects
+ */
+declare function get(obj: any, path: string, defaultValue?: any): any;
+/**
+ * Simple set utility for nested objects that returns a new object (immutable)
+ */
+declare function set(obj: any, path: string, value: any): any;
 declare function normalizeFieldValue(field: FormField, value: unknown): unknown;
-declare function validateField(value: any, field: FormField): string | null;
-declare function validateFieldByName(fields: FormField[], name: string, value: unknown): string | null;
-declare function validateForm(fields: FormField[], values: Record<string, any>): Record<string, string>;
+declare function validateField(value: any, field: FormField, customMessages?: ErrorMessageTemplates): Promise<string | null>;
+declare function validateFieldByName(fields: FormField[], name: string, value: unknown, resolver?: FormResolver, allValues?: any, customMessages?: ErrorMessageTemplates): Promise<string | null>;
+declare function validateForm(fields: FormField[], values: Record<string, any>, resolver?: FormResolver, customMessages?: ErrorMessageTemplates): Promise<Record<string, string>>;
 declare function getDefaultValues(fields: FormField[]): Record<string, any>;
 
-export { getDefaultValues, normalizeFieldValue, validateField, validateFieldByName, validateForm };
+export { defaultErrorMessages, get, getDefaultValues, normalizeFieldValue, set, validateField, validateFieldByName, validateForm };

package/packages/core/dist/utils.js

@@ -1,13 +1,19 @@
 import {
+  defaultErrorMessages,
+  get,
   getDefaultValues,
   normalizeFieldValue,
+  set,
   validateField,
   validateFieldByName,
   validateForm
-} from "./chunk-WEDHXOHH.js";
+} from "./chunk-B7OMM2UC.js";
 export {
+  defaultErrorMessages,
+  get,
   getDefaultValues,
   normalizeFieldValue,
+  set,
   validateField,
   validateFieldByName,
   validateForm

package/packages/react/dist/index.cjs

@@ -1,461 +1 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.tsx
-var index_exports = {};
-__export(index_exports, {
-  Checkbox: () => Checkbox,
-  CheckboxRenderer: () => CheckboxRenderer_default,
-  DynamicForm: () => DynamicForm,
-  FormFieldRenderer: () => FormFieldRenderer,
-  Input: () => Input,
-  InputRenderer: () => InputRenderer_default,
-  Label: () => Label,
-  RadioGroup: () => RadioGroup,
-  RadioGroupItem: () => RadioGroupItem,
-  RadioRenderer: () => RadioRenderer_default,
-  Select: () => Select,
-  SelectContent: () => SelectContent,
-  SelectGroup: () => SelectGroup,
-  SelectItem: () => SelectItem,
-  SelectRenderer: () => SelectRenderer_default,
-  SelectTrigger: () => SelectTrigger,
-  SelectValue: () => SelectValue,
-  Textarea: () => Textarea,
-  TextareaRenderer: () => TextareaRenderer_default,
-  defaultComponentMap: () => defaultComponentMap
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/DynamicForm.tsx
-var import_react = require("react");
-var import_core2 = require("pdyform/core");
-
-// src/components/Input.tsx
-var React = __toESM(require("react"), 1);
-
-// src/utils.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
-// src/components/Input.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Input = React.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "input",
-      {
-        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,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-
-// src/components/Textarea.tsx
-var React2 = __toESM(require("react"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Textarea = React2.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "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,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-
-// src/components/Checkbox.tsx
-var React3 = __toESM(require("react"), 1);
-var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
-var import_lucide_react = require("lucide-react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Checkbox = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  CheckboxPrimitive.Root,
-  {
-    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,
-    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      CheckboxPrimitive.Indicator,
-      {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Check, { className: "h-4 w-4" })
-      }
-    )
-  }
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-// src/components/RadioGroup.tsx
-var React4 = __toESM(require("react"), 1);
-var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
-var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var RadioGroup = React4.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    RadioGroupPrimitive.Root,
-    {
-      className: cn("grid gap-2", className),
-      ...props,
-      ref
-    }
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React4.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    RadioGroupPrimitive.Item,
-    {
-      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,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
-    }
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-// src/components/Select.tsx
-var React5 = __toESM(require("react"), 1);
-var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Select = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-  SelectPrimitive.Trigger,
-  {
-    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: [
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React5.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  SelectPrimitive.Content,
-  {
-    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,
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      SelectPrimitive.Viewport,
-      {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        ),
-        children
-      }
-    )
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-  SelectPrimitive.Item,
-  {
-    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,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-// src/components/Label.tsx
-var React6 = __toESM(require("react"), 1);
-var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
-var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var labelVariants = (0, import_class_variance_authority.cva)(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-  LabelPrimitive.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-// src/components/InputRenderer.tsx
-var import_core = require("pdyform/core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var InputRenderer = ({ field, value, onChange, onBlur, fieldId }) => {
-  const handleChange = (nextValue) => {
-    onChange((0, import_core.normalizeFieldValue)(field, nextValue));
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    Input,
-    {
-      id: fieldId,
-      type: field.type,
-      placeholder: field.placeholder,
-      value: value ?? "",
-      onChange: (e) => handleChange(e.target.value),
-      onBlur,
-      disabled: field.disabled,
-      name: field.name
-    }
-  );
-};
-var InputRenderer_default = InputRenderer;
-
-// src/components/TextareaRenderer.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var TextareaRenderer = ({ field, value, onChange, onBlur, fieldId }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-  Textarea,
-  {
-    id: fieldId,
-    placeholder: field.placeholder,
-    value: value ?? "",
-    onChange: (e) => onChange(e.target.value),
-    onBlur,
-    disabled: field.disabled,
-    name: field.name
-  }
-);
-var TextareaRenderer_default = TextareaRenderer;
-
-// src/components/SelectRenderer.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var SelectRenderer = ({ field, value, onChange, onBlur, fieldId }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-  Select,
-  {
-    value: value != null ? String(value) : "",
-    onValueChange: onChange,
-    disabled: field.disabled,
-    name: field.name,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { id: fieldId, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, { placeholder: field.placeholder || "Select an option" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectGroup, { children: field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: String(opt.value), children: opt.label }, opt.value)) }) })
-    ]
-  }
-);
-var SelectRenderer_default = SelectRenderer;
-
-// src/components/CheckboxRenderer.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CheckboxRenderer = ({ field, value, onChange, onBlur }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-4", children: field.options?.map((opt) => {
-  const checked = Array.isArray(value) && value.includes(opt.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Checkbox,
-      {
-        id: `checkbox-${field.name}-${opt.value}`,
-        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
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { htmlFor: `checkbox-${field.name}-${opt.value}`, className: "font-normal", children: opt.label })
-  ] }, opt.value);
-}) });
-var CheckboxRenderer_default = CheckboxRenderer;
-
-// src/components/RadioRenderer.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var RadioRenderer = ({ field, value, onChange, onBlur }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-  RadioGroup,
-  {
-    value: value != null ? String(value) : "",
-    onValueChange: onChange,
-    disabled: field.disabled,
-    name: field.name,
-    className: "flex flex-wrap gap-4",
-    children: field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        RadioGroupItem,
-        {
-          value: String(opt.value),
-          id: `radio-${field.name}-${opt.value}`,
-          onBlur
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { htmlFor: `radio-${field.name}-${opt.value}`, className: "font-normal", children: opt.label })
-    ] }, opt.value))
-  }
-);
-var RadioRenderer_default = RadioRenderer;
-
-// src/components/index.ts
-var defaultComponentMap = {
-  text: InputRenderer_default,
-  number: InputRenderer_default,
-  password: InputRenderer_default,
-  email: InputRenderer_default,
-  date: InputRenderer_default,
-  textarea: TextareaRenderer_default,
-  select: SelectRenderer_default,
-  checkbox: CheckboxRenderer_default,
-  radio: RadioRenderer_default
-};
-
-// src/FormFieldRenderer.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FormFieldRenderer = ({
-  field,
-  value,
-  onChange,
-  onBlur,
-  error,
-  componentMap
-}) => {
-  const { label, description, name, type } = field;
-  const fieldId = `field-${name}`;
-  const resolvedMap = componentMap ? { ...defaultComponentMap, ...componentMap } : defaultComponentMap;
-  const FieldComponent = resolvedMap[type] ?? InputRenderer_default;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `space-y-2 ${field.className || ""}`, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Label, { htmlFor: fieldId, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldComponent, { field, value, onChange, onBlur, fieldId }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[0.8rem] text-muted-foreground", children: description }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[0.8rem] font-medium text-destructive", children: error })
-  ] });
-};
-
-// src/DynamicForm.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var DynamicForm = ({ schema, onSubmit, className }) => {
-  const [formState, setFormState] = (0, import_react.useState)(() => (0, import_core2.createFormRuntimeState)(schema.fields));
-  const handleFieldChange = (name, value) => {
-    setFormState((prev) => (0, import_core2.applyFieldChange)(schema.fields, prev, name, value));
-  };
-  const handleFieldBlur = (name) => {
-    setFormState((prev) => (0, import_core2.applyFieldBlur)(schema.fields, prev, name));
-  };
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const submittingState = (0, import_core2.setSubmitting)(formState, true);
-    const { state: validatedState, hasError } = (0, import_core2.runSubmitValidation)(schema.fields, submittingState);
-    setFormState(validatedState);
-    if (!hasError) {
-      onSubmit(validatedState.values);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("form", { onSubmit: handleSubmit, className: `space-y-6 ${className || ""}`, children: [
-    schema.title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-2xl font-bold tracking-tight", children: schema.title }),
-    schema.description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-muted-foreground", children: schema.description }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-4", children: schema.fields.map((field) => !field.hidden && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      FormFieldRenderer,
-      {
-        field,
-        value: formState.values[field.name],
-        onChange: (val) => handleFieldChange(field.name, val),
-        onBlur: () => handleFieldBlur(field.name),
-        error: formState.errors[field.name]
-      },
-      field.name
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "button",
-      {
-        type: "submit",
-        disabled: formState.isSubmitting,
-        className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full",
-        children: formState.isSubmitting ? "Submitting..." : schema.submitButtonText || "Submit"
-      }
-    )
-  ] });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Checkbox,
-  CheckboxRenderer,
-  DynamicForm,
-  FormFieldRenderer,
-  Input,
-  InputRenderer,
-  Label,
-  RadioGroup,
-  RadioGroupItem,
-  RadioRenderer,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectRenderer,
-  SelectTrigger,
-  SelectValue,
-  Textarea,
-  TextareaRenderer,
-  defaultComponentMap
-});
+"use strict";var Ve=Object.create;var W=Object.defineProperty;var Ge=Object.getOwnPropertyDescriptor;var Ee=Object.getOwnPropertyNames;var Le=Object.getPrototypeOf,Me=Object.prototype.hasOwnProperty;var Be=(e,t)=>{for(var r in t)W(e,r,{get:t[r],enumerable:!0})},de=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Ee(t))!Me.call(e,o)&&o!==r&&W(e,o,{get:()=>t[o],enumerable:!(i=Ge(t,o))||i.enumerable});return e};var u=(e,t,r)=>(r=e!=null?Ve(Le(e)):{},de(t||!e||!e.__esModule?W(r,"default",{value:e,enumerable:!0}):r,e)),$e=e=>de(W({},"__esModule",{value:!0}),e);var Ke={};Be(Ke,{Checkbox:()=>G,CheckboxRenderer:()=>Y,DateRenderer:()=>_,DynamicForm:()=>Je,FormFieldRenderer:()=>ne,Input:()=>N,InputRenderer:()=>v,Label:()=>R,RadioGroup:()=>B,RadioGroupItem:()=>$,RadioRenderer:()=>Z,Select:()=>O,SelectContent:()=>A,SelectGroup:()=>J,SelectItem:()=>H,SelectRenderer:()=>X,SelectTrigger:()=>D,SelectValue:()=>K,Switch:()=>L,SwitchRenderer:()=>j,Textarea:()=>T,TextareaRenderer:()=>Q,defaultComponentMap:()=>ee,useForm:()=>se});module.exports=$e(Ke);var Ie=require("pdyform-core");var pe=u(require("react"),1);var me=require("clsx"),ce=require("tailwind-merge");function l(...e){return(0,ce.twMerge)((0,me.clsx)(e))}var fe=require("react/jsx-runtime"),N=pe.forwardRef(({className:e,type:t,...r},i)=>(0,fe.jsx)("input",{type:t,className:l("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",e),ref:i,...r}));N.displayName="Input";var ue=u(require("react"),1);var be=require("react/jsx-runtime"),T=ue.forwardRef(({className:e,...t},r)=>(0,be.jsx)("textarea",{className:l("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",e),ref:r,...t}));T.displayName="Textarea";var Re=u(require("react"),1),V=u(require("@radix-ui/react-checkbox"),1),ve=require("lucide-react");var q=require("react/jsx-runtime"),G=Re.forwardRef(({className:e,...t},r)=>(0,q.jsx)(V.Root,{ref:r,className:l("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",e),...t,children:(0,q.jsx)(V.Indicator,{className:l("flex items-center justify-center text-current"),children:(0,q.jsx)(ve.Check,{className:"h-4 w-4"})})}));G.displayName=V.Root.displayName;var ge=u(require("react"),1),E=u(require("@radix-ui/react-switch"),1);var re=require("react/jsx-runtime"),L=ge.forwardRef(({className:e,...t},r)=>(0,re.jsx)(E.Root,{className:l("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",e),...t,ref:r,children:(0,re.jsx)(E.Thumb,{className:l("pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0")})}));L.displayName=E.Root.displayName;var oe=u(require("react"),1),S=u(require("@radix-ui/react-radio-group"),1),xe=require("lucide-react");var M=require("react/jsx-runtime"),B=oe.forwardRef(({className:e,...t},r)=>(0,M.jsx)(S.Root,{className:l("grid gap-2",e),...t,ref:r}));B.displayName=S.Root.displayName;var $=oe.forwardRef(({className:e,...t},r)=>(0,M.jsx)(S.Item,{ref:r,className:l("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",e),...t,children:(0,M.jsx)(S.Indicator,{className:"flex items-center justify-center",children:(0,M.jsx)(xe.Circle,{className:"h-2.5 w-2.5 fill-current text-current"})})}));$.displayName=S.Item.displayName;var U=u(require("react"),1),a=u(require("@radix-ui/react-select"),1),z=require("lucide-react");var f=require("react/jsx-runtime"),O=a.Root,J=a.Group,K=a.Value,D=U.forwardRef(({className:e,children:t,...r},i)=>(0,f.jsxs)(a.Trigger,{ref:i,className:l("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",e),...r,children:[t,(0,f.jsx)(a.Icon,{asChild:!0,children:(0,f.jsx)(z.ChevronDown,{className:"h-4 w-4 opacity-50"})})]}));D.displayName=a.Trigger.displayName;var A=U.forwardRef(({className:e,children:t,position:r="popper",...i},o)=>(0,f.jsx)(a.Portal,{children:(0,f.jsx)(a.Content,{ref:o,className:l("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",r==="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",e),position:r,...i,children:(0,f.jsx)(a.Viewport,{className:l("p-1",r==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:t})})}));A.displayName=a.Content.displayName;var H=U.forwardRef(({className:e,children:t,...r},i)=>(0,f.jsxs)(a.Item,{ref:i,className:l("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",e),...r,children:[(0,f.jsx)("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:(0,f.jsx)(a.ItemIndicator,{children:(0,f.jsx)(z.Check,{className:"h-4 w-4"})})}),(0,f.jsx)(a.ItemText,{children:t})]}));H.displayName=a.Item.displayName;var ye=u(require("react"),1),ie=u(require("@radix-ui/react-label"),1),he=require("class-variance-authority");var Se=require("react/jsx-runtime"),De=(0,he.cva)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),R=ye.forwardRef(({className:e,...t},r)=>(0,Se.jsx)(ie.Root,{ref:r,className:l(De(),e),...t}));R.displayName=ie.Root.displayName;var Ce=require("pdyform-core");var Fe=require("react/jsx-runtime"),Ae=({field:e,value:t,onChange:r,onBlur:i,fieldId:o,ariaInvalid:s,ariaRequired:n,ariaDescribedBy:d})=>{let c=p=>{r((0,Ce.normalizeFieldValue)(e,p))};return(0,Fe.jsx)(N,{id:o,type:e.type,placeholder:e.placeholder,value:t??"",onChange:p=>c(p.target.value),onBlur:i,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,name:e.name,"aria-invalid":s,"aria-required":n,"aria-describedby":d})},v=Ae;var Pe=require("react/jsx-runtime"),He=({field:e,value:t,onChange:r,onBlur:i,fieldId:o})=>(0,Pe.jsx)(T,{id:o,placeholder:e.placeholder,value:t??"",onChange:s=>r(s.target.value),onBlur:i,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,name:e.name}),Q=He;var C=require("react/jsx-runtime"),We=({field:e,value:t,onChange:r,onBlur:i,fieldId:o})=>(0,C.jsxs)(O,{value:t!=null?String(t):"",onValueChange:r,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,name:e.name,children:[(0,C.jsx)(D,{id:o,onBlur:i,children:(0,C.jsx)(K,{placeholder:e.placeholder||"Select an option"})}),(0,C.jsx)(A,{children:(0,C.jsx)(J,{children:e.options?.map(s=>(0,C.jsx)(H,{value:String(s.value),children:s.label},s.value))})})]}),X=We;var I=require("react/jsx-runtime"),qe=({field:e,value:t,onChange:r,onBlur:i})=>(0,I.jsx)("div",{className:"flex flex-wrap gap-4",children:e.options?.map(o=>{let s=Array.isArray(t)&&t.includes(o.value);return(0,I.jsxs)("div",{className:"flex items-center space-x-2",children:[(0,I.jsx)(G,{id:`checkbox-${e.name}-${o.value}`,checked:s,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,onCheckedChange:n=>{let d=Array.isArray(t)?[...t]:[];if(n)d.push(o.value);else{let c=d.indexOf(o.value);c>-1&&d.splice(c,1)}r(d)},onBlur:i}),(0,I.jsx)(R,{htmlFor:`checkbox-${e.name}-${o.value}`,className:"font-normal",children:o.label})]},o.value)})}),Y=qe;var k=require("react/jsx-runtime"),Ue=({field:e,value:t,onChange:r,onBlur:i})=>(0,k.jsx)(B,{value:t!=null?String(t):"",onValueChange:r,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,name:e.name,className:"flex flex-wrap gap-4",children:e.options?.map(o=>(0,k.jsxs)("div",{className:"flex items-center space-x-2",children:[(0,k.jsx)($,{value:String(o.value),id:`radio-${e.name}-${o.value}`,onBlur:i}),(0,k.jsx)(R,{htmlFor:`radio-${e.name}-${o.value}`,className:"font-normal",children:o.label})]},o.value))}),Z=Ue;var we=require("react/jsx-runtime"),ze=({field:e,value:t,onChange:r,onBlur:i,fieldId:o,ariaInvalid:s,ariaRequired:n,ariaDescribedBy:d})=>(0,we.jsx)(N,{id:o,type:"date",value:t??"",onChange:c=>r(c.target.value),onBlur:i,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,name:e.name,"aria-invalid":s,"aria-required":n,"aria-describedby":d}),_=ze;var ae=require("react/jsx-runtime"),Oe=({field:e,value:t,onChange:r,onBlur:i,fieldId:o,ariaInvalid:s,ariaRequired:n,ariaDescribedBy:d})=>(0,ae.jsx)("div",{className:"flex items-center space-x-2",children:(0,ae.jsx)(L,{id:o,checked:!!t,onCheckedChange:r,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,name:e.name,"aria-invalid":s,"aria-required":n,"aria-describedby":d})}),j=Oe;var ee={text:v,number:v,password:v,email:v,textarea:Q,select:X,checkbox:Y,radio:Z,date:_,switch:j};var F=require("react/jsx-runtime"),ne=({field:e,value:t,onChange:r,onBlur:i,error:o,componentMap:s})=>{let{label:n,description:d,name:c,type:p,validations:m}=e,b=`field-${c}`,g=`${b}-description`,x=`${b}-error`,y=m?.some(Te=>Te.type==="required"),le=(s?{...ee,...s}:ee)[p]??v,ke=[d?g:null,o?x:null].filter(Boolean).join(" ");return(0,F.jsxs)("div",{className:`space-y-2 ${e.className||""}`,children:[n&&(0,F.jsxs)(R,{htmlFor:b,className:y?"flex items-center gap-1":"",children:[n,y&&(0,F.jsx)("span",{className:"text-destructive",children:"*"})]}),(0,F.jsx)(le,{field:e,value:t,onChange:r,onBlur:i,fieldId:b,errorId:x,descriptionId:g,ariaInvalid:!!o,ariaRequired:y,ariaDescribedBy:ke||void 0}),d&&(0,F.jsx)("p",{id:g,className:"text-[0.8rem] text-muted-foreground",children:d}),o&&(0,F.jsx)("p",{id:x,className:"text-[0.8rem] font-medium text-destructive",children:o})]})};var P=require("react"),Ne=require("zustand"),te=require("pdyform-core");function se({schema:e}){let t=(0,P.useMemo)(()=>(0,te.createFormStore)(e.fields,e.resolver,e.errorMessages),[e]),r=(0,Ne.useStore)(t),i=(0,P.useCallback)(async(c,p)=>{await t.getState().setFieldValue(c,p)},[t]),o=(0,P.useCallback)(c=>(0,te.get)(t.getState().values,c),[t]),s=(0,P.useCallback)((c,p)=>{t.setState(m=>({errors:{...m.errors,[c]:p}}))},[t]),n=(0,P.useCallback)(async()=>{let{hasError:c,state:p}=await t.getState().runSubmitValidation();return{hasError:c,values:p.values,state:p}},[t]),d=(0,P.useCallback)(()=>{t.setState({values:{},errors:{},isSubmitting:!1})},[t]);return{store:t,state:r,setValue:i,getValue:o,setError:s,validate:n,reset:d}}var w=require("react/jsx-runtime"),Je=({schema:e,onSubmit:t,className:r,form:i})=>{let o=se({schema:e}),s=i||o,{state:n,store:d}=s,c=async m=>{m.preventDefault();try{let{hasError:b,values:g,state:x}=await s.validate();if(console.log("has error =>",b,g,x),b){let y=e.fields.find(h=>!(typeof h.hidden=="function"?h.hidden(n.values):h.hidden)&&x.errors[h.name]);if(y){let h=document.getElementById(`field-${y.name}`);h?.focus(),h?.scrollIntoView({behavior:"smooth",block:"center"})}return}await t(g)}catch(b){console.error("Submission error:",b)}},p=n.validatingFields.length>0;return(0,w.jsxs)("form",{onSubmit:c,className:`space-y-6 ${r||""}`,children:[e.title&&(0,w.jsx)("h2",{className:"text-2xl font-bold tracking-tight",children:e.title}),e.description&&(0,w.jsx)("p",{className:"text-muted-foreground",children:e.description}),(0,w.jsx)("div",{className:"space-y-4",children:e.fields.map(m=>{let b=typeof m.hidden=="function"?m.hidden(n.values):m.hidden,g=typeof m.disabled=="function"?m.disabled(n.values):m.disabled,x=n.validatingFields.includes(m.name);return!b&&(0,w.jsx)(ne,{field:{...m,disabled:g||x},value:(0,Ie.get)(n.values,m.name),onChange:y=>d.getState().setFieldValue(m.name,y),onBlur:()=>d.getState().setFieldBlur(m.name),error:n.errors[m.name]},m.name)})}),(0,w.jsx)("button",{type:"submit",disabled:n.isSubmitting||p,className:"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full",children:n.isSubmitting?"Submitting...":p?"Validating...":e.submitButtonText||"Submit"})]})};0&&(module.exports={Checkbox,CheckboxRenderer,DateRenderer,DynamicForm,FormFieldRenderer,Input,InputRenderer,Label,RadioGroup,RadioGroupItem,RadioRenderer,Select,SelectContent,SelectGroup,SelectItem,SelectRenderer,SelectTrigger,SelectValue,Switch,SwitchRenderer,Textarea,TextareaRenderer,defaultComponentMap,useForm});

package/packages/react/dist/index.d.cts

@@ -1,17 +1,37 @@
 import * as React from 'react';
 import React__default from 'react';
-import { FormSchema, FormField } from 'pdyform/core';
+import { createFormStore, FormStore, FormRuntimeState, FormSchema, FormField } from 'pdyform-core';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { VariantProps } from 'class-variance-authority';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+interface UseFormOptions {
+    schema: FormSchema;
+}
+interface UseFormReturn {
+    store: ReturnType<typeof createFormStore>;
+    state: FormStore;
+    setValue: (name: string, value: any) => Promise<void>;
+    getValue: (name: string) => any;
+    setError: (name: string, error: string) => void;
+    validate: () => Promise<{
+        hasError: boolean;
+        values: any;
+        state: FormRuntimeState;
+    }>;
+    reset: () => void;
+}
+declare function useForm({ schema }: UseFormOptions): UseFormReturn;
 
 interface DynamicFormProps {
     schema: FormSchema;
     onSubmit: (values: Record<string, any>) => void;
     className?: string;
+    form?: UseFormReturn;
 }
 declare const DynamicForm: React__default.FC<DynamicFormProps>;
 
@@ -25,6 +45,8 @@ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.Re
 
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
@@ -44,6 +66,11 @@ interface FieldRenderContext {
     onChange: (value: any) => void;
     onBlur?: () => void;
     fieldId: string;
+    errorId?: string;
+    descriptionId?: string;
+    ariaInvalid?: boolean;
+    ariaRequired?: boolean;
+    ariaDescribedBy?: string;
 }
 /** A React component that renders a specific field type */
 type FieldRenderer = React__default.ComponentType<FieldRenderContext>;
@@ -60,6 +87,10 @@ declare const CheckboxRenderer: React__default.FC<FieldRenderContext>;
 
 declare const RadioRenderer: React__default.FC<FieldRenderContext>;
 
+declare const DateRenderer: React__default.FC<FieldRenderContext>;
+
+declare const SwitchRenderer: React__default.FC<FieldRenderContext>;
+
 /**
  * The default built-in component map.
  * Import and spread this to extend or override individual field types:
@@ -93,4 +124,4 @@ interface FormFieldRendererProps {
 }
 declare const FormFieldRenderer: React__default.FC<FormFieldRendererProps>;
 
-export { Checkbox, CheckboxRenderer, DynamicForm, type FieldComponentMap, type FieldRenderContext, type FieldRenderer, FormFieldRenderer, type FormFieldRendererProps, Input, InputRenderer, Label, RadioGroup, RadioGroupItem, RadioRenderer, Select, SelectContent, SelectGroup, SelectItem, SelectRenderer, SelectTrigger, SelectValue, Textarea, TextareaRenderer, defaultComponentMap };
+export { Checkbox, CheckboxRenderer, DateRenderer, DynamicForm, type FieldComponentMap, type FieldRenderContext, type FieldRenderer, FormFieldRenderer, type FormFieldRendererProps, Input, InputRenderer, Label, RadioGroup, RadioGroupItem, RadioRenderer, Select, SelectContent, SelectGroup, SelectItem, SelectRenderer, SelectTrigger, SelectValue, Switch, SwitchRenderer, Textarea, TextareaRenderer, type UseFormOptions, type UseFormReturn, defaultComponentMap, useForm };