@mehdashti/forms 0.3.1 → 0.4.1

package/dist/index.js

@@ -1,7 +1,7 @@
-import { useForm, Controller, useFieldArray } from 'react-hook-form';
+import { useForm, Controller, useFormContext, useFieldArray } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React2 from 'react';
+import * as React4 from 'react';
 import { z } from 'zod';
 export { z } from 'zod';
 
@@ -273,7 +273,7 @@ function FormFileUpload({
   showPreview = true,
   onFileChange
 }) {
-  const [previews, setPreviews] = React2.useState([]);
+  const [previews, setPreviews] = React4.useState([]);
   const handleFileChange = (files, onChange) => {
     if (!files || files.length === 0) {
       setPreviews([]);
@@ -655,6 +655,425 @@ function FormMultiSelect({
     }
   );
 }
+function FormRadioGroup({
+  name,
+  label,
+  options,
+  orientation = "vertical",
+  helperText,
+  required,
+  disabled,
+  className
+}) {
+  const {
+    register,
+    formState: { errors }
+  } = useFormContext();
+  const error = errors[name]?.message;
+  const fieldId = `field-${name}`;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    label && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs("label", { id: fieldId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-labelledby": label ? fieldId : void 0,
+        className: orientation === "horizontal" ? "flex flex-wrap gap-4" : "space-y-3",
+        children: options.map((option) => {
+          const optionId = `${fieldId}-${option.value}`;
+          const isDisabled = disabled || option.disabled;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center h-5", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...register(name),
+                type: "radio",
+                id: optionId,
+                value: option.value,
+                disabled: isDisabled,
+                className: `
+                    h-4 w-4 border-gray-300 text-blue-600
+                    focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+                    disabled:opacity-50 disabled:cursor-not-allowed
+                    dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-offset-gray-900
+                  `
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "ml-3", children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: optionId,
+                  className: `
+                    text-sm font-medium
+                    ${isDisabled ? "text-gray-400 cursor-not-allowed" : "text-gray-700 dark:text-gray-300 cursor-pointer"}
+                  `,
+                  children: option.label
+                }
+              ),
+              option.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: option.description })
+            ] })
+          ] }, option.value);
+        })
+      }
+    ),
+    helperText && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600 dark:text-red-400", role: "alert", children: error })
+  ] });
+}
+function FormSwitch({
+  name,
+  label,
+  description,
+  helperText,
+  required,
+  disabled,
+  className,
+  onChange
+}) {
+  const {
+    register,
+    watch,
+    setValue,
+    formState: { errors }
+  } = useFormContext();
+  const value = watch(name);
+  const checked = Boolean(value);
+  const error = errors[name]?.message;
+  const fieldId = `field-${name}`;
+  const handleChange = (e) => {
+    const newValue = e.target.checked;
+    setValue(name, newValue, { shouldValidate: true, shouldDirty: true });
+    onChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center h-5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": checked,
+            "aria-labelledby": label ? `${fieldId}-label` : void 0,
+            "aria-describedby": description ? `${fieldId}-description` : void 0,
+            disabled,
+            onClick: () => {
+              if (!disabled) {
+                const newValue = !checked;
+                setValue(name, newValue, { shouldValidate: true, shouldDirty: true });
+                onChange?.(newValue);
+              }
+            },
+            className: `
+              relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent
+              transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+              disabled:opacity-50 disabled:cursor-not-allowed
+              dark:focus:ring-offset-gray-900
+              ${checked ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"}
+            `,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `
+                pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0
+                transition duration-200 ease-in-out
+                ${checked ? "translate-x-5" : "translate-x-0"}
+              `
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...register(name),
+            type: "checkbox",
+            id: fieldId,
+            checked,
+            onChange: handleChange,
+            className: "sr-only",
+            disabled
+          }
+        )
+      ] }),
+      (label || description) && /* @__PURE__ */ jsxs("div", { className: "ml-3", children: [
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            id: `${fieldId}-label`,
+            htmlFor: fieldId,
+            className: `
+                  text-sm font-medium
+                  ${disabled ? "text-gray-400" : "text-gray-700 dark:text-gray-300"}
+                `,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: `${fieldId}-description`,
+            className: "text-xs text-gray-500 dark:text-gray-400",
+            children: description
+          }
+        )
+      ] })
+    ] }),
+    helperText && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600 dark:text-red-400", role: "alert", children: error })
+  ] });
+}
+function FormTagInput({
+  name,
+  label,
+  placeholder = "Type and press Enter...",
+  helperText,
+  required,
+  disabled,
+  maxTags,
+  separators = ["Enter", ","],
+  validateTag,
+  className
+}) {
+  const {
+    watch,
+    setValue,
+    formState: { errors }
+  } = useFormContext();
+  const [inputValue, setInputValue] = React4.useState("");
+  const [tagError, setTagError] = React4.useState("");
+  const tags = watch(name) || [];
+  const error = errors[name]?.message;
+  const fieldId = `field-${name}`;
+  const addTag = (tag) => {
+    const trimmed = tag.trim();
+    if (!trimmed) return;
+    if (tags.includes(trimmed)) {
+      setTagError("Tag already exists");
+      return;
+    }
+    if (maxTags && tags.length >= maxTags) {
+      setTagError(`Maximum ${maxTags} tags allowed`);
+      return;
+    }
+    if (validateTag) {
+      const validation = validateTag(trimmed);
+      if (validation === false) {
+        setTagError("Invalid tag");
+        return;
+      }
+      if (typeof validation === "string") {
+        setTagError(validation);
+        return;
+      }
+    }
+    setValue(name, [...tags, trimmed], {
+      shouldValidate: true,
+      shouldDirty: true
+    });
+    setInputValue("");
+    setTagError("");
+  };
+  const removeTag = (index) => {
+    const newTags = tags.filter((_, i) => i !== index);
+    setValue(name, newTags, {
+      shouldValidate: true,
+      shouldDirty: true
+    });
+  };
+  const handleKeyDown = (e) => {
+    if (separators.includes(e.key)) {
+      e.preventDefault();
+      addTag(inputValue);
+    } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+  const handleBlur = () => {
+    if (inputValue.trim()) {
+      addTag(inputValue);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: fieldId,
+        className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `
+          flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]
+          ${disabled ? "bg-gray-50 dark:bg-gray-900 cursor-not-allowed" : "bg-white dark:bg-gray-800"}
+          ${error || tagError ? "border-red-300 dark:border-red-700" : "border-gray-300 dark:border-gray-600"}
+          focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500
+          dark:focus-within:ring-blue-400 dark:focus-within:border-blue-400
+        `,
+        children: [
+          tags.map((tag, index) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 px-2 py-1 text-sm bg-blue-100 text-blue-800 rounded dark:bg-blue-900 dark:text-blue-200",
+              children: [
+                tag,
+                !disabled && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => removeTag(index),
+                    className: "ml-1 hover:text-blue-600 dark:hover:text-blue-300",
+                    "aria-label": `Remove ${tag}`,
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            index
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: fieldId,
+              type: "text",
+              value: inputValue,
+              onChange: (e) => {
+                setInputValue(e.target.value);
+                setTagError("");
+              },
+              onKeyDown: handleKeyDown,
+              onBlur: handleBlur,
+              placeholder: tags.length === 0 ? placeholder : "",
+              disabled: disabled || maxTags !== void 0 && tags.length >= maxTags,
+              className: "flex-1 min-w-[120px] outline-none bg-transparent text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 disabled:cursor-not-allowed"
+            }
+          )
+        ]
+      }
+    ),
+    helperText && !error && !tagError && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    (error || tagError) && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", role: "alert", children: error || tagError }),
+    maxTags && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: [
+      tags.length,
+      " / ",
+      maxTags,
+      " tags"
+    ] })
+  ] });
+}
+function FormErrorSummary({
+  title = "Please fix the following errors:",
+  fieldLabels = {},
+  show,
+  className,
+  onErrorClick
+}) {
+  const {
+    formState: { errors }
+  } = useFormContext();
+  const errorList = React4.useMemo(() => {
+    return flattenErrors(errors, fieldLabels);
+  }, [errors, fieldLabels]);
+  const shouldShow = show !== void 0 ? show : errorList.length > 0;
+  if (!shouldShow) {
+    return null;
+  }
+  const handleErrorClick = (fieldName) => {
+    const field = document.getElementById(`field-${fieldName}`) || document.querySelector(`[name="${fieldName}"]`);
+    if (field) {
+      field.focus();
+      field.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    onErrorClick?.(fieldName);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "polite",
+      className: `
+        rounded-md bg-red-50 dark:bg-red-900/20 p-4 border border-red-200 dark:border-red-800
+        ${className}
+      `,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-5 w-5 text-red-400 dark:text-red-600",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "ml-3 flex-1", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-red-800 dark:text-red-300", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-red-700 dark:text-red-400", children: /* @__PURE__ */ jsx("ul", { className: "list-disc space-y-1 pl-5", children: errorList.map(({ fieldName, fieldLabel, message }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleErrorClick(fieldName),
+              className: "hover:underline focus:outline-none focus:underline text-left",
+              children: [
+                /* @__PURE__ */ jsxs("strong", { children: [
+                  fieldLabel,
+                  ":"
+                ] }),
+                " ",
+                message
+              ]
+            }
+          ) }, fieldName)) }) })
+        ] })
+      ] })
+    }
+  );
+}
+function flattenErrors(errors, fieldLabels, prefix = "") {
+  const result = [];
+  for (const [key, value] of Object.entries(errors)) {
+    const fieldName = prefix ? `${prefix}.${key}` : key;
+    if (value && typeof value === "object") {
+      if ("message" in value && typeof value.message === "string") {
+        result.push({
+          fieldName,
+          fieldLabel: fieldLabels[fieldName] || formatFieldName(fieldName),
+          message: value.message
+        });
+      } else {
+        result.push(...flattenErrors(value, fieldLabels, fieldName));
+      }
+    }
+  }
+  return result;
+}
+function formatFieldName(name) {
+  return name.split(".").pop().replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase()).trim();
+}
 var spacingClasses = {
   sm: "gap-3",
   md: "gap-4",
@@ -766,9 +1185,9 @@ function FormWizard({
   className,
   showStepNumbers = true
 }) {
-  const [currentStep, setCurrentStep] = React2.useState(0);
-  const [isValidating, setIsValidating] = React2.useState(false);
-  const [isCompleting, setIsCompleting] = React2.useState(false);
+  const [currentStep, setCurrentStep] = React4.useState(0);
+  const [isValidating, setIsValidating] = React4.useState(false);
+  const [isCompleting, setIsCompleting] = React4.useState(false);
   const isFirstStep = currentStep === 0;
   const isLastStep = currentStep === steps.length - 1;
   const handleNext = async () => {
@@ -928,6 +1347,47 @@ function useSmartFieldArray({
     append
   };
 }
+function useUnsavedChanges(options = {}) {
+  const {
+    message = "You have unsaved changes. Are you sure you want to leave?",
+    enabled = true,
+    onBeforeUnload
+  } = options;
+  const {
+    formState: { isDirty, isSubmitting, isSubmitSuccessful }
+  } = useFormContext();
+  const hasUnsavedChanges = isDirty && !isSubmitting && !isSubmitSuccessful;
+  React4.useEffect(() => {
+    if (!enabled) return;
+    const handleBeforeUnload = (event) => {
+      if (hasUnsavedChanges) {
+        event.preventDefault();
+        event.returnValue = message;
+        onBeforeUnload?.(hasUnsavedChanges);
+        return message;
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [hasUnsavedChanges, message, enabled, onBeforeUnload]);
+  return {
+    hasUnsavedChanges,
+    isDirty
+  };
+}
+function useUnsavedChangesBlocker() {
+  const {
+    formState: { isDirty, isSubmitting, isSubmitSuccessful }
+  } = useFormContext();
+  const hasUnsavedChanges = isDirty && !isSubmitting && !isSubmitSuccessful;
+  return {
+    hasUnsavedChanges,
+    isDirty,
+    shouldBlock: hasUnsavedChanges
+  };
+}
 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");
@@ -1098,6 +1558,6 @@ function formatValidationError(error) {
   return formatted;
 }
 
-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 };
+export { FormCheckbox, FormDatePicker, FormErrorSummary, FormField, FormFileUpload, FormGrid, FormGridItem, FormLayout, FormMultiSelect, FormRadioGroup, FormSection, FormSelect, FormSwitch, FormTagInput, 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, useUnsavedChanges, useUnsavedChangesBlocker, usernameSchema, validateCreditCard, validateFileExtension, validateIBAN, validatePasswordStrength };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map