pdyform 2.1.0 → 2.2.0

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

@@ -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 };

package/packages/react/dist/index.js

@@ -1,411 +1 @@
-// src/DynamicForm.tsx
-import { useState } from "react";
-import {
-  createFormRuntimeState,
-  applyFieldChange,
-  applyFieldBlur,
-  runSubmitValidation,
-  setSubmitting
-} from "pdyform/core";
-
-// src/components/Input.tsx
-import * as React from "react";
-
-// src/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/Input.tsx
-import { jsx } from "react/jsx-runtime";
-var Input = React.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ 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
-import * as React2 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Textarea = React2.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx2(
-      "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
-import * as React3 from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Checkbox = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
-  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__ */ jsx3(
-      CheckboxPrimitive.Indicator,
-      {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsx3(Check, { className: "h-4 w-4" })
-      }
-    )
-  }
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-// src/components/RadioGroup.tsx
-import * as React4 from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var RadioGroup = React4.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx4(
-    RadioGroupPrimitive.Root,
-    {
-      className: cn("grid gap-2", className),
-      ...props,
-      ref
-    }
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React4.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx4(
-    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__ */ jsx4(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx4(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
-    }
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-// src/components/Select.tsx
-import * as React5 from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check as Check2, ChevronDown } from "lucide-react";
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
-var Select = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ 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__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React5.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx5(
-  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__ */ jsx5(
-      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__ */ 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__ */ jsx5("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(Check2, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-// src/components/Label.tsx
-import * as React6 from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva } from "class-variance-authority";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
-  LabelPrimitive.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-// src/components/InputRenderer.tsx
-import { normalizeFieldValue } from "pdyform/core";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var InputRenderer = ({ field, value, onChange, onBlur, fieldId }) => {
-  const handleChange = (nextValue) => {
-    onChange(normalizeFieldValue(field, nextValue));
-  };
-  return /* @__PURE__ */ jsx7(
-    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
-import { jsx as jsx8 } from "react/jsx-runtime";
-var TextareaRenderer = ({ field, value, onChange, onBlur, fieldId }) => /* @__PURE__ */ jsx8(
-  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
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-var SelectRenderer = ({ field, value, onChange, onBlur, fieldId }) => /* @__PURE__ */ jsxs2(
-  Select,
-  {
-    value: value != null ? String(value) : "",
-    onValueChange: onChange,
-    disabled: field.disabled,
-    name: field.name,
-    children: [
-      /* @__PURE__ */ jsx9(SelectTrigger, { id: fieldId, onBlur, children: /* @__PURE__ */ jsx9(SelectValue, { placeholder: field.placeholder || "Select an option" }) }),
-      /* @__PURE__ */ jsx9(SelectContent, { children: /* @__PURE__ */ jsx9(SelectGroup, { children: field.options?.map((opt) => /* @__PURE__ */ jsx9(SelectItem, { value: String(opt.value), children: opt.label }, opt.value)) }) })
-    ]
-  }
-);
-var SelectRenderer_default = SelectRenderer;
-
-// src/components/CheckboxRenderer.tsx
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-var CheckboxRenderer = ({ field, value, onChange, onBlur }) => /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-4", children: field.options?.map((opt) => {
-  const checked = Array.isArray(value) && value.includes(opt.value);
-  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ jsx10(
-      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__ */ jsx10(Label, { htmlFor: `checkbox-${field.name}-${opt.value}`, className: "font-normal", children: opt.label })
-  ] }, opt.value);
-}) });
-var CheckboxRenderer_default = CheckboxRenderer;
-
-// src/components/RadioRenderer.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-var RadioRenderer = ({ field, value, onChange, onBlur }) => /* @__PURE__ */ jsx11(
-  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__ */ jsxs4("div", { className: "flex items-center space-x-2", children: [
-      /* @__PURE__ */ jsx11(
-        RadioGroupItem,
-        {
-          value: String(opt.value),
-          id: `radio-${field.name}-${opt.value}`,
-          onBlur
-        }
-      ),
-      /* @__PURE__ */ jsx11(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
-import { jsx as jsx12, jsxs as jsxs5 } from "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__ */ jsxs5("div", { className: `space-y-2 ${field.className || ""}`, children: [
-    label && /* @__PURE__ */ jsx12(Label, { htmlFor: fieldId, children: label }),
-    /* @__PURE__ */ jsx12(FieldComponent, { field, value, onChange, onBlur, fieldId }),
-    description && /* @__PURE__ */ jsx12("p", { className: "text-[0.8rem] text-muted-foreground", children: description }),
-    error && /* @__PURE__ */ jsx12("p", { className: "text-[0.8rem] font-medium text-destructive", children: error })
-  ] });
-};
-
-// src/DynamicForm.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
-var DynamicForm = ({ schema, onSubmit, className }) => {
-  const [formState, setFormState] = useState(() => createFormRuntimeState(schema.fields));
-  const handleFieldChange = (name, value) => {
-    setFormState((prev) => applyFieldChange(schema.fields, prev, name, value));
-  };
-  const handleFieldBlur = (name) => {
-    setFormState((prev) => applyFieldBlur(schema.fields, prev, name));
-  };
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const submittingState = setSubmitting(formState, true);
-    const { state: validatedState, hasError } = runSubmitValidation(schema.fields, submittingState);
-    setFormState(validatedState);
-    if (!hasError) {
-      onSubmit(validatedState.values);
-    }
-  };
-  return /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: `space-y-6 ${className || ""}`, children: [
-    schema.title && /* @__PURE__ */ jsx13("h2", { className: "text-2xl font-bold tracking-tight", children: schema.title }),
-    schema.description && /* @__PURE__ */ jsx13("p", { className: "text-muted-foreground", children: schema.description }),
-    /* @__PURE__ */ jsx13("div", { className: "space-y-4", children: schema.fields.map((field) => !field.hidden && /* @__PURE__ */ jsx13(
-      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__ */ jsx13(
-      "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"
-      }
-    )
-  ] });
-};
-export {
-  Checkbox,
-  CheckboxRenderer_default as CheckboxRenderer,
-  DynamicForm,
-  FormFieldRenderer,
-  Input,
-  InputRenderer_default as InputRenderer,
-  Label,
-  RadioGroup,
-  RadioGroupItem,
-  RadioRenderer_default as RadioRenderer,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectRenderer_default as SelectRenderer,
-  SelectTrigger,
-  SelectValue,
-  Textarea,
-  TextareaRenderer_default as TextareaRenderer,
-  defaultComponentMap
-};
+import{get as Ue}from"pdyform-core";import*as ee from"react";import{clsx as ue}from"clsx";import{twMerge as be}from"tailwind-merge";function l(...e){return be(ue(e))}import{jsx as Re}from"react/jsx-runtime";var h=ee.forwardRef(({className:e,type:t,...r},i)=>Re("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}));h.displayName="Input";import*as te from"react";import{jsx as ve}from"react/jsx-runtime";var I=te.forwardRef(({className:e,...t},r)=>ve("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}));I.displayName="Textarea";import*as re from"react";import*as C from"@radix-ui/react-checkbox";import{Check as ge}from"lucide-react";import{jsx as A}from"react/jsx-runtime";var k=re.forwardRef(({className:e,...t},r)=>A(C.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:A(C.Indicator,{className:l("flex items-center justify-center text-current"),children:A(ge,{className:"h-4 w-4"})})}));k.displayName=C.Root.displayName;import*as ie from"react";import*as F from"@radix-ui/react-switch";import{jsx as oe}from"react/jsx-runtime";var T=ie.forwardRef(({className:e,...t},r)=>oe(F.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:oe(F.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")})}));T.displayName=F.Root.displayName;import*as W from"react";import*as R from"@radix-ui/react-radio-group";import{Circle as xe}from"lucide-react";import{jsx as V}from"react/jsx-runtime";var G=W.forwardRef(({className:e,...t},r)=>V(R.Root,{className:l("grid gap-2",e),...t,ref:r}));G.displayName=R.Root.displayName;var E=W.forwardRef(({className:e,...t},r)=>V(R.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:V(R.Indicator,{className:"flex items-center justify-center",children:V(xe,{className:"h-2.5 w-2.5 fill-current text-current"})})}));E.displayName=R.Item.displayName;import*as L from"react";import*as a from"@radix-ui/react-select";import{Check as ye,ChevronDown as he}from"lucide-react";import{jsx as f,jsxs as ae}from"react/jsx-runtime";var q=a.Root,H=a.Group,U=a.Value,M=L.forwardRef(({className:e,children:t,...r},i)=>ae(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,f(a.Icon,{asChild:!0,children:f(he,{className:"h-4 w-4 opacity-50"})})]}));M.displayName=a.Trigger.displayName;var B=L.forwardRef(({className:e,children:t,position:r="popper",...i},o)=>f(a.Portal,{children:f(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:f(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})})}));B.displayName=a.Content.displayName;var $=L.forwardRef(({className:e,children:t,...r},i)=>ae(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:[f("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:f(a.ItemIndicator,{children:f(ye,{className:"h-4 w-4"})})}),f(a.ItemText,{children:t})]}));$.displayName=a.Item.displayName;import*as ne from"react";import*as z from"@radix-ui/react-label";import{cva as Se}from"class-variance-authority";import{jsx as Fe}from"react/jsx-runtime";var Ce=Se("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),v=ne.forwardRef(({className:e,...t},r)=>Fe(z.Root,{ref:r,className:l(Ce(),e),...t}));v.displayName=z.Root.displayName;import{normalizeFieldValue as Pe}from"pdyform-core";import{jsx as Ne}from"react/jsx-runtime";var we=({field:e,value:t,onChange:r,onBlur:i,fieldId:o,ariaInvalid:n,ariaRequired:s,ariaDescribedBy:d})=>{let c=p=>{r(Pe(e,p))};return Ne(h,{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":n,"aria-required":s,"aria-describedby":d})},g=we;import{jsx as ke}from"react/jsx-runtime";var Ie=({field:e,value:t,onChange:r,onBlur:i,fieldId:o})=>ke(I,{id:o,placeholder:e.placeholder,value:t??"",onChange:n=>r(n.target.value),onBlur:i,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,name:e.name}),O=Ie;import{jsx as P,jsxs as Ve}from"react/jsx-runtime";var Te=({field:e,value:t,onChange:r,onBlur:i,fieldId:o})=>Ve(q,{value:t!=null?String(t):"",onValueChange:r,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,name:e.name,children:[P(M,{id:o,onBlur:i,children:P(U,{placeholder:e.placeholder||"Select an option"})}),P(B,{children:P(H,{children:e.options?.map(n=>P($,{value:String(n.value),children:n.label},n.value))})})]}),J=Te;import{jsx as K,jsxs as Ee}from"react/jsx-runtime";var Ge=({field:e,value:t,onChange:r,onBlur:i})=>K("div",{className:"flex flex-wrap gap-4",children:e.options?.map(o=>{let n=Array.isArray(t)&&t.includes(o.value);return Ee("div",{className:"flex items-center space-x-2",children:[K(k,{id:`checkbox-${e.name}-${o.value}`,checked:n,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,onCheckedChange:s=>{let d=Array.isArray(t)?[...t]:[];if(s)d.push(o.value);else{let c=d.indexOf(o.value);c>-1&&d.splice(c,1)}r(d)},onBlur:i}),K(v,{htmlFor:`checkbox-${e.name}-${o.value}`,className:"font-normal",children:o.label})]},o.value)})}),Q=Ge;import{jsx as X,jsxs as Me}from"react/jsx-runtime";var Le=({field:e,value:t,onChange:r,onBlur:i})=>X(G,{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=>Me("div",{className:"flex items-center space-x-2",children:[X(E,{value:String(o.value),id:`radio-${e.name}-${o.value}`,onBlur:i}),X(v,{htmlFor:`radio-${e.name}-${o.value}`,className:"font-normal",children:o.label})]},o.value))}),Y=Le;import{jsx as $e}from"react/jsx-runtime";var Be=({field:e,value:t,onChange:r,onBlur:i,fieldId:o,ariaInvalid:n,ariaRequired:s,ariaDescribedBy:d})=>$e(h,{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":n,"aria-required":s,"aria-describedby":d}),Z=Be;import{jsx as se}from"react/jsx-runtime";var De=({field:e,value:t,onChange:r,onBlur:i,fieldId:o,ariaInvalid:n,ariaRequired:s,ariaDescribedBy:d})=>se("div",{className:"flex items-center space-x-2",children:se(T,{id:o,checked:!!t,onCheckedChange:r,disabled:typeof e.disabled=="boolean"?e.disabled:void 0,name:e.name,"aria-invalid":n,"aria-required":s,"aria-describedby":d})}),_=De;var j={text:g,number:g,password:g,email:g,textarea:O,select:J,checkbox:Q,radio:Y,date:Z,switch:_};import{jsx as D,jsxs as le}from"react/jsx-runtime";var de=({field:e,value:t,onChange:r,onBlur:i,error:o,componentMap:n})=>{let{label:s,description:d,name:c,type:p,validations:m}=e,u=`field-${c}`,x=`${u}-description`,y=`${u}-error`,b=m?.some(fe=>fe.type==="required"),ce=(n?{...j,...n}:j)[p]??g,pe=[d?x:null,o?y:null].filter(Boolean).join(" ");return le("div",{className:`space-y-2 ${e.className||""}`,children:[s&&le(v,{htmlFor:u,className:b?"flex items-center gap-1":"",children:[s,b&&D("span",{className:"text-destructive",children:"*"})]}),D(ce,{field:e,value:t,onChange:r,onBlur:i,fieldId:u,errorId:y,descriptionId:x,ariaInvalid:!!o,ariaRequired:b,ariaDescribedBy:pe||void 0}),d&&D("p",{id:x,className:"text-[0.8rem] text-muted-foreground",children:d}),o&&D("p",{id:y,className:"text-[0.8rem] font-medium text-destructive",children:o})]})};import{useMemo as Ae,useCallback as w}from"react";import{useStore as We}from"zustand";import{createFormStore as qe,get as He}from"pdyform-core";function me({schema:e}){let t=Ae(()=>qe(e.fields,e.resolver,e.errorMessages),[e]),r=We(t),i=w(async(c,p)=>{await t.getState().setFieldValue(c,p)},[t]),o=w(c=>He(t.getState().values,c),[t]),n=w((c,p)=>{t.setState(m=>({errors:{...m.errors,[c]:p}}))},[t]),s=w(async()=>{let{hasError:c,state:p}=await t.getState().runSubmitValidation();return{hasError:c,values:p.values,state:p}},[t]),d=w(()=>{t.setState({values:{},errors:{},isSubmitting:!1})},[t]);return{store:t,state:r,setValue:i,getValue:o,setError:n,validate:s,reset:d}}import{jsx as N,jsxs as ze}from"react/jsx-runtime";var Ir=({schema:e,onSubmit:t,className:r,form:i})=>{let o=me({schema:e}),n=i||o,{state:s,store:d}=n,c=async m=>{m.preventDefault();let{hasError:u,values:x,state:y}=await n.validate();if(u){let b=e.fields.find(S=>y.errors[S.name]);if(b){let S=document.getElementById(`field-${b.name}`);S?.focus(),S?.scrollIntoView({behavior:"smooth",block:"center"})}return}t(x)},p=s.validatingFields.length>0;return ze("form",{onSubmit:c,className:`space-y-6 ${r||""}`,children:[e.title&&N("h2",{className:"text-2xl font-bold tracking-tight",children:e.title}),e.description&&N("p",{className:"text-muted-foreground",children:e.description}),N("div",{className:"space-y-4",children:e.fields.map(m=>{let u=typeof m.hidden=="function"?m.hidden(s.values):m.hidden,x=typeof m.disabled=="function"?m.disabled(s.values):m.disabled,y=s.validatingFields.includes(m.name);return!u&&N(de,{field:{...m,disabled:x||y},value:Ue(s.values,m.name),onChange:b=>d.getState().setFieldValue(m.name,b),onBlur:()=>d.getState().setFieldBlur(m.name),error:s.errors[m.name]},m.name)})}),N("button",{type:"submit",disabled:s.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:s.isSubmitting?"Submitting...":p?"Validating...":e.submitButtonText||"Submit"})]})};export{k as Checkbox,Q as CheckboxRenderer,Z as DateRenderer,Ir as DynamicForm,de as FormFieldRenderer,h as Input,g as InputRenderer,v as Label,G as RadioGroup,E as RadioGroupItem,Y as RadioRenderer,q as Select,B as SelectContent,H as SelectGroup,$ as SelectItem,J as SelectRenderer,M as SelectTrigger,U as SelectValue,T as Switch,_ as SwitchRenderer,I as Textarea,O as TextareaRenderer,j as defaultComponentMap,me as useForm};

package/packages/vue/dist/index.d.ts

@@ -2,13 +2,18 @@ import { Component } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { FormField } from 'pdyform/core';
-import { FormSchema } from 'pdyform/core';
+import { FormField } from 'pdyform-core';
+import { FormRuntimeState } from 'pdyform-core';
+import { FormSchema } from 'pdyform-core';
+import { FormStore } from 'pdyform-core';
 import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { StoreApi } from 'zustand/vanilla';
 
 declare type __VLS_Props = {
     schema: FormSchema;
     className?: string;
+    form?: UseFormReturn;
 };
 
 declare type __VLS_Props_2 = {
@@ -33,7 +38,6 @@ declare type __VLS_Props_2 = {
     componentMap?: FieldComponentMap;
 };
 
-/** The default built-in component map */
 export declare const defaultComponentMap: FieldComponentMap;
 
 export declare const DynamicForm: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -42,23 +46,65 @@ submit: (...args: any[]) => void;
 onSubmit?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLFormElement>;
 
-/** Map from field type to a Vue component */
 export declare type FieldComponentMap = Record<string, Component>;
 
-/**
- * The props interface that every field renderer component must accept.
- * Custom field renderers must implement this interface.
- */
 export declare interface FieldRendererProps {
     field: FormField;
-    modelValue: any;
     fieldId: string;
+    modelValue: any;
+    ariaInvalid?: boolean;
+    ariaRequired?: boolean;
+    ariaDescribedby?: string;
 }
 
 export declare const FormFieldRenderer: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (...args: any[]) => void;
+blur: (...args: any[]) => void;
 }, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+onBlur?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
+export declare function useForm({ schema }: UseFormOptions): {
+    store: StoreApi<FormStore>;
+    state: Ref<    {
+    setFieldValue: (name: string, rawValue: unknown) => Promise<void>;
+    setFieldBlur: (name: string) => Promise<void>;
+    setSubmitting: (isSubmitting: boolean) => void;
+    runSubmitValidation: () => Promise<{
+    state: FormRuntimeState;
+    hasError: boolean;
+    }>;
+    values: Record<string, any>;
+    errors: Record<string, string>;
+    validatingFields: string[];
+    isSubmitting: boolean;
+    }, FormStore | {
+    setFieldValue: (name: string, rawValue: unknown) => Promise<void>;
+    setFieldBlur: (name: string) => Promise<void>;
+    setSubmitting: (isSubmitting: boolean) => void;
+    runSubmitValidation: () => Promise<{
+    state: FormRuntimeState;
+    hasError: boolean;
+    }>;
+    values: Record<string, any>;
+    errors: Record<string, string>;
+    validatingFields: string[];
+    isSubmitting: boolean;
+    }>;
+    setValue: (name: string, value: any) => Promise<void>;
+    getValue: (name: string) => any;
+    validate: () => Promise<{
+        hasError: boolean;
+        values: Record<string, any>;
+    }>;
+    reset: () => void;
+};
+
+export declare interface UseFormOptions {
+    schema: FormSchema;
+}
+
+export declare type UseFormReturn = ReturnType<typeof useForm>;
+
 export { }