@liam-michel/validated-form 0.1.0

package/dist/index.js

@@ -0,0 +1,720 @@
+// src/ValidatedForm.tsx
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ValidatedForm({
+  children,
+  schema,
+  onSubmit,
+  defaultValues,
+  form: externalForm,
+  submitLabel,
+  hideSubmit,
+  renderSubmit,
+  renderError
+}) {
+  const internalForm = useForm({
+    resolver: zodResolver(schema),
+    defaultValues
+  });
+  const form = externalForm ?? internalForm;
+  const handleSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onSubmit(data);
+    } catch (err) {
+      const fieldErrors = err?.data?.fieldErrors;
+      if (fieldErrors) {
+        Object.entries(fieldErrors).forEach(([field, message]) => {
+          form.setError(field, { message });
+        });
+      } else {
+        form.setError("root", {
+          message: err?.data?.message ?? err?.message ?? "Something went wrong"
+        });
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    typeof children === "function" ? children(form) : children,
+    form.formState.errors.root && (renderError ? renderError(form.formState.errors.root.message) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: form.formState.errors.root.message })),
+    renderSubmit ? renderSubmit({
+      isSubmitting: form.formState.isSubmitting,
+      reset: form.reset
+    }) : !hideSubmit && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: form.formState.isSubmitting,
+        className: "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50",
+        children: form.formState.isSubmitting ? "Submitting..." : submitLabel ?? "Submit"
+      }
+    )
+  ] }) });
+}
+
+// src/createForm.tsx
+import "zod";
+
+// src/fields/TextField.tsx
+import "react";
+import { Controller, useFormContext } from "react-hook-form";
+import "zod";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/fields/TextField.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function TextField({
+  name,
+  label,
+  placeholder,
+  disabled,
+  description,
+  className,
+  form,
+  type = "text",
+  showReset
+}) {
+  const contextForm = useFormContext();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ jsx2(
+    Controller,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx2(
+            "label",
+            {
+              htmlFor: name,
+              className: "text-sm font-medium leading-none",
+              children: label
+            }
+          ),
+          showReset && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => actualForm.resetField(name),
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ...field,
+            id: name,
+            value: field.value ?? "",
+            placeholder,
+            disabled,
+            type,
+            className: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        ),
+        description && /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/TextAreaField.tsx
+import "react";
+import { Controller as Controller2, useFormContext as useFormContext2 } from "react-hook-form";
+import "zod";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function TextAreaField({
+  name,
+  label,
+  placeholder,
+  disabled,
+  description,
+  className,
+  form,
+  showReset
+}) {
+  const contextForm = useFormContext2();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ jsx3(
+    Controller2,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs3("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx3("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+          showReset && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              onClick: () => actualForm.resetField(name),
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "textarea",
+          {
+            ...field,
+            id: name,
+            value: field.value ?? "",
+            placeholder,
+            disabled,
+            className: "flex min-h-[75px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        ),
+        description && /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/NumberField.tsx
+import "react";
+import { Controller as Controller3, useFormContext as useFormContext3 } from "react-hook-form";
+import "zod";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function NumberField({
+  name,
+  label,
+  placeholder,
+  disabled,
+  description,
+  className,
+  form,
+  showReset
+}) {
+  const contextForm = useFormContext3();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ jsx4(
+    Controller3,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs4("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx4("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+          showReset && /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: () => actualForm.resetField(name),
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            ...field,
+            id: name,
+            value: field.value ?? "",
+            placeholder,
+            disabled,
+            type: "number",
+            onChange: (e) => {
+              const value = e.target.value;
+              field.onChange(value === "" ? void 0 : Number(value));
+            },
+            className: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        ),
+        description && /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/SelectField.tsx
+import "react";
+import { Controller as Controller4, useFormContext as useFormContext4 } from "react-hook-form";
+import "zod";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function SelectField({
+  name,
+  label,
+  placeholder,
+  disabled,
+  description,
+  className,
+  form,
+  options,
+  showReset
+}) {
+  const contextForm = useFormContext4();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ jsx5(
+    Controller4,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs5("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx5("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+          showReset && /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              onClick: () => actualForm.resetField(name),
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5(
+          SelectPrimitive.Root,
+          {
+            onValueChange: field.onChange,
+            value: String(field.value || ""),
+            disabled,
+            children: [
+              /* @__PURE__ */ jsxs5(SelectPrimitive.Trigger, { className: "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50", children: [
+                /* @__PURE__ */ jsx5(
+                  SelectPrimitive.Value,
+                  {
+                    placeholder: placeholder ?? "Select an option"
+                  }
+                ),
+                /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+              ] }),
+              /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx5(SelectPrimitive.Content, { className: "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", children: /* @__PURE__ */ jsx5(SelectPrimitive.Viewport, { className: "p-1", children: options.map((option) => /* @__PURE__ */ jsxs5(
+                SelectPrimitive.Item,
+                {
+                  value: String(option.value),
+                  className: "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",
+                  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(Check, { className: "h-4 w-4" }) }) }),
+                    /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children: option.label })
+                  ]
+                },
+                String(option.value)
+              )) }) }) })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/CheckboxField.tsx
+import { Controller as Controller5, useFormContext as useFormContext5 } from "react-hook-form";
+import "zod";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check as Check2 } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function CheckboxField({
+  name,
+  label,
+  disabled,
+  description,
+  className,
+  form
+}) {
+  const contextForm = useFormContext5();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ jsx6(
+    Controller5,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs6("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx6(
+            CheckboxPrimitive.Root,
+            {
+              id: name,
+              checked: !!field.value,
+              onCheckedChange: (checked) => field.onChange(checked),
+              disabled,
+              className: "h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+              children: /* @__PURE__ */ jsx6(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx6(Check2, { className: "h-3 w-3" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "label",
+            {
+              htmlFor: name,
+              className: "text-sm font-medium leading-none",
+              children: label
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ jsx6("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/DateField.tsx
+import "react";
+import { Controller as Controller6, useFormContext as useFormContext6 } from "react-hook-form";
+import "zod";
+import { DayPicker } from "react-day-picker";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function DateField({
+  name,
+  label,
+  description,
+  className,
+  form,
+  showReset
+}) {
+  const contextForm = useFormContext6();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ jsx7(
+    Controller6,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => {
+        const date = field.value ? new Date(field.value) : void 0;
+        return /* @__PURE__ */ jsxs7("div", { className: cn("space-y-2", className), children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx7("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+            showReset && /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: () => actualForm.resetField(name),
+                className: "text-xs text-muted-foreground hover:text-foreground",
+                children: "Reset"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7(PopoverPrimitive.Root, { children: [
+            /* @__PURE__ */ jsx7(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "flex h-9 w-full items-center justify-start gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                  !date && "text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx7(CalendarIcon, { className: "h-4 w-4" }),
+                  date ? format(date, "PPP") : "Pick a date"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx7(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
+              PopoverPrimitive.Content,
+              {
+                align: "start",
+                className: "z-50 rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none",
+                children: /* @__PURE__ */ jsx7(
+                  DayPicker,
+                  {
+                    mode: "single",
+                    selected: date,
+                    onSelect: (d) => field.onChange(d),
+                    className: "p-3"
+                  }
+                )
+              }
+            ) })
+          ] }),
+          description && /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground", children: description }),
+          fieldState.error && /* @__PURE__ */ jsx7("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+        ] });
+      }
+    }
+  );
+}
+
+// src/fields/SliderField.tsx
+import "react";
+import { Controller as Controller7, useFormContext as useFormContext7 } from "react-hook-form";
+import "zod";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function SliderField({
+  name,
+  label,
+  description,
+  disabled,
+  className,
+  form,
+  min = 0,
+  max = 100,
+  step = 1,
+  showReset
+}) {
+  const contextForm = useFormContext7();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ jsx8(
+    Controller7,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => {
+        const value = field.value !== void 0 ? field.value : min;
+        return /* @__PURE__ */ jsxs8("div", { className: cn("space-y-2", className), children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx8("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx8("span", { className: "text-sm text-muted-foreground", children: value }),
+              showReset && /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => actualForm.resetField(name),
+                  className: "text-xs text-muted-foreground hover:text-foreground",
+                  children: "Reset"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs8(
+            SliderPrimitive.Root,
+            {
+              value: [value],
+              onValueChange: ([val]) => field.onChange(val),
+              min,
+              max,
+              step,
+              disabled,
+              className: "relative flex w-full touch-none select-none items-center",
+              children: [
+                /* @__PURE__ */ jsx8(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx8(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+                /* @__PURE__ */ jsx8(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground", children: description }),
+          fieldState.error && /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+        ] });
+      }
+    }
+  );
+}
+
+// src/fields/MultiSelectField.tsx
+import "react";
+import { Controller as Controller8, useFormContext as useFormContext8 } from "react-hook-form";
+import "zod";
+import * as PopoverPrimitive2 from "@radix-ui/react-popover";
+import { Command } from "cmdk";
+import { Check as Check3, ChevronsUpDown, X } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function MultiSelectField({
+  name,
+  label,
+  description,
+  disabled,
+  form,
+  className,
+  options,
+  placeholder = "Select options...",
+  showReset
+}) {
+  const contextForm = useFormContext8();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ jsx9(
+    Controller8,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => {
+        const selected = Array.isArray(field.value) ? field.value : [];
+        const toggle = (val) => {
+          const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];
+          field.onChange(next);
+        };
+        return /* @__PURE__ */ jsxs9("div", { className: cn("space-y-2", className), children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx9("label", { className: "text-sm font-medium leading-none", children: label }),
+            showReset && /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                onClick: () => actualForm.resetField(name),
+                className: "text-xs text-muted-foreground hover:text-foreground",
+                children: "Reset"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs9(PopoverPrimitive2.Root, { children: [
+            /* @__PURE__ */ jsx9(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                type: "button",
+                role: "combobox",
+                disabled,
+                className: cn(
+                  "flex min-h-9 w-full flex-wrap items-center justify-between gap-1 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                  !selected.length && "text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-1", children: selected.length ? selected.map((val) => /* @__PURE__ */ jsxs9(
+                    "span",
+                    {
+                      className: "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground",
+                      children: [
+                        options.find((o) => o.value === val)?.label ?? val,
+                        /* @__PURE__ */ jsx9(
+                          "span",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              toggle(val);
+                            },
+                            className: "cursor-pointer",
+                            children: /* @__PURE__ */ jsx9(X, { className: "h-3 w-3" })
+                          }
+                        )
+                      ]
+                    },
+                    val
+                  )) : placeholder }),
+                  /* @__PURE__ */ jsx9(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx9(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx9(
+              PopoverPrimitive2.Content,
+              {
+                align: "start",
+                className: "z-50 min-w-[200px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+                children: /* @__PURE__ */ jsxs9(Command, { children: [
+                  /* @__PURE__ */ jsx9("div", { className: "flex items-center border-b px-3", children: /* @__PURE__ */ jsx9(
+                    Command.Input,
+                    {
+                      placeholder: "Search...",
+                      className: "flex h-9 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs9(Command.List, { className: "max-h-[200px] overflow-y-auto p-1", children: [
+                    /* @__PURE__ */ jsx9(Command.Empty, { className: "py-6 text-center text-sm", children: "No options found." }),
+                    /* @__PURE__ */ jsx9(Command.Group, { children: options.map((option) => /* @__PURE__ */ jsxs9(
+                      Command.Item,
+                      {
+                        value: option.value,
+                        onSelect: () => toggle(option.value),
+                        className: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground",
+                        children: [
+                          /* @__PURE__ */ jsx9(
+                            Check3,
+                            {
+                              className: cn(
+                                "mr-2 h-4 w-4",
+                                selected.includes(option.value) ? "opacity-100" : "opacity-0"
+                              )
+                            }
+                          ),
+                          option.label
+                        ]
+                      },
+                      option.value
+                    )) })
+                  ] })
+                ] })
+              }
+            ) })
+          ] }),
+          description && /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground", children: description }),
+          fieldState.error && /* @__PURE__ */ jsx9("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+        ] });
+      }
+    }
+  );
+}
+
+// src/createForm.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function createForm(schema) {
+  const Form = ({
+    children,
+    onSubmit,
+    defaultValues,
+    components
+  }) => /* @__PURE__ */ jsx10(
+    ValidatedForm,
+    {
+      schema,
+      onSubmit,
+      defaultValues,
+      components,
+      children
+    }
+  );
+  Form.displayName = "Form";
+  const SchemaTextField = (props) => /* @__PURE__ */ jsx10(TextField, { ...props });
+  SchemaTextField.displayName = "TextField";
+  const SchemaPasswordField = (props) => /* @__PURE__ */ jsx10(TextField, { ...props });
+  SchemaPasswordField.displayName = "PasswordField";
+  const SchemaTextAreaField = (props) => /* @__PURE__ */ jsx10(TextAreaField, { ...props });
+  SchemaTextAreaField.displayName = "TextAreaField";
+  const SchemaNumberField = (props) => /* @__PURE__ */ jsx10(NumberField, { ...props });
+  SchemaNumberField.displayName = "NumberField";
+  const SchemaSelectField = (props) => /* @__PURE__ */ jsx10(SelectField, { ...props });
+  SchemaSelectField.displayName = "SelectField";
+  const SchemaCheckboxField = (props) => /* @__PURE__ */ jsx10(CheckboxField, { ...props });
+  SchemaCheckboxField.displayName = "CheckboxField";
+  const SchemaDateField = (props) => /* @__PURE__ */ jsx10(DateField, { ...props });
+  SchemaDateField.displayName = "DateField";
+  const SchemaSliderField = (props) => /* @__PURE__ */ jsx10(SliderField, { ...props });
+  SchemaSliderField.displayName = "SliderField";
+  const SchemaMultiSelectField = (props) => /* @__PURE__ */ jsx10(MultiSelectField, { ...props });
+  SchemaMultiSelectField.displayName = "MultiSelectField";
+  return {
+    Form,
+    TextField: SchemaTextField,
+    PasswordField: SchemaPasswordField,
+    TextAreaField: SchemaTextAreaField,
+    NumberField: SchemaNumberField,
+    SelectField: SchemaSelectField,
+    CheckboxField: SchemaCheckboxField,
+    DateField: SchemaDateField,
+    SliderField: SchemaSliderField,
+    MultiSelectField: SchemaMultiSelectField
+  };
+}
+
+// src/hooks/useValidatedForm.ts
+import { useForm as useForm2 } from "react-hook-form";
+import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
+function useValidatedForm({
+  schema,
+  defaultValues
+}) {
+  return useForm2({
+    resolver: zodResolver2(schema),
+    defaultValues
+  });
+}
+export {
+  CheckboxField,
+  DateField,
+  MultiSelectField,
+  NumberField,
+  SelectField,
+  SliderField,
+  TextAreaField,
+  TextField,
+  ValidatedForm,
+  createForm,
+  useValidatedForm
+};
+//# sourceMappingURL=index.js.map