pejay-ui 1.0.0

package/templates/form/input.tsx

@@ -0,0 +1,255 @@
+import React, { useRef } from "react";
+import { cn } from "@/utils/cn";
+
+/*
+ * ============================================================================
+ * Types & Interfaces
+ * ============================================================================
+ */
+export interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "prefix"
+> {
+  /** Optional main text label displayed above or next to the input */
+  label?: string;
+  /** Optional secondary text helper details shown underneath the label */
+  description?: string;
+  /** Validation error text which triggers error borders and shows below the input */
+  error?: string;
+  /** Explicit left-side icon Node */
+  leftIcon?: React.ReactNode;
+  /** Optional right-side clickable/decorative icon Node */
+  rightIcon?: React.ReactNode;
+  /** Static text content displayed inside the input box on the left */
+  prefix?: React.ReactNode;
+  /** Static text content displayed inside the input box on the right */
+  suffix?: React.ReactNode;
+  /** Click action handler triggered when clicking the rightIcon */
+  onRightIconClick?: (e: React.MouseEvent) => void;
+  /** Controls layout position of label relative to the input box */
+  labelPlacement?: "top" | "left" | "right";
+  /** Sets standard width constraints when using horizontal/side labels */
+  labelWidth?: string;
+  /** Custom horizontal text alignments for the label content */
+  "labelAlign-X"?: "left" | "center" | "right";
+  /** Custom vertical cross-axis alignments for side label layout blocks */
+  "labelAlign-Y"?: "top" | "middle" | "bottom";
+}
+
+/*
+ * ============================================================================
+ * Main Input Component (ForwardRef Enabled)
+ * ============================================================================
+ */
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      leftIcon,
+      rightIcon,
+      prefix,
+      suffix,
+      onRightIconClick,
+      labelPlacement = "top",
+      labelWidth = "w-32",
+      "labelAlign-X": labelAlignX,
+      "labelAlign-Y": labelAlignY = "middle",
+      ...props
+    },
+    ref,
+  ) => {
+    /* Stores previous input content to revert/roll back invalid characters */
+    const prevValueRef = useRef(
+      props.value?.toString() || props.defaultValue?.toString() || "",
+    );
+
+    /*
+     * ------------------------------------------------------------------------
+     * Event Handlers & Sanitizers
+     * ------------------------------------------------------------------------
+     */
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      let val = e.target.value;
+
+      /* Sanitization rules for numbers (Forces float formats, locks max value limits) */
+      if (props.type === "number") {
+        const cleanVal = val.replace(/[^0-9.]/g, "");
+        const dots = cleanVal.split(".").length - 1;
+        if (dots > 1) {
+          e.target.value = prevValueRef.current;
+          return;
+        }
+        val = cleanVal;
+      }
+
+      /* Sanitization rules for tel (Allows numeric dialing codes and keys) */
+      if (props.type === "tel") {
+        val = val.replace(/[^0-9+\s()-]/g, "");
+      }
+
+      prevValueRef.current = val;
+      e.target.value = val;
+      props.onChange?.(e);
+    };
+
+    /*
+     * ------------------------------------------------------------------------
+     * Layout & Position Compilations
+     * ------------------------------------------------------------------------
+     */
+
+    const isSideLabel = labelPlacement === "left" || labelPlacement === "right";
+    const xAlignment =
+      labelAlignX || (labelPlacement === "left" ? "right" : "left");
+    const yAlignmentClass =
+      labelAlignY === "top"
+        ? "items-start"
+        : labelAlignY === "bottom"
+          ? "items-end"
+          : "items-center";
+
+    /*
+     * ------------------------------------------------------------------------
+     * Renders Component Layout Tree
+     * ------------------------------------------------------------------------
+     */
+
+    return (
+      <div
+        className={cn(
+          "flex w-full",
+          labelPlacement === "top" && "flex-col gap-1.5",
+          labelPlacement === "left" && cn("flex-row gap-4", yAlignmentClass),
+          labelPlacement === "right" &&
+            cn("flex-row-reverse gap-4", yAlignmentClass),
+        )}
+      >
+        {/* Standard Label & Optional Helper Text Block */}
+        {label && (
+          <div
+            className={cn(
+              "flex flex-col",
+              isSideLabel ? "shrink-0" : "w-full",
+              labelAlignY === "top" && isSideLabel && "mt-2.5",
+            )}
+          >
+            <div
+              className={cn(
+                isSideLabel ? labelWidth : "w-full",
+                "flex flex-col",
+                xAlignment === "left" && "items-start text-left",
+                xAlignment === "right" && "items-end text-right",
+                xAlignment === "center" && "items-center text-center",
+              )}
+            >
+              <span className="text-md font-medium text-black">{label}</span>
+              {description && (
+                <span className="text-xs text-black font-medium mt-0.5">
+                  {description}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Input Wrapper Group */}
+        <div className="flex-1 min-w-0 flex flex-col relative group">
+          {/* Dynamic Flex Container representing the input borders and decorators */}
+          <div
+            className={cn(
+              "flex items-center transition-all duration-200 gap-0",
+              "rounded-lg w-full border-[1.5px] bg-white border-black h-9",
+              "focus-within:border-sky-500 focus-within:ring-4 focus-within:ring-sky-500/10",
+              error
+                ? "border-red-600 focus-within:border-red-600 focus-within:ring-red-600/10"
+                : "",
+              props.readOnly && "cursor-pointer",
+            )}
+          >
+            {/* Left Content Decorators (Icon / Prefix) */}
+            {(leftIcon || prefix) && (
+              <div
+                className={cn(
+                  "flex items-center pl-2 pr-2 shrink-0 gap-1.5",
+                  "text-black",
+                )}
+              >
+                {leftIcon}
+                {prefix && <span className="font-medium">{prefix}</span>}
+              </div>
+            )}
+
+            {/* Native HTML Input Element */}
+            <input
+              ref={ref}
+              {...props}
+              type={
+                props.type === "number" || props.type === "tel"
+                  ? "text"
+                  : props.type
+              }
+              inputMode={
+                props.type === "number"
+                  ? "decimal"
+                  : props.type === "tel"
+                    ? "numeric"
+                    : props.inputMode
+              }
+              onChange={handleChange}
+              placeholder={props.placeholder}
+              className={cn(
+                "flex-1 w-full min-w-0 bg-transparent border-none outline-none h-full py-1.5 truncate",
+                "text-md font-medium text-black",
+                "placeholder:text-black/40 placeholder:text-sm placeholder:font-medium placeholder:truncate",
+                !(leftIcon || prefix) && "pl-2",
+                !(rightIcon || suffix) && "pr-2",
+                props.readOnly && "cursor-pointer",
+              )}
+            />
+
+            {/* Right Content Decorators (Suffix / Interactive Right Action Icon) */}
+            {(rightIcon || suffix) && (
+              <div
+                className={cn(
+                  "flex items-center pr-2.25 pl-2 shrink-0",
+                  "text-black",
+                )}
+              >
+                {suffix && <span className="font-medium">{suffix}</span>}
+                {rightIcon && (
+                  <div
+                    onClick={onRightIconClick}
+                    className={cn(
+                      "transition-colors group-focus-within:text-white",
+                      onRightIconClick && "cursor-pointer",
+                    )}
+                  >
+                    {rightIcon}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Validation Error Message Display */}
+          {error && (
+            <span
+              className={cn(
+                "text-red-600 text-xs font-medium",
+                "mt-1.5 ml-1 block animate-in fade-in slide-in-from-top-1",
+              )}
+            >
+              {error}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";

package/templates/form/number-input.tsx

@@ -0,0 +1,186 @@
+import React, { useState, useEffect } from "react";
+import { Input } from "./input";
+import { Plus, Minus } from "lucide-react";
+import { cn } from "@/utils/cn";
+
+/*
+ * ============================================================================
+ * Types & Interfaces
+ * ============================================================================
+ */
+
+interface NumberInputProps extends React.ComponentProps<typeof Input> {
+  /* Controls visibility of right-side increment/decrement steppers */
+  showSteppers?: boolean;
+  /* Value delta to apply when stepping up or down */
+  step?: number;
+  /* Minimum value constraint */
+  min?: string | number;
+  /* Maximum value constraint */
+  max?: string | number;
+  /* Allows typing and submitting negative values */
+  allowNegative?: boolean;
+  /* Max number of decimal places allowed (undefined for unlimited) */
+  decimalScale?: number;
+}
+
+/*
+ * ============================================================================
+ * NumberInput Component
+ * ============================================================================
+ */
+
+export const NumberInput = ({
+  showSteppers = true,
+  step = 1,
+  min,
+  max,
+  allowNegative = false,
+  decimalScale,
+  onChange,
+  className,
+  ...props
+}: NumberInputProps) => {
+  /* Base amount string value state */
+  const [value, setValue] = useState((props.value as string) || "");
+
+  /* Synchronize value shifts programmatically from parents */
+  useEffect(() => {
+    if (props.value !== undefined) {
+      setValue(String(props.value));
+    }
+  }, [props.value]);
+
+  /* Default min to 0 unless allowNegative is enabled */
+  const resolvedMin = min !== undefined 
+    ? (typeof min === "number" ? min : parseFloat(String(min))) 
+    : (allowNegative ? undefined : 0);
+
+  const resolvedMax = max !== undefined 
+    ? (typeof max === "number" ? max : parseFloat(String(max))) 
+    : undefined;
+
+  /* Unified value updater: performs min/max boundaries and RHF event propagation */
+  const updateValue = (newVal: number | string) => {
+    let rawValue = String(newVal);
+
+    /* Sanitize non-numeric characters (allowing decimal point and negative sign) */
+    if (allowNegative) {
+      rawValue = rawValue.replace(/(?!^)-/g, "").replace(/[^\d.-]/g, "");
+      const dotParts = rawValue.split(".");
+      if (dotParts.length > 2) rawValue = `${dotParts[0]}.${dotParts[1]}`;
+    } else {
+      rawValue = rawValue.replace(/[^\d.]/g, "");
+    }
+
+    let numeric = parseFloat(rawValue);
+
+    /* Handle empty/NaN values, including intermediate minus sign */
+    if (isNaN(numeric)) {
+      const emptyVal = allowNegative && rawValue === "-" ? "-" : "";
+      setValue(emptyVal);
+
+      const event = {
+        target: { value: emptyVal },
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange?.(event);
+      return;
+    }
+
+    /* Clamp numeric boundaries */
+    if (resolvedMin !== undefined && numeric < resolvedMin)
+      numeric = resolvedMin;
+    if (resolvedMax !== undefined && numeric > resolvedMax) numeric = resolvedMax;
+
+    /* Apply decimalScale truncation if provided */
+    let finalVal = String(numeric);
+    if (decimalScale !== undefined) {
+      const parts = String(numeric).split(".");
+      if (parts.length > 1) {
+        if (decimalScale === 0) {
+          finalVal = parts[0];
+        } else {
+          finalVal = `${parts[0]}.${parts[1].slice(0, decimalScale)}`;
+        }
+      }
+    }
+
+    /* Preserve the typed trailing dot (e.g. "2.") so they can continue typing decimals */
+    if (rawValue.endsWith(".") && !finalVal.includes(".")) {
+      finalVal += ".";
+    } else if (rawValue.includes(".") && decimalScale !== 0) {
+      const [_, fractional] = rawValue.split(".");
+      const [intPart] = finalVal.split(".");
+      const scale = decimalScale !== undefined ? decimalScale : fractional.length;
+      finalVal = `${intPart}.${fractional.slice(0, scale)}`;
+    }
+
+    setValue(finalVal);
+
+    /* Propagate change up to React Hook Form listener */
+    const event = {
+      target: { value: finalVal },
+    } as React.ChangeEvent<HTMLInputElement>;
+    onChange?.(event);
+  };
+
+  /* Text input change handler: forwards to unified value updater */
+  const handleInternalChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateValue(e.target.value);
+  };
+
+  /* Stepper button increment click action */
+  const handleIncrement = () => {
+    const current = Number(value) || 0;
+    updateValue(current + step);
+  };
+
+  /* Stepper button decrement click action */
+  const handleDecrement = () => {
+    const current = Number(value) || 0;
+    updateValue(current - step);
+  };
+
+  const isNegativeValue = value.startsWith("-");
+
+  return (
+    <Input
+      placeholder="0"
+      {...props}
+      type="text"
+      value={value}
+      onChange={handleInternalChange}
+      className={cn(isNegativeValue && "text-red-500 font-medium focus-within:border-red-500 focus-within:ring-red-500/20", className)}
+      rightIcon={
+        (showSteppers || props.rightIcon) && (
+          <div className="flex items-center gap-1.5 pl-2 ml-1">
+            {showSteppers && (
+              <div
+                className={cn(
+                  "flex items-center gap-1",
+                  props.rightIcon && "border-r border-gray-250 pr-2 mr-1",
+                )}
+              >
+                <button
+                  type="button"
+                  onClick={handleDecrement}
+                  className="p-0.5 rounded transition-colors text-white bg-black hover:bg-gray-800"
+                >
+                  <Minus size={14} />
+                </button>
+                <button
+                  type="button"
+                  onClick={handleIncrement}
+                  className="p-0.5 rounded transition-colors text-white bg-black hover:bg-gray-800"
+                >
+                  <Plus size={14} />
+                </button>
+              </div>
+            )}
+            {props.rightIcon}
+          </div>
+        )
+      }
+    />
+  );
+};

package/templates/form/password-input.tsx

@@ -0,0 +1,233 @@
+import React, { useState } from "react";
+import { Input } from "./input";
+import { Check, Eye, EyeOff, AlertTriangle } from "lucide-react";
+import { cn } from "@/utils/cn";
+
+/*
+ * ============================================================================
+ * Types & Interfaces
+ * ============================================================================
+ */
+
+interface PasswordInputProps extends React.ComponentProps<typeof Input> {
+  /* Controls visibility of the toggle password visibility button */
+  showToggle?: boolean;
+  /* Displays a warning banner when Caps Lock is toggled on */
+  showCapsLockWarning?: boolean;
+  /* Displays a password strength meter containing color-coded bars */
+  showStrengthMeter?: boolean;
+  /* Displays requirement checklists (length, number, uppercase, special) */
+  showRequirements?: boolean;
+  /* Displays a warning banner when spaces are entered in the input */
+  showWhitespaceWarning?: boolean;
+}
+
+/*
+ * ============================================================================
+ * PasswordInput Component
+ * ============================================================================
+ */
+
+export const PasswordInput = ({
+  showToggle = true,
+  showCapsLockWarning,
+  showStrengthMeter,
+  showRequirements,
+  showWhitespaceWarning,
+  ...props
+}: PasswordInputProps) => {
+  /* Visibility and CapsLock detection states */
+  const [isVisible, setIsVisible] = useState(false);
+  const [isCapsLockOn, setIsCapsLockOn] = useState(false);
+
+  /* Fallback internal value state for uncontrolled usage */
+  const [internalValue, setInternalValue] = useState(
+    props.defaultValue ? String(props.defaultValue) : "",
+  );
+
+  /* Prioritize parent value prop, fallback to internal state */
+  const value = props.value !== undefined ? String(props.value) : internalValue;
+
+  /* Toggle password plaintext visibility */
+  const toggleVisibility = () => setIsVisible(!isVisible);
+
+  /* Calculate password strength score based on length and patterns */
+  const calculateStrength = (val: string) => {
+    let score = 0;
+    if (!val) return 0;
+    if (val.length > 6) score++;
+    if (val.length > 10) score++;
+    if (/[A-Z]/.test(val)) score++;
+    if (/[0-9]/.test(val)) score++;
+    /* Exclude spaces from being counted as special characters */
+    if (/[^A-Za-z0-9\s]/.test(val)) score++;
+    return score;
+  };
+
+  const strength = calculateStrength(value);
+
+  /* Detect keyboard modifier state for Caps Lock */
+  const checkCapsLock = (
+    e: React.KeyboardEvent | React.MouseEvent | React.FocusEvent,
+  ) => {
+    if (!showCapsLockWarning) return;
+    if ("getModifierState" in e) {
+      setIsCapsLockOn(e.getModifierState("CapsLock"));
+    }
+  };
+
+  /* Get strength color mapping based on calculated score */
+  const getStrengthColor = () => {
+    if (strength <= 2) return "bg-red-500";
+    if (strength <= 3) return "bg-amber-500";
+    if (strength <= 4) return "bg-yellow-500";
+    return "bg-green-500";
+  };
+
+  /* Get strength label text based on calculated score */
+  const getStrengthLabel = () => {
+    if (strength === 0) return "";
+    if (strength <= 2) return "Weak";
+    if (strength <= 3) return "Fair";
+    if (strength <= 4) return "Good";
+    return "Strong";
+  };
+
+  /* Requirements tracking array containing checking logic */
+  const requirements = [
+    { label: "At least 8 characters", met: value.length >= 8 },
+    { label: "At least one number", met: /[0-9]/.test(value) },
+    { label: "One uppercase letter", met: /[A-Z]/.test(value) },
+    /* Exclude spaces from being counted as special characters */
+    { label: "One special character", met: /[^A-Za-z0-9\s]/.test(value) },
+  ];
+
+  return (
+    <div className="flex flex-col w-full gap-1">
+      {/* Base Input element */}
+      <Input
+        autoComplete="current-password"
+        {...props}
+        type={isVisible ? "text" : "password"}
+        onChange={e => {
+          const val = e.target.value;
+          setInternalValue(val);
+          props.onChange?.(e);
+        }}
+        onKeyUp={e => {
+          checkCapsLock(e);
+          props.onKeyUp?.(e);
+        }}
+        onFocus={e => {
+          checkCapsLock(e);
+          props.onFocus?.(e);
+        }}
+        onClick={e => {
+          checkCapsLock(e);
+          props.onClick?.(e);
+        }}
+        rightIcon={
+          showToggle ? (
+            isVisible ? (
+              <EyeOff
+                size={18}
+                className="text-black"
+              />
+            ) : (
+              <Eye
+                size={18}
+                className="text-black"
+              />
+            )
+          ) : (
+            props.rightIcon
+          )
+        }
+        onRightIconClick={
+          showToggle ? toggleVisibility : props.onRightIconClick
+        }
+      />
+
+      {/* Strength indicator bars */}
+      {showStrengthMeter && value !== "" && (
+        <div className="flex flex-col gap-1 px-1">
+          <div className="flex justify-between items-center">
+            <div className="flex gap-1 flex-1 h-1 mt-1">
+              {[1, 2, 3, 4, 5].map(step => (
+                <div
+                  key={step}
+                  className={cn(
+                    "h-full flex-1 rounded-full transition-all duration-500",
+                    strength >= step
+                      ? getStrengthColor()
+                      : "bg-black/10",
+                  )}
+                />
+              ))}
+            </div>
+            <span
+              className={cn(
+                "text-[10px] font-medium ml-2 uppercase",
+                strength > 0 ? "opacity-100" : "opacity-0",
+              )}
+            >
+              {getStrengthLabel()}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Requirement checks list */}
+      {showRequirements && value !== "" && (
+        <div className="flex flex-col gap-1.5 mt-2 px-1">
+          {requirements.map((req, i) => (
+            <div key={i} className="flex items-center gap-2">
+              <div
+                className={cn(
+                  "w-3.5 h-3.5 rounded-full flex items-center justify-center border transition-all duration-300",
+                  req.met ? "bg-green-500 border-green-500" : "border-gray-800",
+                )}
+              >
+                {req.met && <Check size={10} className="text-white" />}
+              </div>
+              <span
+                className={cn(
+                  "text-[11px] transition-colors duration-300",
+                  req.met ? "text-green-500 font-medium" : "text-gray-500",
+                )}
+              >
+                {req.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Caps Lock warning banner */}
+      {showCapsLockWarning && isCapsLockOn && (
+        <div className={"flex items-center gap-1 mt-1 px-1"}>
+          <AlertTriangle
+            size={12}
+            className="text-amber-500"
+          />
+          <span className="text-[10px] font-medium text-amber-600 uppercase tracking-wider">
+            Caps Lock is ON
+          </span>
+        </div>
+      )}
+
+      {/* Whitespace warning banner */}
+      {showWhitespaceWarning && /\s/.test(value) && (
+        <div className={"flex items-center gap-1 mt-1 px-1"}>
+          <AlertTriangle
+            size={12}
+            className="text-red-500"
+          />
+          <span className="text-[10px] font-medium text-red-500 uppercase tracking-wider">
+            Password contains spaces
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};