hazo_ui 2.1.2 → 2.2.1

package/dist/index.cjs

@@ -662,7 +662,7 @@ function FilterFieldItem({
     )
   ] });
 }
-function MultiFilterDialog({
+function HazoUiMultiFilterDialog({
   availableFields,
   onFilterChange,
   initialFilters = []
@@ -982,7 +982,7 @@ function SortableSortFieldItem({
     }
   );
 }
-function MultiSortDialog({
+function HazoUiMultiSortDialog({
   availableFields,
   onSortChange,
   initialSortFields = []
@@ -1247,7 +1247,7 @@ function getIconComponent(iconSet, iconName) {
   const IconComponent = iconLibrary[iconName];
   return IconComponent || null;
 }
-function MultiStateRadio({
+function HazoUiFlexRadio({
   layout = "horizontal",
   style = "radio",
   display_label = true,
@@ -1432,7 +1432,7 @@ function MultiStateRadio({
     ] }, item.value);
   };
   const containerClasses = cn(
-    "cls_multi_state_radio border border-input rounded-md",
+    "cls_hazo_ui_flex_radio border border-input rounded-md",
     compressed ? "" : "p-2 sm:p-3",
     layout === "horizontal" ? cn(
       "flex flex-row flex-wrap",
@@ -1466,10 +1466,208 @@ function MultiStateRadio({
     }
   }
 }
+function validateInput(value, input_type, text_len_min, text_len_max, num_min, num_max, regex, num_decimals) {
+  if (value === "") {
+    return { isValid: true };
+  }
+  switch (input_type) {
+    case "numeric": {
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return { isValid: false, errorMessage: "Must be a valid number" };
+      }
+      if (num_decimals !== void 0) {
+        const decimalPlaces = value.split(".")[1]?.length || 0;
+        if (decimalPlaces > num_decimals) {
+          return {
+            isValid: false,
+            errorMessage: `Maximum ${num_decimals} decimal place${num_decimals !== 1 ? "s" : ""} allowed`
+          };
+        }
+      }
+      if (num_min !== void 0 && numValue < num_min) {
+        return { isValid: false, errorMessage: `Must be at least ${num_min}` };
+      }
+      if (num_max !== void 0 && numValue > num_max) {
+        return { isValid: false, errorMessage: `Must be at most ${num_max}` };
+      }
+      break;
+    }
+    case "alpha": {
+      const alphaRegex = /^[A-Za-z\s]*$/;
+      if (!alphaRegex.test(value)) {
+        return { isValid: false, errorMessage: "Only letters are allowed" };
+      }
+      break;
+    }
+    case "email": {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(value)) {
+        return { isValid: false, errorMessage: "Must be a valid email address" };
+      }
+      break;
+    }
+    case "mixed": {
+      if (text_len_min !== void 0 && value.length < text_len_min) {
+        return {
+          isValid: false,
+          errorMessage: `Must be at least ${text_len_min} character${text_len_min !== 1 ? "s" : ""}`
+        };
+      }
+      if (text_len_max !== void 0 && value.length > text_len_max) {
+        return {
+          isValid: false,
+          errorMessage: `Must be at most ${text_len_max} character${text_len_max !== 1 ? "s" : ""}`
+        };
+      }
+      break;
+    }
+  }
+  if (regex) {
+    const regexPattern = typeof regex === "string" ? new RegExp(regex) : regex;
+    if (!regexPattern.test(value)) {
+      return { isValid: false, errorMessage: "Invalid format" };
+    }
+  }
+  return { isValid: true };
+}
+function filterInputValue(value, input_type, num_decimals) {
+  switch (input_type) {
+    case "numeric": {
+      let filtered = value.replace(/[^\d.-]/g, "");
+      const parts = filtered.split(".");
+      if (parts.length > 2) {
+        filtered = parts[0] + "." + parts.slice(1).join("");
+      }
+      if (num_decimals === 0 && filtered.includes(".")) {
+        filtered = filtered.replace(".", "");
+      }
+      if (num_decimals !== void 0 && num_decimals > 0) {
+        const parts2 = filtered.split(".");
+        if (parts2.length === 2 && parts2[1].length > num_decimals) {
+          filtered = parts2[0] + "." + parts2[1].substring(0, num_decimals);
+        }
+      }
+      return filtered;
+    }
+    case "alpha": {
+      return value.replace(/[^A-Za-z\s]/g, "");
+    }
+    case "email":
+    case "mixed":
+    default: {
+      return value;
+    }
+  }
+}
+var HazoUiFlexInput = React6__namespace.forwardRef(
+  ({
+    className,
+    input_type = "mixed",
+    text_len_min,
+    text_len_max,
+    num_min,
+    num_max,
+    regex,
+    num_decimals,
+    format_guide,
+    format_guide_info = false,
+    value: controlledValue,
+    onChange,
+    onBlur,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React6__namespace.useState(
+      typeof controlledValue === "string" ? controlledValue : typeof controlledValue === "number" ? String(controlledValue) : ""
+    );
+    const [errorMessage, setErrorMessage] = React6__namespace.useState();
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? typeof controlledValue === "string" ? controlledValue : String(controlledValue || "") : internalValue;
+    React6__namespace.useEffect(() => {
+      if (isControlled) {
+        const newValue = typeof controlledValue === "string" ? controlledValue : String(controlledValue || "");
+        if (newValue !== internalValue) {
+          setInternalValue(newValue);
+        }
+      }
+    }, [controlledValue, isControlled]);
+    const handleChange = (e) => {
+      let newValue = e.target.value;
+      if (input_type === "numeric" || input_type === "alpha") {
+        newValue = filterInputValue(newValue, input_type, num_decimals);
+      }
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      if (errorMessage) {
+        setErrorMessage(void 0);
+      }
+      if (onChange) {
+        const syntheticEvent = {
+          ...e,
+          target: { ...e.target, value: newValue }
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    const handleBlur = (e) => {
+      const validation = validateInput(
+        currentValue,
+        input_type,
+        text_len_min,
+        text_len_max,
+        num_min,
+        num_max,
+        regex,
+        num_decimals
+      );
+      if (!validation.isValid) {
+        setErrorMessage(validation.errorMessage || format_guide || "Invalid input");
+      } else {
+        setErrorMessage(void 0);
+      }
+      if (onBlur) {
+        onBlur(e);
+      }
+    };
+    const htmlInputType = input_type === "email" ? "email" : input_type === "numeric" ? "text" : "text";
+    const hasError = errorMessage !== void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_ui_flex_input_container w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          ref,
+          type: htmlInputType,
+          value: currentValue,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          className: cn(
+            hasError && "border-destructive focus-visible:ring-destructive",
+            className
+          ),
+          ...props
+        }
+      ),
+      hasError && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cls_error_message mt-1 text-sm text-destructive", children: errorMessage }),
+      format_guide_info && format_guide && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "cls_format_guide_info mt-1 text-xs italic text-muted-foreground",
+            hasError && "mt-0"
+          ),
+          children: format_guide
+        }
+      )
+    ] });
+  }
+);
+HazoUiFlexInput.displayName = "HazoUiFlexInput";
 
 exports.ExampleComponent = ExampleComponent;
-exports.MultiFilterDialog = MultiFilterDialog;
-exports.MultiSortDialog = MultiSortDialog;
-exports.MultiStateRadio = MultiStateRadio;
+exports.HazoUiFlexInput = HazoUiFlexInput;
+exports.HazoUiFlexRadio = HazoUiFlexRadio;
+exports.HazoUiMultiFilterDialog = HazoUiMultiFilterDialog;
+exports.HazoUiMultiSortDialog = HazoUiMultiSortDialog;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map