kesp-ui 1.0.5 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kesp-ui",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "CLI to add kesp-ui components to your project",
   "main": "index.js",
   "bin": {

package/registry/aadhaar-input.tsx

@@ -1,22 +1,34 @@
-"use client"
+"use client";
+
+import React, { useState, useRef, useCallback, useEffect } from "react";
 
-import React, { useState, useRef, useCallback } from "react";
-import { cn } from "./utils";
 import { Check, AlertCircle, CreditCard } from "lucide-react";
+import { cn } from "./utils";
 
 // ─── Verhoeff Algorithm ───────────────────────────────────────────────────────
 
 const D: number[][] = [
-  [0,1,2,3,4,5,6,7,8,9],[1,2,3,4,0,6,7,8,9,5],[2,3,4,0,1,7,8,9,5,6],
-  [3,4,0,1,2,8,9,5,6,7],[4,0,1,2,3,9,5,6,7,8],[5,9,8,7,6,0,4,3,2,1],
-  [6,5,9,8,7,1,0,4,3,2],[7,6,5,9,8,2,1,0,4,3],[8,7,6,5,9,3,2,1,0,4],
-  [9,8,7,6,5,4,3,2,1,0],
+  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+  [1, 2, 3, 4, 0, 6, 7, 8, 9, 5],
+  [2, 3, 4, 0, 1, 7, 8, 9, 5, 6],
+  [3, 4, 0, 1, 2, 8, 9, 5, 6, 7],
+  [4, 0, 1, 2, 3, 9, 5, 6, 7, 8],
+  [5, 9, 8, 7, 6, 0, 4, 3, 2, 1],
+  [6, 5, 9, 8, 7, 1, 0, 4, 3, 2],
+  [7, 6, 5, 9, 8, 2, 1, 0, 4, 3],
+  [8, 7, 6, 5, 9, 3, 2, 1, 0, 4],
+  [9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
 ];
 
 const P: number[][] = [
-  [0,1,2,3,4,5,6,7,8,9],[1,5,7,6,2,8,3,0,9,4],[5,8,0,3,7,9,6,1,4,2],
-  [8,9,1,6,0,4,3,5,2,7],[9,4,5,3,1,2,6,8,7,0],[4,2,8,6,5,7,3,9,0,1],
-  [2,7,9,3,8,0,6,4,1,5],[7,0,4,6,9,1,3,2,5,8],
+  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+  [1, 5, 7, 6, 2, 8, 3, 0, 9, 4],
+  [5, 8, 0, 3, 7, 9, 6, 1, 4, 2],
+  [8, 9, 1, 6, 0, 4, 3, 5, 2, 7],
+  [9, 4, 5, 3, 1, 2, 6, 8, 7, 0],
+  [4, 2, 8, 6, 5, 7, 3, 9, 0, 1],
+  [2, 7, 9, 3, 8, 0, 6, 4, 1, 5],
+  [7, 0, 4, 6, 9, 1, 3, 2, 5, 8],
 ];
 
 function verhoeff(num: string): boolean {
@@ -31,31 +43,36 @@ function verhoeff(num: string): boolean {
 function isValidAadhaar(digits: string): boolean {
   if (digits.length !== 12) return false;
   if (!/^\d+$/.test(digits)) return false;
-  if (!/^[2-9]/.test(digits)) return false;
-  if (/^(\d)\1{11}$/.test(digits)) return false;
-  if (!verhoeff(digits)) return false;
+  if (!/^[2-9]/.test(digits)) return false; // must not start with 0 or 1
+  if (/^(\d)\1{11}$/.test(digits)) return false; // no repeating sequence
+  if (!verhoeff(digits)) return false; // Verhoeff checksum
   return true;
 }
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-const formatAadhaar = (raw: string): string => {
+const formatAadhaar = (raw: string, separator = " "): string => {
   const digits = raw.replace(/\D/g, "").slice(0, 12);
   const parts: string[] = [];
   for (let i = 0; i < digits.length; i += 4) {
     parts.push(digits.slice(i, i + 4));
   }
-  return parts.join(" ");
+  return parts.join(separator);
 };
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 interface AadhaarInputProps {
   value?: string;
-  onChange?: (value: string) => void;
+  onChange?: (digits: string) => void;
+  onComplete?: (digits: string) => void;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
   className?: string;
   label?: string;
-  error?: string;
+  placeholder?: string;
+  separator?: string;
 }
 
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -63,97 +80,129 @@ interface AadhaarInputProps {
 const AadhaarInput: React.FC<AadhaarInputProps> = ({
   value: controlledValue,
   onChange,
+  onComplete,
+  error = false,
+  errorMessage,
+  disabled = false,
   className,
   label = "Aadhaar Number",
-  error,
+  placeholder = "0000 0000 0000",
+  separator = " ",
 }) => {
-  const [internalValue, setInternalValue] = useState("");
-  const [focused, setFocused] = useState(false);
+  const [internalValue, setInternalValue] = useState<string>("");
+  const [focused, setFocused] = useState<boolean>(false);
+  const [hasCompletedOnce, setHasCompletedOnce] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const raw = controlledValue ?? internalValue;
+  const raw = controlledValue !== undefined ? controlledValue : internalValue;
   const digits = raw.replace(/\D/g, "");
-  const formatted = formatAadhaar(raw);
+  const formatted = formatAadhaar(raw, separator);
 
   const complete = digits.length === 12;
   const valid = isValidAadhaar(digits);
 
-  const showError = complete && !valid;
-  const hasExternalError = !!error;
+  // Show error state only once all 12 digits are entered and they fail validation
+  const showInternalError = complete && !valid;
+  const hasExternalError = error || !!errorMessage;
 
   const progress = Math.min((digits.length / 12) * 100, 100);
 
+  // Fire onComplete when 12 digits are entered
+  useEffect(() => {
+    if (complete && !hasCompletedOnce && onComplete) {
+      onComplete(digits);
+      setHasCompletedOnce(true);
+    }
+    if (!complete && hasCompletedOnce) {
+      setHasCompletedOnce(false);
+    }
+  }, [complete, digits, onComplete, hasCompletedOnce]);
+
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (disabled) return;
+
       const input = e.target.value;
       const digitsOnly = input.replace(/\D/g, "").slice(0, 12);
-      const newFormatted = formatAadhaar(digitsOnly);
+
       if (onChange) onChange(digitsOnly);
       else setInternalValue(digitsOnly);
 
       requestAnimationFrame(() => {
         if (inputRef.current) {
+          const newFormatted = formatAadhaar(digitsOnly, separator);
           const cursorPos = newFormatted.length;
           inputRef.current.setSelectionRange(cursorPos, cursorPos);
         }
       });
     },
-    [onChange]
+    [onChange, disabled, separator],
   );
 
-  const borderClass = focused
-    ? "border-primary shadow-[0_0_0_3px_hsl(var(--primary)/0.1)]"
-    : complete && valid
-    ? "border-green-500"
-    : showError || hasExternalError
-    ? "border-destructive"
-    : "border-input hover:border-muted-foreground/40";
+  // Border color logic
+  const borderClass = disabled
+    ? "border-[#E5E7EB] bg-[#F9FAFB]"
+    : focused
+      ? "border-[#2563EB] shadow-[0_0_0_3px_rgba(37,99,235,0.1)]"
+      : complete && valid && !hasExternalError
+        ? "border-[#10B981]"
+        : showInternalError || hasExternalError
+          ? "border-[#EF4444]"
+          : "border-[#E5E7EB] hover:border-[#9CA3AF]";
 
-  const progressClass = complete && valid
-    ? "bg-green-500"
-    : showError
-    ? "bg-destructive"
-    : "bg-primary";
+  // Progress bar color
+  const progressClass =
+    complete && valid && !hasExternalError
+      ? "bg-[#10B981]"
+      : showInternalError || hasExternalError
+        ? "bg-[#EF4444]"
+        : "bg-[#2563EB]";
 
+  // Helper text
   let helperText: string;
   let helperClass: string;
 
-  if (hasExternalError && error) {
-    helperText = error;
-    helperClass = "text-destructive";
-  } else if (showError) {
+  if (hasExternalError && errorMessage) {
+    helperText = errorMessage;
+    helperClass = "text-[#EF4444]";
+  } else if (showInternalError && !hasExternalError) {
     helperText = "Invalid Aadhaar number";
-    helperClass = "text-destructive";
+    helperClass = "text-[#EF4444]";
   } else if (digits.length === 0) {
     helperText = "Enter your 12-digit Aadhaar number";
-    helperClass = "text-muted-foreground";
-  } else if (complete && valid) {
+    helperClass = "text-[#6B7280]";
+  } else if (complete && valid && !hasExternalError) {
     helperText = "Valid Aadhaar number";
-    helperClass = "text-green-500";
+    helperClass = "text-[#10B981]";
   } else {
     helperText = `${digits.length}/12 digits`;
-    helperClass = "text-muted-foreground";
+    helperClass = "text-[#6B7280]";
   }
 
   return (
-    <div className={cn("w-full max-w-s ", className)}>
+    <div className={cn("w-full max-w-md", className)}>
       {label && (
-        <label className="block text-sm font-medium text-foreground mb-1.5">
+        <label className="block text-sm font-medium text-[#111827] mb-1.5">
           {label}
         </label>
       )}
 
       <div
         className={cn(
-          "relative flex items-center rounded-lg border-2 bg-card px-3 py-3 transition-all duration-200 cursor-text",
-          borderClass
+          "relative flex items-center rounded-lg border-2 bg-white px-3 py-3 transition-all duration-200",
+          disabled ? "cursor-not-allowed" : "cursor-text",
+          borderClass,
         )}
-        onClick={() => inputRef.current?.focus()}
+        onClick={() => !disabled && inputRef.current?.focus()}
       >
         <CreditCard
           className={cn(
             "mr-3 h-5 w-5 shrink-0 transition-colors duration-200",
-            focused ? "text-primary" : "text-muted-foreground"
+            disabled
+              ? "text-[#9CA3AF]"
+              : focused
+                ? "text-[#2563EB]"
+                : "text-[#6B7280]",
           )}
         />
         <input
@@ -161,32 +210,40 @@ const AadhaarInput: React.FC<AadhaarInputProps> = ({
           type="text"
           inputMode="numeric"
           autoComplete="off"
-          placeholder="0000 0000 0000"
+          placeholder={placeholder}
           value={formatted}
           onChange={handleChange}
-          onFocus={() => setFocused(true)}
+          onFocus={() => !disabled && setFocused(true)}
           onBlur={() => setFocused(false)}
-          className="flex-1 bg-transparent text-lg font-mono tracking-[0.15em] text-foreground placeholder:text-muted-foreground/50 outline-none"
-          maxLength={14}
+          disabled={disabled}
+          className={cn(
+            "flex-1 bg-transparent text-lg font-mono tracking-[0.15em] text-[#111827] placeholder:text-[#9CA3AF] outline-none",
+            disabled && "cursor-not-allowed text-[#9CA3AF]",
+          )}
+          maxLength={14 + (separator.length - 1) * 2}
           aria-label="Aadhaar Number"
-          aria-invalid={showError || hasExternalError}
+          aria-invalid={showInternalError || hasExternalError}
+          aria-disabled={disabled}
         />
 
         <div className="ml-2 shrink-0">
-          {complete && valid ? (
-            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-white">
+          {complete && valid && !hasExternalError && !disabled ? (
+            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-[#10B981] text-white">
               <Check className="h-3.5 w-3.5" />
             </div>
-          ) : showError || hasExternalError ? (
-            <AlertCircle className="h-5 w-5 text-destructive" />
+          ) : (showInternalError || hasExternalError) && !disabled ? (
+            <AlertCircle className="h-5 w-5 text-[#EF4444]" />
           ) : null}
         </div>
       </div>
 
       {/* Progress bar */}
-      <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-muted">
+      <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-[#F3F4F6]">
         <div
-          className={cn("h-full rounded-full transition-all duration-300 ease-out", progressClass)}
+          className={cn(
+            "h-full rounded-full transition-all duration-300 ease-out",
+            progressClass,
+          )}
           style={{ width: `${progress}%` }}
         />
       </div>
@@ -199,4 +256,4 @@ const AadhaarInput: React.FC<AadhaarInputProps> = ({
   );
 };
 
-export default AadhaarInput;
+export default AadhaarInput;

package/registry/maskedAadhar.tsx

@@ -1,11 +1,17 @@
-"use client"
+"use client";
 
-import React, { useState, useRef, useCallback } from "react";
-import { cn } from "./utils";
+import React, { useState, useRef, useCallback, useEffect } from "react";
 import { Upload, X, Eye, EyeOff, ShieldCheck, AlertCircle } from "lucide-react";
+import { cn } from "./utils";
 
 interface MaskedAadhaarUploadProps {
+    // --- Controlled mode ---
+    value?: File | null;
+    onChange?: (file: File | null) => void;
+    // --- Uncontrolled mode ---
+    defaultValue?: File;
     onFileSelect?: (file: File | null) => void;
+    // --- Shared ---
     className?: string;
     label?: string;
     maxSizeMB?: number;
@@ -14,11 +20,19 @@ interface MaskedAadhaarUploadProps {
 const ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/webp", "application/pdf"];
 
 const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
+    value,
+    onChange,
+    defaultValue,
     onFileSelect,
     className,
     label = "Upload Masked Aadhaar",
     maxSizeMB = 5,
 }) => {
+    const isControlled = value !== undefined;
+
+    const [internalFile, setInternalFile] = useState<File | null>(defaultValue ?? null);
+    const currentFile = isControlled ? value : internalFile;
+
     const [preview, setPreview] = useState<string | null>(null);
     const [fileName, setFileName] = useState<string | null>(null);
     const [fileSize, setFileSize] = useState<string | null>(null);
@@ -33,12 +47,36 @@ const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
         return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
     };
 
+    // Sync preview when currentFile changes (handles controlled clears like value={null})
+    useEffect(() => {
+        if (!currentFile) {
+            setPreview(null);
+            setFileName(null);
+            setFileSize(null);
+            setShowPreview(false);
+            if (inputRef.current) inputRef.current.value = "";
+            return;
+        }
+
+        // Avoid re-reading if same file is already previewed
+        if (currentFile.name === fileName && currentFile.size === Number(fileSize?.replace(/[^0-9]/g, ""))) return;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            setPreview(e.target?.result as string);
+            setFileName(currentFile.name);
+            setFileSize(formatFileSize(currentFile.size));
+            setShowPreview(false);
+        };
+        reader.readAsDataURL(currentFile);
+    }, [currentFile]);
+
     const processFile = useCallback(
         (file: File) => {
             setError(null);
 
             if (!ACCEPTED_TYPES.includes(file.type)) {
-                setError("Only JPG, PNG, or WebP images are accepted");
+                setError("Only JPG, PNG, WebP images or PDF are accepted");
                 return;
             }
 
@@ -47,17 +85,16 @@ const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
                 return;
             }
 
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                setPreview(e.target?.result as string);
-                setFileName(file.name);
-                setFileSize(formatFileSize(file.size));
-                setShowPreview(false);
-                onFileSelect?.(file);
-            };
-            reader.readAsDataURL(file);
+            // In uncontrolled mode, update internal state
+            if (!isControlled) {
+                setInternalFile(file);
+            }
+
+            // Always notify parent
+            onChange?.(file);
+            onFileSelect?.(file);
         },
-        [maxSizeMB, onFileSelect]
+        [maxSizeMB, isControlled, onChange, onFileSelect]
     );
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -83,12 +120,14 @@ const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
     const handleDragLeave = () => setDragging(false);
 
     const removeFile = () => {
-        setPreview(null);
-        setFileName(null);
-        setFileSize(null);
         setError(null);
-        setShowPreview(false);
-        if (inputRef.current) inputRef.current.value = "";
+
+        if (!isControlled) {
+            setInternalFile(null);
+        }
+
+        // Notify parent — in controlled mode, parent must set value={null} to clear
+        onChange?.(null);
         onFileSelect?.(null);
     };
 
@@ -136,13 +175,12 @@ const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
                             {dragging ? "Drop your file here" : "Click or drag to upload"}
                         </p>
                         <p className="mt-1 text-xs text-muted-foreground">
-                            JPG, PNG, or WebP · Max {maxSizeMB}MB
+                            JPG, PNG, WebP or PDF · Max {maxSizeMB}MB
                         </p>
                     </div>
                 </div>
             ) : (
                 <div className="relative rounded-lg border-2 border-aadhaar-success bg-card overflow-hidden transition-all duration-200">
-                    {/* Blurred / visible preview */}
                     <div className="relative aspect-16/10 w-full bg-muted overflow-hidden">
                         <img
                             src={preview}
@@ -159,7 +197,6 @@ const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
                         )}
                     </div>
 
-                    {/* File info bar */}
                     <div className="flex items-center gap-2 px-3 py-2.5 border-t border-border">
                         <ShieldCheck className="h-4 w-4 shrink-0 text-aadhaar-success" />
                         <div className="flex-1 min-w-0">
@@ -186,7 +223,6 @@ const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
                 </div>
             )}
 
-            {/* Helper / error text */}
             <div className="mt-1.5 text-xs">
                 {error ? (
                     <span className="flex items-center gap-1 text-destructive">
@@ -197,7 +233,7 @@ const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
                     <span className="text-aadhaar-success">Aadhaar photo uploaded</span>
                 ) : (
                     <span className="text-muted-foreground">
-                        Upload a masked Aadhaar card image (number partially hidden) max5mb
+                        Upload a masked Aadhaar card image (number partially hidden) max {maxSizeMB}MB
                     </span>
                 )}
             </div>
@@ -205,4 +241,4 @@ const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
     );
 };
 
-export default MaskedAadhaarUpload;
+export default MaskedAadhaarUpload;

package/registry/otp-input.tsx

@@ -1,4 +1,3 @@
-"use client"
 
 import { useState, useRef, useCallback, useEffect, KeyboardEvent, ClipboardEvent } from "react";
 import { Timer, RotateCcw, CheckCircle2, ShieldCheck } from "lucide-react";
@@ -150,7 +149,7 @@ const OtpInput = ({
   return (
     <div className={`space-y-4${className ? ` ${className}` : ""}`}>
       {/* Header */}
-      <div className="flex items-center gap-2 mb-2">
+      <div className="flex items-center gap-2">
         <ShieldCheck className="h-5 w-5 text-primary" />
         <span className="text-sm font-medium text-foreground">
           Enter {length}-digit OTP
@@ -186,12 +185,13 @@ const OtpInput = ({
       </div>
 
       {/* Progress dots */}
-      <div className="flex justify-center mt-2 gap-1.5">
+      <div className="flex justify-center gap-1.5">
         {digits.map((d, i) => (
           <div
             key={i}
-            className={`h-1.5 w-1.5 rounded-full transition-all duration-200 ${d ? "bg-primary scale-125" : "bg-muted-foreground/30"
-              }`}
+            className={`h-1.5 w-1.5 rounded-full transition-all duration-200 ${
+              d ? "bg-primary scale-125" : "bg-muted-foreground/30"
+            }`}
           />
         ))}
       </div>

package/registry/pan-input.tsx

@@ -1,41 +1,36 @@
-import React, { useState, useRef, useCallback } from "react";
+"use client";
 
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-interface Segment {
-  label: string;
-  done: boolean;
-  valid: boolean;
-}
-
-interface PanCardInputProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  onValid?: (value: string) => void;
-  label?: string;
-  error?: string;
-  className?: string;
-}
+import React, { useState, useRef, useCallback, useEffect } from "react";
 
 // ─── Validation utilities ────────────────────────────────────────────────────
 
 const PAN_REGEX = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
 
+/** 1. Remove spaces/special chars  2. Convert to uppercase  3. Enforce max 10 chars */
 const sanitize = (input: string): string =>
   input
     .toUpperCase()
     .replace(/[^A-Z0-9]/g, "")
     .slice(0, 10);
 
+/** Format for display: "ABCDE 1234 F" */
 const format = (cleaned: string): string => {
   if (cleaned.length <= 5) return cleaned;
   if (cleaned.length <= 9) return `${cleaned.slice(0, 5)} ${cleaned.slice(5)}`;
   return `${cleaned.slice(0, 5)} ${cleaned.slice(5, 9)} ${cleaned.slice(9)}`;
 };
 
+/** 3. Check length === 10  4. Test regex pattern */
 const isValid = (cleaned: string): boolean =>
   cleaned.length === 10 && PAN_REGEX.test(cleaned);
 
+interface Segment {
+  label: string;
+  done: boolean;
+  valid: boolean;
+}
+
+/** Segment-level validation hints */
 const getSegments = (cleaned: string): Segment[] => [
   {
     label: "Letters",
@@ -56,42 +51,81 @@ const getSegments = (cleaned: string): Segment[] => [
   },
 ];
 
+// ─── Props ───────────────────────────────────────────────────────────────────
+
+interface PanCardInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  onValid?: (value: string) => void;
+  className?: string;
+  label?: string;
+  placeholder?: string;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+}
+
 // ─── Component ───────────────────────────────────────────────────────────────
 
 const PanCardInput: React.FC<PanCardInputProps> = ({
   value: controlledValue,
   onChange,
+  onComplete,
   onValid,
   className = "",
   label = "PAN Card Number",
-  error,
+  placeholder = "ABCDE 1234 F",
+  error = false,
+  errorMessage,
+  disabled = false,
 }) => {
-  const [internal, setInternal] = useState<string>("");
+  const [internalValue, setInternalValue] = useState<string>("");
   const [focused, setFocused] = useState<boolean>(false);
+  const [hasCompletedOnce, setHasCompletedOnce] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const raw = controlledValue !== undefined ? controlledValue : internal;
+  const raw = controlledValue !== undefined ? controlledValue : internalValue;
   const cleaned = sanitize(raw);
   const displayed = format(cleaned);
   const valid = isValid(cleaned);
   const segments = getSegments(cleaned);
-  const showError = !!error || (!focused && cleaned.length > 0 && !valid);
+
+  const complete = cleaned.length === 10;
+  const hasExternalError = error || !!errorMessage;
+  const showInternalError = !focused && cleaned.length > 0 && !valid;
+  const showError = hasExternalError || showInternalError;
+
+  // Fire onComplete when 10 characters are entered (once)
+  useEffect(() => {
+    if (complete && !hasCompletedOnce && onComplete) {
+      onComplete(cleaned);
+      setHasCompletedOnce(true);
+    }
+    if (!complete && hasCompletedOnce) {
+      setHasCompletedOnce(false);
+    }
+  }, [complete, cleaned, onComplete, hasCompletedOnce]);
 
   const barClass = (seg: Segment): string => {
+    if (disabled) return "bg-gray-200";
     if (!seg.done) return "bg-gray-200";
     if (!seg.valid) return "bg-red-400";
     if (valid) return "bg-green-500";
     return "bg-blue-500";
   };
 
+  // 5. onChange / onValid callbacks
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      const next = sanitize(e.target.value);
+      if (disabled) return;
+
+      const next = sanitize(e.target.value); // steps 1, 2, 3
 
       if (onChange) onChange(next);
-      else setInternal(next);
+      else setInternalValue(next);
 
-      if (isValid(next) && onValid) onValid(next);
+      if (isValid(next) && onValid) onValid(next); // step 4 + 5
 
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -100,29 +134,44 @@ const PanCardInput: React.FC<PanCardInputProps> = ({
         }
       });
     },
-    [onChange, onValid]
+    [onChange, onValid, disabled],
   );
 
-  const borderClass = focused
-    ? "border-blue-500 ring-2 ring-blue-100"
-    : valid
-    ? "border-green-500 ring-2 ring-green-100"
-    : showError
-    ? "border-red-400 ring-2 ring-red-100"
-    : "border-gray-200 hover:border-gray-400";
-
-  const helperText = (): { text: string; cls: string } => {
-    if (showError && error) return { text: error, cls: "text-red-500" };
-    if (cleaned.length === 0)
+  const borderClass = disabled
+    ? "border-gray-200 bg-gray-50"
+    : focused
+      ? "border-blue-500 ring-2 ring-blue-100"
+      : valid && !hasExternalError
+        ? "border-green-500 ring-2 ring-green-100"
+        : showError
+          ? "border-red-400 ring-2 ring-red-100"
+          : "border-gray-200 hover:border-gray-400";
+
+  interface HelperText {
+    text: string;
+    cls: string;
+  }
+
+  const helperText = (): HelperText => {
+    if (hasExternalError && errorMessage) {
+      return { text: errorMessage, cls: "text-red-500" };
+    }
+    if (showInternalError && !hasExternalError) {
+      const badSeg = segments.find((s) => s.done && !s.valid);
+      if (badSeg) {
+        return {
+          text: `Invalid characters in ${badSeg.label} section`,
+          cls: "text-red-500",
+        };
+      }
+      return { text: "Invalid PAN number", cls: "text-red-500" };
+    }
+    if (cleaned.length === 0) {
       return { text: "Format: ABCDE1234F", cls: "text-gray-400" };
-    if (valid)
+    }
+    if (valid && !hasExternalError) {
       return { text: "✓ Valid PAN number", cls: "text-green-600 font-medium" };
-    const badSeg = segments.find((s) => s.done && !s.valid);
-    if (badSeg)
-      return {
-        text: `Invalid characters in ${badSeg.label} section`,
-        cls: "text-red-500",
-      };
+    }
     return { text: `${cleaned.length}/10 characters`, cls: "text-gray-400" };
   };
 
@@ -137,12 +186,17 @@ const PanCardInput: React.FC<PanCardInputProps> = ({
       )}
 
       <div
-        className={`relative flex items-center rounded-xl border-2 bg-white px-4 py-3 cursor-text transition-all duration-200 ${borderClass}`}
-        onClick={() => inputRef.current?.focus()}
+        className={`relative flex items-center rounded-xl border-2 bg-white px-4 py-3 transition-all duration-200 ${disabled ? "cursor-not-allowed" : "cursor-text"} ${borderClass}`}
+        onClick={() => !disabled && inputRef.current?.focus()}
       >
+        {/* File icon */}
         <svg
           className={`mr-3 h-5 w-5 shrink-0 transition-colors duration-200 ${
-            focused ? "text-blue-500" : "text-gray-400"
+            disabled
+              ? "text-gray-300"
+              : focused
+                ? "text-blue-500"
+                : "text-gray-400"
           }`}
           viewBox="0 0 24 24"
           fill="none"
@@ -163,20 +217,26 @@ const PanCardInput: React.FC<PanCardInputProps> = ({
           type="text"
           autoComplete="off"
           spellCheck={false}
-          placeholder="ABCDE 1234 F"
+          placeholder={placeholder}
           value={displayed}
           onChange={handleChange}
-          onFocus={() => setFocused(true)}
+          onFocus={() => !disabled && setFocused(true)}
           onBlur={() => setFocused(false)}
-          className="flex-1 bg-transparent text-lg font-mono tracking-widest text-gray-800 placeholder-gray-300 outline-none uppercase"
+          disabled={disabled}
+          className={`flex-1 bg-transparent text-lg font-mono tracking-widest outline-none uppercase ${
+            disabled
+              ? "text-gray-400 placeholder-gray-300 cursor-not-allowed"
+              : "text-gray-800 placeholder-gray-300"
+          }`}
           maxLength={12}
           aria-label="PAN Card Number"
           aria-invalid={showError}
           aria-describedby="pan-helper"
+          aria-disabled={disabled}
         />
 
         <div className="ml-2 shrink-0">
-          {valid ? (
+          {valid && !hasExternalError && !disabled ? (
             <span className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-500 text-white pan-bounce">
               <svg
                 className="h-4 w-4"
@@ -188,7 +248,7 @@ const PanCardInput: React.FC<PanCardInputProps> = ({
                 <polyline points="20 6 9 17 4 12" />
               </svg>
             </span>
-          ) : showError ? (
+          ) : showError && !disabled ? (
             <svg
               className="h-5 w-5 text-red-400"
               viewBox="0 0 24 24"
@@ -235,4 +295,4 @@ const PanCardInput: React.FC<PanCardInputProps> = ({
   );
 };
 
-export default PanCardInput;
+export default PanCardInput;

package/registry/phoneNumberInput.tsx

@@ -0,0 +1,298 @@
+import { useState, useRef } from "react";
+import { Phone, Check, AlertCircle, MessageCircle } from "lucide-react";
+
+interface PhoneInputProps {
+  className?: string;
+  /** Controlled: phone number value (10 raw digits). Omit for uncontrolled. */
+  value?: string;
+  /** Controlled: callback with raw 10-digit string */
+  onChange?: (value: string) => void;
+  /** Show WhatsApp verification toggle */
+  enableWhatsApp?: boolean;
+  /** Controlled: WhatsApp toggle state */
+  whatsAppEnabled?: boolean;
+  /** WhatsApp toggle callback */
+  onWhatsAppToggle?: (enabled: boolean) => void;
+  /** External error message */
+  error?: string;
+  /** Disable the input */
+  disabled?: boolean;
+  /** Input placeholder */
+  placeholder?: string;
+}
+
+// ─── Pure helpers (no hooks) ────────────────────────────────────────────────
+
+function formatPhoneNumber(digits: string): string {
+  const d = digits.replace(/\D/g, "").slice(0, 10);
+  return d.length <= 5 ? d : `${d.slice(0, 5)} ${d.slice(5)}`;
+}
+
+function validatePhone(digits: string): string {
+  const d = digits.replace(/\D/g, "");
+  if (!d) return "";
+  if (d.length < 10) return "Phone number must be 10 digits";
+  if (!["6", "7", "8", "9"].includes(d[0]))
+    return "Phone number must start with 6, 7, 8, or 9";
+  return "";
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export default function PhoneInput({
+  value: controlledValue,
+  onChange,
+  enableWhatsApp = false,
+  whatsAppEnabled: controlledWhatsApp,
+  onWhatsAppToggle,
+  error: externalError,
+  disabled = false,
+  placeholder = "98765 43210",
+}: PhoneInputProps) {
+  const isControlled = controlledValue !== undefined;
+  const isWhatsAppControlled = controlledWhatsApp !== undefined;
+
+  // Uncontrolled internal state
+  const [internalPhone, setInternalPhone] = useState("");
+  const [internalWhatsApp, setInternalWhatsApp] = useState(false);
+
+  // Interaction state
+  const [isFocused, setIsFocused] = useState(false);
+  const [internalError, setInternalError] = useState("");
+  const [touched, setTouched] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Resolved values
+  const value = isControlled ? (controlledValue ?? "") : internalPhone;
+  const whatsAppEnabled = isWhatsAppControlled
+    ? (controlledWhatsApp ?? false)
+    : internalWhatsApp;
+
+  // ── Handlers ────────────────────────────────────────────────────────────
+
+  function commitValue(raw: string) {
+    const clean = raw.replace(/\D/g, "").slice(0, 10);
+    if (!isControlled) setInternalPhone(clean);
+    onChange?.(clean);
+    if (touched) setInternalError(validatePhone(clean));
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    commitValue(e.target.value);
+  }
+
+  function handleBlur() {
+    setIsFocused(false);
+    setTouched(true);
+    setInternalError(validatePhone(value));
+  }
+
+  function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
+    e.preventDefault();
+    commitValue(e.clipboardData.getData("text"));
+    setTouched(true);
+  }
+
+  function handleWhatsAppToggle() {
+    const next = !whatsAppEnabled;
+    if (!isWhatsAppControlled) setInternalWhatsApp(next);
+    onWhatsAppToggle?.(next);
+  }
+
+  // ── Derived state ────────────────────────────────────────────────────────
+
+  const currentError = externalError || internalError;
+  const isValid = value.length === 10 && !currentError;
+  const hasError = touched && !!currentError;
+  const showSuccess = isValid && touched;
+
+  // ── Styles ───────────────────────────────────────────────────────────────
+
+  const borderClass = hasError
+    ? "border-red-500 dark:border-red-400"
+    : isValid
+      ? "border-green-500 dark:border-green-400"
+      : isFocused
+        ? "border-black dark:border-white"
+        : "border-neutral-300 dark:border-neutral-700 hover:border-neutral-400 dark:hover:border-neutral-500";
+
+  const iconClass = hasError
+    ? "text-red-500 dark:text-red-400"
+    : isValid
+      ? "text-green-500 dark:text-green-400"
+      : "text-neutral-500 dark:text-neutral-400";
+
+  return (
+    <div className="w-full">
+      <style>{`
+        @keyframes phone-fade-in {
+          from { opacity: 0; transform: translateY(-4px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        .phone-fade-in { animation: phone-fade-in 0.2s ease-out both; }
+      `}</style>
+
+      {/* ── Input row ── */}
+      <div
+        className={[
+          "flex items-center rounded-lg border transition-all duration-200",
+          disabled
+            ? "opacity-50 cursor-not-allowed bg-neutral-100 dark:bg-neutral-900"
+            : "bg-white dark:bg-neutral-900",
+          borderClass,
+        ].join(" ")}
+      >
+        {/* Phone icon */}
+        <div className="pl-4 pr-3 flex items-center shrink-0">
+          <Phone
+            size={18}
+            className={`transition-colors duration-200 ${iconClass}`}
+          />
+        </div>
+
+        {/* +91 prefix */}
+        <div className="flex items-center pr-2 shrink-0">
+          <span className="text-[15px] font-semibold text-black dark:text-white select-none">
+            +91
+          </span>
+          <div className="w-px h-6 bg-neutral-200 dark:bg-neutral-700 ml-3" />
+        </div>
+
+        {/* Text input */}
+        <input
+          ref={inputRef}
+          type="tel"
+          inputMode="numeric"
+          value={formatPhoneNumber(value)}
+          onChange={handleChange}
+          onFocus={() => setIsFocused(true)}
+          onBlur={handleBlur}
+          onPaste={handlePaste}
+          disabled={disabled}
+          placeholder={placeholder}
+          aria-invalid={hasError}
+          aria-describedby={hasError ? "phone-error" : undefined}
+          className={[
+            "flex-1 py-3 pr-4 bg-transparent outline-none",
+            "text-[15px] text-black dark:text-white",
+            "placeholder-neutral-400 dark:placeholder-neutral-600",
+            disabled ? "cursor-not-allowed" : "",
+          ].join(" ")}
+        />
+
+        {/* Trailing icon */}
+        {isValid && !hasError && (
+          <div className="pr-4 flex items-center shrink-0">
+            <div className="w-5 h-5 rounded-full bg-green-500 dark:bg-green-400 flex items-center justify-center">
+              <Check size={12} className="text-white" strokeWidth={3} />
+            </div>
+          </div>
+        )}
+        {hasError && (
+          <div className="pr-4 flex items-center shrink-0">
+            <AlertCircle
+              size={20}
+              className="text-red-500 dark:text-red-400"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* ── Messages ── */}
+      {hasError && (
+        <div
+          id="phone-error"
+          role="alert"
+          className="mt-2 flex items-start gap-1.5 phone-fade-in"
+        >
+          <AlertCircle
+            size={14}
+            className="text-red-500 dark:text-red-400 mt-0.5 shrink-0"
+          />
+          <p className="text-[13px] text-red-500 dark:text-red-400">
+            {currentError}
+          </p>
+        </div>
+      )}
+
+      {showSuccess && !hasError && (
+        <div className="mt-2 flex items-start gap-1.5 phone-fade-in">
+          <Check
+            size={14}
+            className="text-green-500 dark:text-green-400 mt-0.5 shrink-0"
+          />
+          <p className="text-[13px] text-green-500 dark:text-green-400">
+            Valid phone number
+          </p>
+        </div>
+      )}
+
+      {/* ── WhatsApp toggle ── */}
+      {enableWhatsApp && (
+        <button
+          type="button"
+          onClick={handleWhatsAppToggle}
+          disabled={disabled || !isValid}
+          className={[
+            "mt-4 flex items-center gap-3 p-4 rounded-lg border w-full",
+            "transition-all duration-200 text-left",
+            disabled || !isValid
+              ? "opacity-50 cursor-not-allowed"
+              : "cursor-pointer",
+            whatsAppEnabled
+              ? "bg-green-50 dark:bg-green-900/20 border-green-500 dark:border-green-400"
+              : "bg-white dark:bg-neutral-900 border-neutral-300 dark:border-neutral-700",
+            !disabled && isValid && !whatsAppEnabled
+              ? "hover:bg-neutral-50 dark:hover:bg-neutral-800 hover:border-neutral-400 dark:hover:border-neutral-500 active:scale-[0.99]"
+              : "",
+          ].join(" ")}
+        >
+          {/* Pill toggle */}
+          <div
+            className={[
+              "relative w-11 h-6 rounded-full transition-all duration-200 shrink-0",
+              whatsAppEnabled
+                ? "bg-green-500 dark:bg-green-400"
+                : "bg-neutral-300 dark:bg-neutral-600",
+            ].join(" ")}
+          >
+            <div
+              className={[
+                "absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-all duration-200",
+                whatsAppEnabled ? "left-5.5" : "left-0.5",
+              ].join(" ")}
+            />
+          </div>
+
+          {/* Label */}
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            <MessageCircle
+              size={20}
+              className={
+                whatsAppEnabled
+                  ? "text-green-500 dark:text-green-400 shrink-0"
+                  : "text-neutral-500 dark:text-neutral-400 shrink-0"
+              }
+            />
+            <div className="flex flex-col items-start min-w-0">
+              <span className="text-[14px] font-medium text-black dark:text-white">
+                WhatsApp Verification
+              </span>
+              <span className="text-[12px] text-neutral-500 dark:text-neutral-400">
+                {whatsAppEnabled ? "Enabled" : "Tap to enable"}
+              </span>
+            </div>
+          </div>
+
+          {whatsAppEnabled && (
+            <Check
+              size={18}
+              className="text-green-500 dark:text-green-400 shrink-0"
+            />
+          )}
+        </button>
+      )}
+    </div>
+  );
+}