@pos-360/horizon 0.7.0 → 0.8.0

package/dist/{chunk-4GEUF55E.js → chunk-LUUH457P.js}

@@ -1257,6 +1257,7 @@ LargePanel.Stats = LargePanelStats;
 LargePanel.Chart = LargePanelChart;
 LargePanel.Content = LargePanelContent;
 LargePanel.Table = LargePanelTable;
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var Input = React.forwardRef(
   ({
     label,
@@ -1292,12 +1293,32 @@ var Input = React.forwardRef(
     readOnly = false,
     tabIndex = 0,
     tooltip,
+    passwordRules,
+    onValidationChange,
     ...props
   }, ref) => {
     const [showTooltip, setShowTooltip] = React.useState(false);
+    const [internalError, setInternalError] = React.useState("");
+    const [hasBeenBlurred, setHasBeenBlurred] = React.useState(false);
+    const [showPassword, setShowPassword] = React.useState(false);
+    const inputInternalRef = React.useRef(null);
+    const handleTogglePassword = () => {
+      const input = inputInternalRef.current;
+      const start = input?.selectionStart ?? null;
+      const end = input?.selectionEnd ?? null;
+      setShowPassword((v) => !v);
+      requestAnimationFrame(() => {
+        if (input && start !== null && end !== null) {
+          input.focus();
+          input.setSelectionRange(start, end);
+        }
+      });
+    };
     const isNumberType = type === "number";
     const isSelectType = type === "select";
     const isMobileType = type === "mobile";
+    const isEmailType = type === "email";
+    const isPasswordType = type === "password";
     const [inputValue, setInputValue] = React.useState(
       value !== void 0 ? value.toString() : ""
     );
@@ -1306,6 +1327,28 @@ var Input = React.forwardRef(
         setInputValue(value.toString());
       }
     }, [value]);
+    const displayError = error || internalError;
+    const currentPasswordValue = isPasswordType ? inputValue : "";
+    const passwordRuleResults = passwordRules ? {
+      minLength: passwordRules.minLength !== void 0 ? currentPasswordValue.length >= passwordRules.minLength : null,
+      uppercase: passwordRules.requireUppercase ? /[A-Z]/.test(currentPasswordValue) : null,
+      lowercase: passwordRules.requireLowercase ? /[a-z]/.test(currentPasswordValue) : null,
+      number: passwordRules.requireNumber ? /[0-9]/.test(currentPasswordValue) : null,
+      specialChar: passwordRules.requireSpecialChar ? /[^a-zA-Z0-9]/.test(currentPasswordValue) : null
+    } : null;
+    const isPasswordValid = passwordRuleResults ? Object.values(passwordRuleResults).every((v) => v === null || v === true) : true;
+    React.useEffect(() => {
+      if (isPasswordType && onValidationChange) {
+        onValidationChange(isPasswordValid);
+      }
+    }, [isPasswordValid, isPasswordType, onValidationChange]);
+    const passwordRuleLabels = {
+      minLength: (r) => `At least ${r.minLength} characters`,
+      uppercase: () => "One uppercase letter",
+      lowercase: () => "One lowercase letter",
+      number: () => "One number",
+      specialChar: () => "One special character"
+    };
     const formatNumber = (num) => {
       if (precision > 0) {
         return parseFloat(num.toFixed(precision));
@@ -1321,6 +1364,29 @@ var Input = React.forwardRef(
       if (max !== void 0 && num > max) return false;
       return true;
     };
+    const handleKeyDown = (e) => {
+      if (!isNumberType) return;
+      const allowedKeys = [
+        "Backspace",
+        "Delete",
+        "Tab",
+        "Enter",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End"
+      ];
+      const isAllowedKey = allowedKeys.includes(e.key);
+      const isDigit = /^[0-9]$/.test(e.key);
+      const isDecimalPoint = e.key === "." && precision > 0 && !inputValue.includes(".");
+      const isNegativeSign = e.key === "-" && allowNegative && inputValue === "";
+      const isCtrlOrMeta = e.ctrlKey || e.metaKey;
+      if (!isAllowedKey && !isDigit && !isDecimalPoint && !isNegativeSign && !isCtrlOrMeta) {
+        e.preventDefault();
+      }
+    };
     const handleInputChange = (e) => {
       if (isMobileType) {
         const digits = (e.target.value || "").replace(/\D/g, "").slice(0, 10);
@@ -1329,7 +1395,15 @@ var Input = React.forwardRef(
         });
         return;
       }
-      if (isNumberType && onNumberChange) {
+      if (isPasswordType) {
+        const filtered = e.target.value.replace(/\s/g, "");
+        setInputValue(filtered);
+        if (filtered !== e.target.value && onChange) {
+          onChange({ ...e, target: { ...e.target, value: filtered } });
+        } else {
+          onChange?.(e);
+        }
+      } else if (isNumberType) {
         const newValue = e.target.value;
         if (newValue === "" || allowNegative && newValue === "-") {
           setInputValue(newValue);
@@ -1339,13 +1413,51 @@ var Input = React.forwardRef(
           setInputValue(newValue);
           const numValue = parseFloat(newValue);
           if (!isNaN(numValue)) {
-            onNumberChange(formatNumber(numValue));
+            onNumberChange?.(formatNumber(numValue));
           }
         }
       } else {
         onChange?.(e);
       }
     };
+    const handleFocus = (e) => {
+      if (isEmailType || isMobileType) {
+        setInternalError("");
+      }
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setHasBeenBlurred(true);
+      if (isEmailType) {
+        const val = (e.target.value || "").trim();
+        if (val && !EMAIL_REGEX.test(val)) {
+          setInternalError("Please enter a valid email address");
+        } else {
+          setInternalError("");
+        }
+      }
+      if (isMobileType) {
+        const digits = (e.target.value || "").replace(/\D/g, "");
+        if (digits && digits.length !== 10) {
+          setInternalError("Please enter a valid 10-digit phone number");
+        } else {
+          setInternalError("");
+        }
+      }
+      if (isNumberType) {
+        if (inputValue !== "" && inputValue !== "-") {
+          const numValue = parseFloat(inputValue);
+          if (!isNaN(numValue)) {
+            const cleanValue = formatNumber(numValue);
+            setInputValue(cleanValue.toString());
+            onNumberChange?.(cleanValue);
+          }
+        } else if (inputValue === "" || inputValue === "-") {
+          setInputValue("");
+        }
+      }
+      onBlur?.(e);
+    };
     const handleSelectChange = (e) => {
       onSelectChange?.(e.target.value);
     };
@@ -1367,22 +1479,7 @@ var Input = React.forwardRef(
       setInputValue(finalValue.toString());
       onNumberChange?.(finalValue);
     };
-    const handleBlur = (e) => {
-      if (isNumberType && onNumberChange) {
-        if (inputValue !== "" && inputValue !== "-") {
-          const numValue = parseFloat(inputValue);
-          if (!isNaN(numValue)) {
-            const cleanValue = formatNumber(numValue);
-            setInputValue(cleanValue.toString());
-            onNumberChange(cleanValue);
-          }
-        } else if (inputValue === "" || inputValue === "-") {
-          setInputValue("");
-        }
-      }
-      onBlur?.(e);
-    };
-    const baseInputStyles = "w-full transition-colors focus:outline-none min-h-[52px]";
+    const baseInputStyles = "w-full transition-colors focus:outline-none";
     const sizeStyles = {
       sm: "px-3 py-2 text-sm",
       md: "px-4 py-3 text-base",
@@ -1400,13 +1497,13 @@ var Input = React.forwardRef(
     };
     const variantStyles2 = {
       default: "border bg-white/60 dark:bg-neutral-800/60 backdrop-blur-sm transition-colors duration-hz-slow ease-hz-default rounded-hz-md",
-      filled: "border-0 bg-neutral-50/60 dark:bg-neutral-700/60 backdrop-blur-sm transition-colors duration-hz-slow ease-hz-default rounded-hz-md"
+      filled: "border border-transparent bg-neutral-50/60 dark:bg-neutral-700/60 backdrop-blur-sm transition-colors duration-hz-slow ease-hz-default rounded-hz-md"
     };
-    const stateStyles = error ? "border-rose-500/50 dark:border-rose-400/50 focus:border-rose-600/70 dark:focus:border-rose-500/70 focus:ring-1 focus:ring-rose-500/50 dark:focus:ring-rose-400/50" : "border-neutral-300/50 dark:border-neutral-600/50 focus:border-blue-500/70 dark:focus:border-blue-400/70 focus:ring-1 focus:ring-blue-500/50 dark:focus:ring-blue-400/50";
+    const stateStyles = displayError ? "border-rose-500/50 dark:border-rose-400/50 focus:border-rose-600/70 dark:focus:border-rose-500/70 focus:ring-1 focus:ring-rose-500/50 dark:focus:ring-rose-400/50" : "border-neutral-300/50 dark:border-neutral-600/50 focus:border-blue-500/70 dark:focus:border-blue-400/70 focus:ring-1 focus:ring-blue-500/50 dark:focus:ring-blue-400/50";
     const disabledStyles = disabled ? "bg-neutral-100/60 dark:bg-neutral-700/60 text-neutral-500 dark:text-neutral-400 cursor-not-allowed" : "text-neutral-900 dark:text-neutral-100";
     const hasControls = isNumberType && showControls;
     const hasLeadingContent = leadingIcon || leadingDecorator;
-    const hasTrailingContent = trailingIcon || trailingDecorator || hasControls;
+    const hasTrailingContent = trailingIcon || trailingDecorator || hasControls || isPasswordType;
     const inputClasses = `
     ${baseInputStyles}
     ${sizeStyles[size]}
@@ -1430,6 +1527,7 @@ var Input = React.forwardRef(
   `.trim().replace(/\s+/g, " ");
     const canDecrement = !disabled && (min === void 0 || (parseFloat(inputValue) || 0) > min);
     const canIncrement = !disabled && (max === void 0 || (parseFloat(inputValue) || 0) < max);
+    const showPasswordRules = isPasswordType && passwordRules && hasBeenBlurred;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
       label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300 transition-colors duration-hz-slow ease-hz-default flex items-center", children: [
@@ -1488,13 +1586,18 @@ var Input = React.forwardRef(
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
-            ref,
-            type: isMobileType ? "tel" : isNumberType ? "text" : type,
+            ref: (node) => {
+              inputInternalRef.current = node;
+              if (typeof ref === "function") ref(node);
+              else if (ref) ref.current = node;
+            },
+            type: isMobileType ? "tel" : isNumberType ? "text" : isPasswordType ? showPassword ? "text" : "password" : type,
             inputMode: isMobileType ? "numeric" : isNumberType ? "numeric" : void 0,
-            value: isNumberType && onNumberChange ? inputValue : value,
+            value: isNumberType || isPasswordType ? inputValue : value,
             onChange: handleInputChange,
-            onFocus,
-            onBlur: isNumberType && onNumberChange ? handleBlur : onBlur,
+            onKeyDown: isNumberType ? handleKeyDown : void 0,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
             placeholder,
             disabled,
             required,
@@ -1510,6 +1613,7 @@ var Input = React.forwardRef(
             "button",
             {
               type: "button",
+              onMouseDown: (e) => e.preventDefault(),
               onClick: handleDecrement,
               disabled: !canDecrement,
               className: `
@@ -1527,6 +1631,7 @@ var Input = React.forwardRef(
             "button",
             {
               type: "button",
+              onMouseDown: (e) => e.preventDefault(),
               onClick: handleIncrement,
               disabled: !canIncrement,
               className: `
@@ -1540,6 +1645,17 @@ var Input = React.forwardRef(
             }
           )
         ] }) }),
+        isPasswordType && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: handleTogglePassword,
+            className: "absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors",
+            children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: iconSizeStyles[size] }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: iconSizeStyles[size] })
+          }
+        ),
         isSelectType && !trailingIcon && !trailingDecorator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(
           lucideReact.ChevronDown,
           {
@@ -1560,10 +1676,24 @@ var Input = React.forwardRef(
           }
         )
       ] }),
