@liam-michel/simple-form 0.1.0

package/dist/index.cjs

@@ -0,0 +1,761 @@
+"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.ts
+var index_exports = {};
+__export(index_exports, {
+  CheckboxField: () => CheckboxField,
+  DateField: () => DateField,
+  MultiSelectField: () => MultiSelectField,
+  NumberField: () => NumberField,
+  SelectField: () => SelectField,
+  SimpleForm: () => SimpleForm,
+  SliderField: () => SliderField,
+  TextAreaField: () => TextAreaField,
+  TextField: () => TextField,
+  createForm: () => createForm,
+  useSimpleForm: () => useSimpleForm
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SimpleForm.tsx
+var import_react_hook_form = require("react-hook-form");
+var import_zod = require("@hookform/resolvers/zod");
+var import_zod2 = require("zod");
+var import_jsx_runtime = require("react/jsx-runtime");
+function SimpleForm({
+  children,
+  schema,
+  onSubmit,
+  defaultValues,
+  form: externalForm,
+  submitLabel,
+  hideSubmit,
+  renderSubmit,
+  renderError
+}) {
+  const internalForm = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_zod.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__ */ (0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, { ...form, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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
+var import_zod11 = require("zod");
+
+// src/fields/TextField.tsx
+var import_react = require("react");
+var import_react_hook_form2 = require("react-hook-form");
+var import_zod3 = require("zod");
+
+// src/utils/cn.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/fields/TextField.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function TextField({
+  name,
+  label,
+  placeholder,
+  disabled,
+  description,
+  className,
+  form,
+  type = "text",
+  showReset
+}) {
+  const contextForm = (0, import_react_hook_form2.useFormContext)();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_hook_form2.Controller,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "label",
+            {
+              htmlFor: name,
+              className: "text-sm font-medium leading-none",
+              children: label
+            }
+          ),
+          showReset && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => actualForm.resetField(name),
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "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__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/TextAreaField.tsx
+var import_react2 = require("react");
+var import_react_hook_form3 = require("react-hook-form");
+var import_zod4 = require("zod");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TextAreaField({
+  name,
+  label,
+  placeholder,
+  disabled,
+  description,
+  className,
+  form,
+  showReset
+}) {
+  const contextForm = (0, import_react_hook_form3.useFormContext)();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_hook_form3.Controller,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+          showReset && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => actualForm.resetField(name),
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "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__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/NumberField.tsx
+var import_react3 = require("react");
+var import_react_hook_form4 = require("react-hook-form");
+var import_zod5 = require("zod");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function NumberField({
+  name,
+  label,
+  placeholder,
+  disabled,
+  description,
+  className,
+  form,
+  showReset
+}) {
+  const contextForm = (0, import_react_hook_form4.useFormContext)();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_hook_form4.Controller,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+          showReset && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => actualForm.resetField(name),
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "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__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/SelectField.tsx
+var import_react4 = require("react");
+var import_react_hook_form5 = require("react-hook-form");
+var import_zod6 = require("zod");
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SelectField({
+  name,
+  label,
+  placeholder,
+  disabled,
+  description,
+  className,
+  form,
+  options,
+  showReset
+}) {
+  const contextForm = (0, import_react_hook_form5.useFormContext)();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_hook_form5.Controller,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+          showReset && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => actualForm.resetField(name),
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          SelectPrimitive.Root,
+          {
+            onValueChange: field.onChange,
+            value: String(field.value || ""),
+            disabled,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(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__ */ (0, import_jsx_runtime5.jsx)(
+                  SelectPrimitive.Value,
+                  {
+                    placeholder: placeholder ?? "Select an option"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Content, { className: "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Viewport, { className: "p-1", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                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__ */ (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_react.Check, { className: "h-4 w-4" }) }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ItemText, { children: option.label })
+                  ]
+                },
+                String(option.value)
+              )) }) }) })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/CheckboxField.tsx
+var import_react5 = require("react");
+var import_react_hook_form6 = require("react-hook-form");
+var import_zod7 = require("zod");
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CheckboxField({
+  name,
+  label,
+  disabled,
+  description,
+  className,
+  form
+}) {
+  const contextForm = (0, import_react_hook_form6.useFormContext)();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_hook_form6.Controller,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("space-y-2", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            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__ */ (0, import_jsx_runtime6.jsx)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Check, { className: "h-3 w-3" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label })
+        ] }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-muted-foreground", children: description }),
+        fieldState.error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+      ] })
+    }
+  );
+}
+
+// src/fields/DateField.tsx
+var import_react6 = require("react");
+var import_react_hook_form7 = require("react-hook-form");
+var import_zod8 = require("zod");
+var import_react_day_picker = require("react-day-picker");
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var import_date_fns = require("date-fns");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DateField({
+  name,
+  label,
+  description,
+  className,
+  form,
+  showReset
+}) {
+  const contextForm = (0, import_react_hook_form7.useFormContext)();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_hook_form7.Controller,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => {
+        const date = field.value ? new Date(field.value) : void 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("space-y-2", className), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+            showReset && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => actualForm.resetField(name),
+                className: "text-xs text-muted-foreground hover:text-foreground",
+                children: "Reset"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(PopoverPrimitive.Root, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "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__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.CalendarIcon, { className: "h-4 w-4" }),
+                  date ? (0, import_date_fns.format)(date, "PPP") : "Pick a date"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              PopoverPrimitive.Content,
+              {
+                align: "start",
+                className: "z-50 rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none",
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_day_picker.DayPicker,
+                  {
+                    mode: "single",
+                    selected: date,
+                    onSelect: (d) => field.onChange(d),
+                    className: "p-3"
+                  }
+                )
+              }
+            ) })
+          ] }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-muted-foreground", children: description }),
+          fieldState.error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+        ] });
+      }
+    }
+  );
+}
+
+// src/fields/SliderField.tsx
+var import_react7 = require("react");
+var import_react_hook_form8 = require("react-hook-form");
+var import_zod9 = require("zod");
+var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SliderField({
+  name,
+  label,
+  description,
+  disabled,
+  className,
+  form,
+  min = 0,
+  max = 100,
+  step = 1,
+  showReset
+}) {
+  const contextForm = (0, import_react_hook_form8.useFormContext)();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react_hook_form8.Controller,
+    {
+      control: actualForm.control,
+      name,
+      render: ({ field, fieldState }) => {
+        const value = field.value !== void 0 ? field.value : min;
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("space-y-2", className), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: name, className: "text-sm font-medium leading-none", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm text-muted-foreground", children: value }),
+              showReset && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => actualForm.resetField(name),
+                  className: "text-xs text-muted-foreground hover:text-foreground",
+                  children: "Reset"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            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__ */ (0, import_jsx_runtime8.jsx)(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-muted-foreground", children: description }),
+          fieldState.error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+        ] });
+      }
+    }
+  );
+}
+
+// src/fields/MultiSelectField.tsx
+var import_react8 = require("react");
+var import_react_hook_form9 = require("react-hook-form");
+var import_zod10 = require("zod");
+var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"), 1);
+var import_cmdk = require("cmdk");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function MultiSelectField({
+  name,
+  label,
+  description,
+  disabled,
+  form,
+  className,
+  options,
+  placeholder = "Select options...",
+  showReset
+}) {
+  const contextForm = (0, import_react_hook_form9.useFormContext)();
+  const actualForm = form || contextForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react_hook_form9.Controller,
+    {
+      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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("space-y-2", className), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-sm font-medium leading-none", children: label }),
+            showReset && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => actualForm.resetField(name),
+                className: "text-xs text-muted-foreground hover:text-foreground",
+                children: "Reset"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(PopoverPrimitive2.Root, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "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__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", children: selected.length ? selected.map((val) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "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__ */ (0, import_jsx_runtime9.jsx)(
+                          "span",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              toggle(val);
+                            },
+                            className: "cursor-pointer",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" })
+                          }
+                        )
+                      ]
+                    },
+                    val
+                  )) : placeholder }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              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__ */ (0, import_jsx_runtime9.jsxs)(import_cmdk.Command, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center border-b px-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    import_cmdk.Command.Input,
+                    {
+                      placeholder: "Search...",
+                      className: "flex h-9 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_cmdk.Command.List, { className: "max-h-[200px] overflow-y-auto p-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_cmdk.Command.Empty, { className: "py-6 text-center text-sm", children: "No options found." }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_cmdk.Command.Group, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      import_cmdk.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__ */ (0, import_jsx_runtime9.jsx)(
+                            import_lucide_react4.Check,
+                            {
+                              className: cn(
+                                "mr-2 h-4 w-4",
+                                selected.includes(option.value) ? "opacity-100" : "opacity-0"
+                              )
+                            }
+                          ),
+                          option.label
+                        ]
+                      },
+                      option.value
+                    )) })
+                  ] })
+                ] })
+              }
+            ) })
+          ] }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-muted-foreground", children: description }),
+          fieldState.error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm font-medium text-destructive", children: fieldState.error.message })
+        ] });
+      }
+    }
+  );
+}
+
+// src/createForm.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function createForm(schema) {
+  const Form = ({
+    children,
+    onSubmit,
+    defaultValues,
+    components
+  }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    SimpleForm,
+    {
+      schema,
+      onSubmit,
+      defaultValues,
+      components,
+      children
+    }
+  );
+  Form.displayName = "Form";
+  const SchemaTextField = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextField, { ...props });
+  SchemaTextField.displayName = "TextField";
+  const SchemaPasswordField = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextField, { ...props });
+  SchemaPasswordField.displayName = "PasswordField";
+  const SchemaTextAreaField = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextAreaField, { ...props });
+  SchemaTextAreaField.displayName = "TextAreaField";
+  const SchemaNumberField = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NumberField, { ...props });
+  SchemaNumberField.displayName = "NumberField";
+  const SchemaSelectField = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectField, { ...props });
+  SchemaSelectField.displayName = "SelectField";
+  const SchemaCheckboxField = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxField, { ...props });
+  SchemaCheckboxField.displayName = "CheckboxField";
+  const SchemaDateField = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DateField, { ...props });
+  SchemaDateField.displayName = "DateField";
+  const SchemaSliderField = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SliderField, { ...props });
+  SchemaSliderField.displayName = "SliderField";
+  const SchemaMultiSelectField = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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/useSimpleForm.ts
+var import_react_hook_form10 = require("react-hook-form");
+var import_zod12 = require("@hookform/resolvers/zod");
+function useSimpleForm({
+  schema,
+  defaultValues
+}) {
+  return (0, import_react_hook_form10.useForm)({
+    resolver: (0, import_zod12.zodResolver)(schema),
+    defaultValues
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckboxField,
+  DateField,
+  MultiSelectField,
+  NumberField,
+  SelectField,
+  SimpleForm,
+  SliderField,
+  TextAreaField,
+  TextField,
+  createForm,
+  useSimpleForm
+});
+//# sourceMappingURL=index.cjs.map