@mehdashti/forms 0.2.1 → 0.3.1

package/dist/index.js

@@ -1,6 +1,8 @@
 import { useForm, Controller, useFieldArray } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React2 from 'react';
+import { z } from 'zod';
 export { z } from 'zod';
 
 // src/use-smart-form.ts
@@ -188,6 +190,471 @@ function FormCheckbox({
     }
   );
 }
+function FormTextarea({
+  name,
+  label,
+  placeholder,
+  required = false,
+  helpText,
+  disabled = false,
+  className,
+  control,
+  rows = 4,
+  maxLength,
+  showCharacterCount = false,
+  resize = "vertical"
+}) {
+  const resizeClass = {
+    none: "resize-none",
+    vertical: "resize-y",
+    horizontal: "resize-x",
+    both: "resize"
+  }[resize];
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const currentLength = field.value?.length || 0;
+        const showCount = showCharacterCount || maxLength;
+        return /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className || ""}`, children: [
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: String(name),
+              className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: String(name),
+              placeholder,
+              disabled,
+              rows,
+              maxLength,
+              className: `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 ${resizeClass} ${error ? "border-destructive" : ""}`,
+              "aria-invalid": !!error,
+              ...field,
+              value: field.value || ""
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message }),
+              helpText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helpText })
+            ] }),
+            showCount && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+              currentLength,
+              maxLength && ` / ${maxLength}`
+            ] })
+          ] })
+        ] });
+      }
+    }
+  );
+}
+function FormFileUpload({
+  name,
+  label,
+  required = false,
+  helpText,
+  disabled = false,
+  className,
+  control,
+  accept,
+  multiple = false,
+  maxSize,
+  showPreview = true,
+  onFileChange
+}) {
+  const [previews, setPreviews] = React2.useState([]);
+  const handleFileChange = (files, onChange) => {
+    if (!files || files.length === 0) {
+      setPreviews([]);
+      onChange(null);
+      onFileChange?.(null);
+      return;
+    }
+    if (maxSize) {
+      const invalidFiles = Array.from(files).filter((file) => file.size > maxSize);
+      if (invalidFiles.length > 0) {
+        alert(`Some files exceed the maximum size of ${formatFileSize2(maxSize)}`);
+        return;
+      }
+    }
+    if (showPreview && accept?.includes("image")) {
+      const fileArray = Array.from(files);
+      const newPreviews = [];
+      fileArray.forEach((file) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          newPreviews.push(reader.result);
+          if (newPreviews.length === fileArray.length) {
+            setPreviews(newPreviews);
+          }
+        };
+        reader.readAsDataURL(file);
+      });
+    }
+    onChange(multiple ? files : files[0]);
+    onFileChange?.(files);
+  };
+  const formatFileSize2 = (bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  };
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field: { onChange, value, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className || ""}`, children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: String(name),
+            className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `flex items-center justify-center w-full ${error ? "border-destructive" : ""}`,
+            children: /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: String(name),
+                className: "flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer bg-background hover:bg-muted/50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center pt-5 pb-6", children: [
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: "w-8 h-8 mb-4 text-muted-foreground",
+                        "aria-hidden": "true",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        fill: "none",
+                        viewBox: "0 0 20 16",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            stroke: "currentColor",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: "2",
+                            d: "M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("p", { className: "mb-2 text-sm text-muted-foreground", children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Click to upload" }),
+                      " or drag and drop"
+                    ] }),
+                    accept && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: accept.split(",").join(", ") }),
+                    maxSize && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                      "Max size: ",
+                      formatFileSize2(maxSize)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: String(name),
+                      type: "file",
+                      accept,
+                      multiple,
+                      disabled,
+                      className: "hidden",
+                      onChange: (e) => handleFileChange(e.target.files, onChange),
+                      ...field
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        showPreview && previews.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4", children: previews.map((preview, index) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: preview,
+              alt: `Preview ${index + 1}`,
+              className: "w-full h-24 object-cover rounded-md border"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                const newPreviews = previews.filter((_, i) => i !== index);
+                setPreviews(newPreviews);
+                if (newPreviews.length === 0) {
+                  onChange(null);
+                }
+              },
+              className: "absolute top-1 right-1 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity",
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-4 w-4",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }, index)) }),
+        value && !showPreview && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: multiple && value.length > 0 ? `${value.length} file(s) selected` : value?.name }),
+        error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message }),
+        helpText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helpText })
+      ] })
+    }
+  );
+}
+function FormDatePicker({
+  name,
+  label,
+  placeholder,
+  required = false,
+  helpText,
+  disabled = false,
+  className,
+  control,
+  min,
+  max,
+  mode = "single"
+}) {
+  if (mode === "range") {
+    return /* @__PURE__ */ jsx(
+      FormDateRangePicker,
+      {
+        name,
+        label,
+        required,
+        helpText,
+        disabled,
+        className,
+        control,
+        min,
+        max
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className || ""}`, children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: String(name),
+            className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: String(name),
+            type: "date",
+            placeholder,
+            disabled,
+            min,
+            max,
+            className: `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 ${error ? "border-destructive" : ""}`,
+            "aria-invalid": !!error,
+            ...field,
+            value: field.value || ""
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message }),
+        helpText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helpText })
+      ] })
+    }
+  );
+}
+function FormDateRangePicker({
+  name,
+  label,
+  required = false,
+  helpText,
+  disabled = false,
+  className,
+  control,
+  min,
+  max
+}) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const range = field.value || {};
+        const handleFromChange = (value) => {
+          field.onChange({ ...range, from: value });
+        };
+        const handleToChange = (value) => {
+          field.onChange({ ...range, to: value });
+        };
+        return /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className || ""}`, children: [
+          /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { htmlFor: `${String(name)}-from`, className: "text-xs text-muted-foreground", children: "From" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: `${String(name)}-from`,
+                  type: "date",
+                  disabled,
+                  min,
+                  max: range.to || max,
+                  value: range.from || "",
+                  onChange: (e) => handleFromChange(e.target.value),
+                  className: `flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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 ${error ? "border-destructive" : ""}`
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { htmlFor: `${String(name)}-to`, className: "text-xs text-muted-foreground", children: "To" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: `${String(name)}-to`,
+                  type: "date",
+                  disabled,
+                  min: range.from || min,
+                  max,
+                  value: range.to || "",
+                  onChange: (e) => handleToChange(e.target.value),
+                  className: `flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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 ${error ? "border-destructive" : ""}`
+                }
+              )
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message }),
+          helpText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helpText })
+        ] });
+      }
+    }
+  );
+}
+function FormMultiSelect({
+  name,
+  label,
+  options,
+  required = false,
+  helpText,
+  disabled = false,
+  className,
+  control,
+  layout = "vertical",
+  maxSelection
+}) {
+  const layoutClasses = {
+    vertical: "flex flex-col space-y-2",
+    horizontal: "flex flex-wrap gap-4",
+    grid: "grid grid-cols-2 sm:grid-cols-3 gap-2"
+  };
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const selectedValues = field.value || [];
+        const handleToggle = (optionValue) => {
+          const newValues = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : maxSelection && selectedValues.length >= maxSelection ? selectedValues : [...selectedValues, optionValue];
+          field.onChange(newValues);
+        };
+        const isSelected = (optionValue) => selectedValues.includes(optionValue);
+        const isMaxReached = maxSelection !== void 0 && selectedValues.length >= maxSelection;
+        return /* @__PURE__ */ jsxs("div", { className: `space-y-3 ${className || ""}`, children: [
+          /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" }),
+            maxSelection && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: [
+              "(",
+              selectedValues.length,
+              "/",
+              maxSelection,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: layoutClasses[layout], children: options.map((option) => {
+            const id = `${String(name)}-${option.value}`;
+            const isOptionDisabled = disabled || option.disabled || isMaxReached && !isSelected(option.value);
+            return /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: id,
+                className: `flex items-center space-x-2 cursor-pointer ${isOptionDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id,
+                      type: "checkbox",
+                      checked: isSelected(option.value),
+                      disabled: isOptionDisabled,
+                      onChange: () => handleToggle(option.value),
+                      className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: option.label })
+                ]
+              },
+              String(option.value)
+            );
+          }) }),
+          maxSelection && isMaxReached && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            "Maximum ",
+            maxSelection,
+            " ",
+            maxSelection === 1 ? "item" : "items",
+            " can be selected"
+          ] }),
+          error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message }),
+          helpText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helpText })
+        ] });
+      }
+    }
+  );
+}
 var spacingClasses = {
   sm: "gap-3",
   md: "gap-4",
@@ -292,6 +759,157 @@ function FormGridItem({
   return /* @__PURE__ */ jsx("div", { className: `${colSpanClasses[colSpan]} ${className}`, ...props, children });
 }
 FormGridItem.displayName = "FormGridItem";
+function FormWizard({
+  steps,
+  onComplete,
+  onCancel,
+  className,
+  showStepNumbers = true
+}) {
+  const [currentStep, setCurrentStep] = React2.useState(0);
+  const [isValidating, setIsValidating] = React2.useState(false);
+  const [isCompleting, setIsCompleting] = React2.useState(false);
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === steps.length - 1;
+  const handleNext = async () => {
+    const step = steps[currentStep];
+    if (step.onValidate) {
+      setIsValidating(true);
+      try {
+        const isValid = await step.onValidate();
+        if (!isValid) {
+          setIsValidating(false);
+          return;
+        }
+      } catch (error) {
+        console.error("Validation error:", error);
+        setIsValidating(false);
+        return;
+      }
+      setIsValidating(false);
+    }
+    if (isLastStep) {
+      setIsCompleting(true);
+      try {
+        await onComplete();
+      } finally {
+        setIsCompleting(false);
+      }
+    } else {
+      setCurrentStep((prev) => prev + 1);
+    }
+  };
+  const handleBack = () => {
+    if (!isFirstStep) {
+      setCurrentStep((prev) => prev - 1);
+    }
+  };
+  const handleStepClick = (stepIndex) => {
+    if (stepIndex < currentStep) {
+      setCurrentStep(stepIndex);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-8 ${className || ""}`, children: [
+    /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center justify-between", children: steps.map((step, index) => {
+      const isActive = index === currentStep;
+      const isCompleted = index < currentStep;
+      const isClickable = index < currentStep;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: `flex items-center ${index !== steps.length - 1 ? "flex-1" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => isClickable && handleStepClick(index),
+                disabled: !isClickable,
+                className: `flex items-center space-x-3 ${isClickable ? "cursor-pointer" : "cursor-default"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `flex h-10 w-10 items-center justify-center rounded-full border-2 transition-colors ${isActive ? "border-primary bg-primary text-primary-foreground" : isCompleted ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground text-muted-foreground"}`,
+                      children: isCompleted ? /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "h-5 w-5",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          viewBox: "0 0 20 20",
+                          fill: "currentColor",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      ) : showStepNumbers ? /* @__PURE__ */ jsx("span", { children: index + 1 }) : null
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "hidden sm:block text-left", children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: `text-sm font-medium ${isActive ? "text-foreground" : "text-muted-foreground"}`,
+                        children: step.title
+                      }
+                    ),
+                    step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: step.description })
+                  ] })
+                ]
+              }
+            ),
+            index !== steps.length - 1 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `mx-2 h-0.5 flex-1 transition-colors ${isCompleted ? "bg-primary" : "bg-muted"}`
+              }
+            )
+          ]
+        },
+        index
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-8", children: steps[currentStep].content }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between pt-6 border-t", children: [
+      /* @__PURE__ */ jsx("div", { children: onCancel && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2",
+          children: "Cancel"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+        !isFirstStep && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleBack,
+            disabled: isValidating || isCompleting,
+            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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2",
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleNext,
+            disabled: isValidating || isCompleting,
+            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",
+            children: isValidating || isCompleting ? "Loading..." : isLastStep ? "Complete" : "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 function useSmartFieldArray({
   name,
   control,
@@ -310,7 +928,176 @@ function useSmartFieldArray({
     append
   };
 }
+var emailSchema = z.string().min(1, "Email is required").email("Invalid email address");
+var passwordSchema = z.string().min(8, "Password must be at least 8 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/[0-9]/, "Password must contain at least one number");
+var strongPasswordSchema = z.string().min(12, "Password must be at least 12 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/[0-9]/, "Password must contain at least one number").regex(/[^A-Za-z0-9]/, "Password must contain at least one special character");
+var phoneSchema = z.string().min(1, "Phone number is required").regex(/^\+?[1-9]\d{1,14}$/, "Invalid phone number format");
+var urlSchema = z.string().min(1, "URL is required").url("Invalid URL format");
+var usernameSchema = z.string().min(3, "Username must be at least 3 characters").max(20, "Username must be at most 20 characters").regex(/^[a-zA-Z0-9_]+$/, "Username can only contain letters, numbers, and underscores");
+var slugSchema = z.string().min(1, "Slug is required").regex(/^[a-z0-9-]+$/, "Slug can only contain lowercase letters, numbers, and hyphens");
+var positiveNumberSchema = z.number().positive("Must be a positive number");
+var positiveIntegerSchema = z.number().int("Must be an integer").positive("Must be a positive number");
+var priceSchema = z.number().nonnegative("Price cannot be negative").multipleOf(0.01, "Price can have at most 2 decimal places");
+var percentageSchema = z.number().min(0, "Percentage must be at least 0").max(100, "Percentage cannot exceed 100");
+var dateStringSchema = z.string().min(1, "Date is required").regex(/^\d{4}-\d{2}-\d{2}$/, "Date must be in YYYY-MM-DD format");
+var futureDateSchema = z.string().refine((date) => new Date(date) > /* @__PURE__ */ new Date(), {
+  message: "Date must be in the future"
+});
+var pastDateSchema = z.string().refine((date) => new Date(date) < /* @__PURE__ */ new Date(), {
+  message: "Date must be in the past"
+});
+var createFileSizeSchema = (maxSizeInBytes, message) => z.instanceof(File).refine((file) => file.size <= maxSizeInBytes, {
+  message: message || `File size must be less than ${formatFileSize(maxSizeInBytes)}`
+});
+var createFileTypeSchema = (allowedTypes, message) => z.instanceof(File).refine((file) => allowedTypes.includes(file.type), {
+  message: message || `File type must be one of: ${allowedTypes.join(", ")}`
+});
+var imageFileSchema = z.instanceof(File).refine((file) => file.size <= 5 * 1024 * 1024, {
+  message: "Image must be less than 5MB"
+}).refine(
+  (file) => ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif"].includes(file.type),
+  {
+    message: "File must be an image (JPEG, PNG, WebP, or GIF)"
+  }
+);
+var createConfirmPasswordSchema = (passwordField) => z.object({
+  [passwordField]: z.string(),
+  confirmPassword: z.string()
+}).refine((data) => data[passwordField] === data.confirmPassword, {
+  message: "Passwords do not match",
+  path: ["confirmPassword"]
+});
+var optionalEmailSchema = z.union([
+  z.string().length(0),
+  emailSchema
+]);
+var optionalUrlSchema = z.union([
+  z.string().length(0),
+  urlSchema
+]);
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+}
+function getErrorMessage(errors, fieldName) {
+  const fieldError = errors[fieldName];
+  if (!fieldError) return void 0;
+  if (typeof fieldError.message === "string") return fieldError.message;
+  return "Invalid value";
+}
+function hasError(errors, fieldName) {
+  return !!errors[fieldName];
+}
+function getAllErrors(errors) {
+  const messages = [];
+  Object.keys(errors).forEach((key) => {
+    const error = errors[key];
+    if (error && typeof error.message === "string") {
+      messages.push(error.message);
+    }
+  });
+  return messages;
+}
+function conditionalSchema(_dependentField, _condition, schema) {
+  return z.any().superRefine((value, ctx) => {
+    const parent = ctx.path[ctx.path.length - 2];
+    if (!parent) return;
+    return schema.parse(value);
+  });
+}
+function lengthMessage(field, min, max) {
+  if (min && max) {
+    return `${field} must be between ${min} and ${max} characters`;
+  }
+  if (min) {
+    return `${field} must be at least ${min} characters`;
+  }
+  if (max) {
+    return `${field} must be at most ${max} characters`;
+  }
+  return `Invalid ${field.toLowerCase()}`;
+}
+function requiredMessage(field) {
+  return `${field} is required`;
+}
+function invalidFormatMessage(field) {
+  return `Invalid ${field.toLowerCase()} format`;
+}
+function validateCreditCard(cardNumber) {
+  const sanitized = cardNumber.replace(/\s/g, "");
+  if (!/^\d+$/.test(sanitized)) return false;
+  let sum = 0;
+  let isEven = false;
+  for (let i = sanitized.length - 1; i >= 0; i--) {
+    let digit = parseInt(sanitized[i], 10);
+    if (isEven) {
+      digit *= 2;
+      if (digit > 9) {
+        digit -= 9;
+      }
+    }
+    sum += digit;
+    isEven = !isEven;
+  }
+  return sum % 10 === 0;
+}
+function validateIBAN(iban) {
+  const sanitized = iban.replace(/\s/g, "").toUpperCase();
+  if (!/^[A-Z]{2}\d{2}[A-Z0-9]+$/.test(sanitized)) return false;
+  if (sanitized.length < 15 || sanitized.length > 34) return false;
+  const rearranged = sanitized.slice(4) + sanitized.slice(0, 4);
+  const numeric = rearranged.replace(
+    /[A-Z]/g,
+    (char) => String(char.charCodeAt(0) - 55)
+  );
+  let remainder = numeric;
+  while (remainder.length > 2) {
+    const block = remainder.slice(0, 9);
+    remainder = parseInt(block, 10) % 97 + remainder.slice(block.length);
+  }
+  return parseInt(remainder, 10) % 97 === 1;
+}
+function validatePasswordStrength(password) {
+  const requirements = [];
+  if (password.length < 12) {
+    requirements.push("At least 12 characters");
+  }
+  if (!/[A-Z]/.test(password)) {
+    requirements.push("One uppercase letter");
+  }
+  if (!/[a-z]/.test(password)) {
+    requirements.push("One lowercase letter");
+  }
+  if (!/[0-9]/.test(password)) {
+    requirements.push("One number");
+  }
+  if (!/[^A-Za-z0-9]/.test(password)) {
+    requirements.push("One special character");
+  }
+  return {
+    isStrong: requirements.length === 0,
+    missingRequirements: requirements
+  };
+}
+function sanitizeString(input) {
+  return input.replace(/<[^>]*>/g, "").replace(/\s+/g, " ").trim();
+}
+function validateFileExtension(filename, allowedExtensions) {
+  const extension = filename.split(".").pop()?.toLowerCase();
+  return extension ? allowedExtensions.includes(extension) : false;
+}
+function formatValidationError(error) {
+  const formatted = {};
+  error.errors.forEach((err) => {
+    const path = err.path.join(".");
+    formatted[path] = err.message;
+  });
+  return formatted;
+}
 
-export { FormCheckbox, FormField, FormGrid, FormGridItem, FormLayout, FormSection, FormSelect, useSmartFieldArray, useSmartForm };
+export { FormCheckbox, FormDatePicker, FormField, FormFileUpload, FormGrid, FormGridItem, FormLayout, FormMultiSelect, FormSection, FormSelect, FormTextarea, FormWizard, conditionalSchema, createConfirmPasswordSchema, createFileSizeSchema, createFileTypeSchema, dateStringSchema, emailSchema, formatValidationError, futureDateSchema, getAllErrors, getErrorMessage, hasError, imageFileSchema, invalidFormatMessage, lengthMessage, optionalEmailSchema, optionalUrlSchema, passwordSchema, pastDateSchema, percentageSchema, phoneSchema, positiveIntegerSchema, positiveNumberSchema, priceSchema, requiredMessage, sanitizeString, slugSchema, strongPasswordSchema, urlSchema, useSmartFieldArray, useSmartForm, usernameSchema, validateCreditCard, validateFileExtension, validateIBAN, validatePasswordStrength };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map