-      (error || helperText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
-        error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-rose-600 dark:text-rose-400 transition-colors duration-hz-slow ease-hz-default", children: error }),
-        helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-hz-slow ease-hz-default", children: helperText })
-      ] })
+      (displayError || helperText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
+        displayError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-rose-600 dark:text-rose-400 transition-colors duration-hz-slow ease-hz-default", children: displayError }),
+        helperText && !displayError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-hz-slow ease-hz-default", children: helperText })
+      ] }),
+      showPasswordRules && passwordRuleResults && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-2 space-y-1", children: Object.keys(passwordRuleResults).filter((key) => passwordRuleResults[key] !== null).map((key) => {
+        const passed = passwordRuleResults[key];
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            className: `flex items-center gap-1.5 text-xs transition-colors ${passed ? "text-green-600 dark:text-green-400" : "text-rose-500 dark:text-rose-400"}`,
+            children: [
+              passed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3 h-3 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3 shrink-0" }),
+              passwordRules && passwordRuleLabels[key](passwordRules)
+            ]
+          },
+          key
+        );
+      }) })
     ] });
   }
 );
@@ -2597,5 +2727,5 @@ exports.TextButton = TextButton;
 exports.Toast = Toast;
 exports.useDashboardContext = useDashboardContext;
 exports.useSideNavContext = useSideNavContext;
-//# sourceMappingURL=chunk-4GEUF55E.js.map
-//# sourceMappingURL=chunk-4GEUF55E.js.map
+//# sourceMappingURL=chunk-LUUH457P.js.map
+//# sourceMappingURL=chunk-LUUH457P.js.map