kesp-ui 1.0.0

package/README.md

@@ -0,0 +1,47 @@
+# kesp-ui
+
+A collection of Indian-specific UI components for Next.js + Tailwind CSS projects.
+
+## Usage
+
+```bash
+npx kesp-ui add aadhaar-input
+npx kesp-ui add pan-input
+```
+
+## Available Components
+
+| Component | Description |
+|---|---|
+| `aadhaar-input` | Validated Aadhaar number input with Verhoeff checksum |
+| `pan-input` | Validated PAN Card input with segment progress bars |
+
+## List all components
+
+```bash
+npx kesp-ui list
+```
+
+## Custom output path
+
+By default components are added to `components/ui/`. You can change this:
+
+```bash
+npx kesp-ui add aadhaar-input --path src/components/forms
+```
+
+## Example
+
+```tsx
+import AadhaarInput from "@/components/ui/aadhaar-input";
+import PanCardInput from "@/components/ui/pan-input";
+
+export default function Page() {
+  return (
+    <div>
+      <AadhaarInput label="Enter Aadhaar" onChange={(val) => console.log(val)} />
+      <PanCardInput label="Enter PAN" onValid={(val) => console.log(val)} />
+    </div>
+  );
+}
+```

package/aadhaar-input.tsx

@@ -0,0 +1,200 @@
+import React, { useState, useRef, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { Check, AlertCircle, CreditCard } from "lucide-react";
+
+// ─── 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],
+];
+
+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],
+];
+
+function verhoeff(num: string): boolean {
+  let c = 0;
+  const arr = num.split("").reverse().map(Number);
+  for (let i = 0; i < arr.length; i++) c = D[c][P[i % 8][arr[i]]];
+  return c === 0;
+}
+
+// ─── Full Validation ──────────────────────────────────────────────────────────
+
+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;
+  return true;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const formatAadhaar = (raw: string): 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(" ");
+};
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface AadhaarInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+  label?: string;
+  error?: string;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+const AadhaarInput: React.FC<AadhaarInputProps> = ({
+  value: controlledValue,
+  onChange,
+  className,
+  label = "Aadhaar Number",
+  error,
+}) => {
+  const [internalValue, setInternalValue] = useState("");
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const raw = controlledValue ?? internalValue;
+  const digits = raw.replace(/\D/g, "");
+  const formatted = formatAadhaar(raw);
+
+  const complete = digits.length === 12;
+  const valid = isValidAadhaar(digits);
+
+  const showError = complete && !valid;
+  const hasExternalError = !!error;
+
+  const progress = Math.min((digits.length / 12) * 100, 100);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      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 cursorPos = newFormatted.length;
+          inputRef.current.setSelectionRange(cursorPos, cursorPos);
+        }
+      });
+    },
+    [onChange]
+  );
+
+  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";
+
+  const progressClass = complete && valid
+    ? "bg-green-500"
+    : showError
+    ? "bg-destructive"
+    : "bg-primary";
+
+  let helperText: string;
+  let helperClass: string;
+
+  if (hasExternalError && error) {
+    helperText = error;
+    helperClass = "text-destructive";
+  } else if (showError) {
+    helperText = "Invalid Aadhaar number";
+    helperClass = "text-destructive";
+  } else if (digits.length === 0) {
+    helperText = "Enter your 12-digit Aadhaar number";
+    helperClass = "text-muted-foreground";
+  } else if (complete && valid) {
+    helperText = "Valid Aadhaar number";
+    helperClass = "text-green-500";
+  } else {
+    helperText = `${digits.length}/12 digits`;
+    helperClass = "text-muted-foreground";
+  }
+
+  return (
+    <div className={cn("w-full max-w-s ", className)}>
+      {label && (
+        <label className="block text-sm font-medium text-foreground 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
+        )}
+        onClick={() => inputRef.current?.focus()}
+      >
+        <CreditCard
+          className={cn(
+            "mr-3 h-5 w-5 shrink-0 transition-colors duration-200",
+            focused ? "text-primary" : "text-muted-foreground"
+          )}
+        />
+        <input
+          ref={inputRef}
+          type="text"
+          inputMode="numeric"
+          autoComplete="off"
+          placeholder="0000 0000 0000"
+          value={formatted}
+          onChange={handleChange}
+          onFocus={() => 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}
+          aria-label="Aadhaar Number"
+          aria-invalid={showError || hasExternalError}
+        />
+
+        <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">
+              <Check className="h-3.5 w-3.5" />
+            </div>
+          ) : showError || hasExternalError ? (
+            <AlertCircle className="h-5 w-5 text-destructive" />
+          ) : null}
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-muted">
+        <div
+          className={cn("h-full rounded-full transition-all duration-300 ease-out", progressClass)}
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+
+      {/* Helper text */}
+      <div className="mt-1.5 text-xs">
+        <span className={helperClass}>{helperText}</span>
+      </div>
+    </div>
+  );
+};
+
+export default AadhaarInput;

package/index.js

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+
+const { program } = require("commander");
+const axios = require("axios");
+const fs = require("fs-extra");
+const path = require("path");
+const chalk = require("chalk");
+
+// ── Replace with your actual GitHub username ──────────────────────────────────
+const GITHUB_USER = "Sankalp-Pradhan";
+const REPO_NAME = "kespUI";
+const BRANCH = "main";
+
+const REGISTRY_URL = `https://raw.githubusercontent.com/${GITHUB_USER}/${REPO_NAME}/${BRANCH}/registry.json`;
+const BASE_URL = `https://raw.githubusercontent.com/${GITHUB_USER}/${REPO_NAME}/${BRANCH}/registry`;
+
+program
+  .name("kesp-ui")
+  .description("Add kesp-ui components to your project")
+  .version("1.0.0");
+
+// ── LIST command ──────────────────────────────────────────────────────────────
+program
+  .command("list")
+  .description("List all available components")
+  .action(async () => {
+    try {
+      console.log(chalk.cyan("\nFetching available components...\n"));
+      const { data: registry } = await axios.get(REGISTRY_URL);
+
+      registry.items.forEach((item) => {
+        console.log(`  ${chalk.green("◆")} ${chalk.bold(item.name)}`);
+        console.log(`    ${chalk.gray(item.description)}`);
+        if (item.dependencies.length > 0) {
+          console.log(`    ${chalk.yellow("deps:")} ${item.dependencies.join(", ")}`);
+        }
+        console.log();
+      });
+    } catch (err) {
+      console.error(chalk.red("Error fetching registry:"), err.message);
+    }
+  });
+
+// ── ADD command ───────────────────────────────────────────────────────────────
+program
+  .command("add <component>")
+  .description("Add a component to your project")
+  .option("-p, --path <path>", "Destination path", "components/ui")
+  .action(async (component, options) => {
+    try {
+      console.log(chalk.cyan(`\nFetching registry...\n`));
+      const { data: registry } = await axios.get(REGISTRY_URL);
+      const found = registry.items.find((c) => c.name === component);
+
+      if (!found) {
+        console.log(chalk.red(`✖ Component "${component}" not found.\n`));
+        console.log(chalk.gray(`Run ${chalk.white("npx kesp-ui list")} to see available components.`));
+        process.exit(1);
+      }
+
+      // Download each file
+      for (const file of found.files) {
+        const fileName = path.basename(file.path);
+        const fileUrl = `${BASE_URL}/${fileName}`;
+        console.log(chalk.gray(`  Downloading ${fileName}...`));
+
+        const { data: content } = await axios.get(fileUrl);
+
+        const destPath = path.join(process.cwd(), options.path, fileName);
+        await fs.ensureDir(path.dirname(destPath));
+        await fs.writeFile(destPath, content, "utf8");
+
+        console.log(chalk.green(`  ✔ ${fileName}`) + chalk.gray(` → ${options.path}/${fileName}`));
+      }
+
+      // Show dependency install hint
+      if (found.dependencies && found.dependencies.length > 0) {
+        console.log(
+          chalk.yellow(`\n  Install dependencies:\n`) +
+          chalk.white(`  npm install ${found.dependencies.join(" ")}\n`)
+        );
+      } else {
+        console.log();
+      }
+
+      console.log(chalk.green(`✔ Done! `) + chalk.gray(`Import with:`));
+      console.log(
+        chalk.white(`  import ${toPascalCase(component)} from "@/components/ui/${component}";\n`)
+      );
+    } catch (err) {
+      console.error(chalk.red("Error:"), err.message);
+    }
+  });
+
+// ── Helper ────────────────────────────────────────────────────────────────────
+function toPascalCase(str) {
+  return str
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join("");
+}
+
+program.parse();

package/maskedAadhar.tsx

@@ -0,0 +1,206 @@
+import React, { useState, useRef, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { Upload, X, Eye, EyeOff, ShieldCheck, AlertCircle } from "lucide-react";
+
+interface MaskedAadhaarUploadProps {
+    onFileSelect?: (file: File | null) => void;
+    className?: string;
+    label?: string;
+    maxSizeMB?: number;
+}
+
+const ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/webp", "application/pdf"];
+
+const MaskedAadhaarUpload: React.FC<MaskedAadhaarUploadProps> = ({
+    onFileSelect,
+    className,
+    label = "Upload Masked Aadhaar",
+    maxSizeMB = 5,
+}) => {
+    const [preview, setPreview] = useState<string | null>(null);
+    const [fileName, setFileName] = useState<string | null>(null);
+    const [fileSize, setFileSize] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [dragging, setDragging] = useState(false);
+    const [showPreview, setShowPreview] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const formatFileSize = (bytes: number): string => {
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    };
+
+    const processFile = useCallback(
+        (file: File) => {
+            setError(null);
+
+            if (!ACCEPTED_TYPES.includes(file.type)) {
+                setError("Only JPG, PNG, or WebP images are accepted");
+                return;
+            }
+
+            if (file.size > maxSizeMB * 1024 * 1024) {
+                setError(`File must be under ${maxSizeMB}MB`);
+                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);
+        },
+        [maxSizeMB, onFileSelect]
+    );
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) processFile(file);
+    };
+
+    const handleDrop = useCallback(
+        (e: React.DragEvent) => {
+            e.preventDefault();
+            setDragging(false);
+            const file = e.dataTransfer.files?.[0];
+            if (file) processFile(file);
+        },
+        [processFile]
+    );
+
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        setDragging(true);
+    };
+
+    const handleDragLeave = () => setDragging(false);
+
+    const removeFile = () => {
+        setPreview(null);
+        setFileName(null);
+        setFileSize(null);
+        setError(null);
+        setShowPreview(false);
+        if (inputRef.current) inputRef.current.value = "";
+        onFileSelect?.(null);
+    };
+
+    return (
+        <div className={cn("w-full max-w-sm", className)}>
+            {label && (
+                <label className="block text-sm font-medium text-foreground mb-1.5">
+                    {label}
+                </label>
+            )}
+
+            <input
+                ref={inputRef}
+                type="file"
+                accept={ACCEPTED_TYPES.join(",")}
+                onChange={handleChange}
+                className="hidden"
+            />
+
+            {!preview ? (
+                <div
+                    onClick={() => inputRef.current?.click()}
+                    onDrop={handleDrop}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    className={cn(
+                        "relative flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-4 py-8 cursor-pointer transition-all duration-200",
+                        dragging
+                            ? "border-primary bg-primary/5 shadow-[0_0_0_3px_hsl(var(--primary)/0.1)]"
+                            : error
+                                ? "border-destructive bg-destructive/5"
+                                : "border-input hover:border-muted-foreground/40 bg-card"
+                    )}
+                >
+                    <div
+                        className={cn(
+                            "flex h-12 w-12 items-center justify-center rounded-full transition-colors",
+                            dragging ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+                        )}
+                    >
+                        <Upload className="h-5 w-5" />
+                    </div>
+                    <div className="text-center">
+                        <p className="text-sm font-medium text-foreground">
+                            {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
+                        </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}
+                            alt="Masked Aadhaar preview"
+                            className={cn(
+                                "h-full w-full object-cover transition-all duration-300",
+                                showPreview ? "blur-0" : "blur-lg scale-105"
+                            )}
+                        />
+                        {!showPreview && (
+                            <div className="absolute inset-0 flex items-center justify-center bg-background/40 backdrop-blur-sm">
+                                <ShieldCheck className="h-8 w-8 text-aadhaar-success" />
+                            </div>
+                        )}
+                    </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">
+                            <p className="text-xs font-medium text-foreground truncate">{fileName}</p>
+                            <p className="text-[10px] text-muted-foreground">{fileSize}</p>
+                        </div>
+                        <button
+                            type="button"
+                            onClick={() => setShowPreview((p) => !p)}
+                            className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                            aria-label={showPreview ? "Hide preview" : "Show preview"}
+                        >
+                            {showPreview ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={removeFile}
+                            className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors"
+                            aria-label="Remove file"
+                        >
+                            <X className="h-3.5 w-3.5" />
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* Helper / error text */}
+            <div className="mt-1.5 text-xs">
+                {error ? (
+                    <span className="flex items-center gap-1 text-destructive">
+                        <AlertCircle className="h-3 w-3" />
+                        {error}
+                    </span>
+                ) : preview ? (
+                    <span className="text-aadhaar-success">Aadhaar photo uploaded</span>
+                ) : (
+                    <span className="text-muted-foreground">
+                        Upload a masked Aadhaar card image (number partially hidden) max5mb
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default MaskedAadhaarUpload;

package/otp-input.tsx

@@ -0,0 +1,223 @@
+import { useState, useRef, useCallback, useEffect, KeyboardEvent, ClipboardEvent } from "react";
+import { Timer, RotateCcw, CheckCircle2, ShieldCheck } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface OtpInputProps {
+  length?: 4 | 6;
+  value?: string;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  resendCooldown?: number;
+  onResend?: () => void;
+  className?: string;
+}
+
+const OtpInput = ({
+  length = 6,
+  value: controlledValue,
+  onChange,
+  onComplete,
+  resendCooldown = 30,
+  onResend,
+  className,
+}: OtpInputProps) => {
+  const [internalValue, setInternalValue] = useState("");
+  const value = controlledValue ?? internalValue;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [timer, setTimer] = useState(resendCooldown);
+  const [canResend, setCanResend] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
+
+  useEffect(() => {
+    if (timer <= 0) {
+      setCanResend(true);
+      return;
+    }
+    const interval = setInterval(() => setTimer((t) => t - 1), 1000);
+    return () => clearInterval(interval);
+  }, [timer]);
+
+  useEffect(() => {
+    inputsRef.current[0]?.focus();
+  }, [length]);
+
+  const setValue = useCallback(
+    (newValue: string) => {
+      const clamped = newValue.slice(0, length);
+      if (!controlledValue) setInternalValue(clamped);
+      onChange?.(clamped);
+      if (clamped.length === length) {
+        setIsComplete(true);
+        onComplete?.(clamped);
+      } else {
+        setIsComplete(false);
+      }
+    },
+    [length, controlledValue, onChange, onComplete]
+  );
+
+  const handleChange = useCallback(
+    (index: number, digit: string) => {
+      if (!/^\d?$/.test(digit)) return;
+      const arr = value.split("");
+      while (arr.length < length) arr.push("");
+      arr[index] = digit;
+      const newValue = arr.join("").replace(/ /g, "");
+      setValue(newValue);
+
+      if (digit && index < length - 1) {
+        inputsRef.current[index + 1]?.focus();
+        setActiveIndex(index + 1);
+      }
+    },
+    [value, length, setValue]
+  );
+
+  const handleKeyDown = useCallback(
+    (index: number, e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        const arr = value.split("");
+        if (arr[index]) {
+          arr[index] = "";
+          setValue(arr.join(""));
+        } else if (index > 0) {
+          arr[index - 1] = "";
+          setValue(arr.join(""));
+          inputsRef.current[index - 1]?.focus();
+          setActiveIndex(index - 1);
+        }
+      } else if (e.key === "ArrowLeft" && index > 0) {
+        inputsRef.current[index - 1]?.focus();
+        setActiveIndex(index - 1);
+      } else if (e.key === "ArrowRight" && index < length - 1) {
+        inputsRef.current[index + 1]?.focus();
+        setActiveIndex(index + 1);
+      }
+    },
+    [value, length, setValue]
+  );
+
+  const handlePaste = useCallback(
+    (e: ClipboardEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+      if (pasted) {
+        setValue(pasted);
+        const focusIndex = Math.min(pasted.length, length - 1);
+        inputsRef.current[focusIndex]?.focus();
+        setActiveIndex(focusIndex);
+      }
+    },
+    [length, setValue]
+  );
+
+  const handleResend = () => {
+    setTimer(resendCooldown);
+    setCanResend(false);
+    setValue("");
+    setIsComplete(false);
+    inputsRef.current[0]?.focus();
+    setActiveIndex(0);
+    onResend?.();
+  };
+
+  const formatTime = (s: number) =>
+    `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`;
+
+  const digits = Array.from({ length }, (_, i) => value[i] || "");
+
+  // Helper to compute input class string
+  const getInputClass = (i: number, digit: string) => {
+    const base =
+      "h-12 w-12 rounded-lg border-2 bg-background text-center text-lg font-semibold text-foreground outline-none transition-all duration-200";
+
+    if (isComplete) {
+      return `${base} border-green-500 bg-green-500/10`;
+    }
+    if (activeIndex === i) {
+      return `${base} border-primary ring-2 ring-primary/30 scale-105`;
+    }
+    if (digit) {
+      return `${base} border-primary/50`;
+    }
+    return `${base} border-input`;
+  };
+
+  return (
+    <div className={`space-y-4${className ? ` ${className}` : ""}`}>
+      {/* Header */}
+      <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
+        </span>
+        {isComplete && (
+          <CheckCircle2 className="ml-auto h-5 w-5 text-green-500 animate-bounce" />
+        )}
+      </div>
+
+      {/* OTP Boxes */}
+      <div className="flex items-center justify-center gap-2">
+        {digits.map((digit, i) => (
+          <div key={i} className="flex items-center">
+            <input
+              ref={(el) => { inputsRef.current[i] = el; }}
+              type="text"
+              inputMode="numeric"
+              maxLength={1}
+              value={digit}
+              onChange={(e) => handleChange(i, e.target.value.replace(/\D/g, ""))}
+              onKeyDown={(e) => handleKeyDown(i, e)}
+              onPaste={handlePaste}
+              onFocus={() => setActiveIndex(i)}
+              className={getInputClass(i, digit)}
+              aria-label={`Digit ${i + 1}`}
+            />
+            {/* Separator in the middle for 6-digit */}
+            {length === 6 && i === 2 && (
+              <span className="mx-1 font-bold text-muted-foreground">–</span>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Progress dots */}
+      <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"
+            }`}
+          />
+        ))}
+      </div>
+
+      {/* Timer + Resend */}
+      <div className="flex items-center justify-between text-sm">
+        <div className="flex items-center gap-1.5 text-muted-foreground">
+          <Timer className="h-4 w-4" />
+          {canResend ? (
+            <span>Code expired</span>
+          ) : (
+            <span>Resend in {formatTime(timer)}</span>
+          )}
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleResend}
+          disabled={!canResend}
+          className="gap-1.5 text-primary disabled:text-muted-foreground"
+        >
+          <RotateCcw className="h-3.5 w-3.5" />
+          Resend
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default OtpInput;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "kesp-ui",
+  "version": "1.0.0",
+  "description": "CLI to add kesp-ui components to your project",
+  "main": "index.js",
+  "bin": {
+    "kesp-ui": "./index.js"
+  },
+  "scripts": {
+    "start": "node index.js"
+  },
+  "keywords": [
+    "ui",
+    "components",
+    "react",
+    "nextjs",
+    "tailwindcss",
+    "india",
+    "aadhaar",
+    "pan"
+  ],
+  "author": "yourusername",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^1.6.0",
+    "chalk": "^4.1.2",
+    "commander": "^11.0.0",
+    "fs-extra": "^11.2.0"
+  }
+}

package/pan-input.tsx

@@ -0,0 +1,238 @@
+import React, { useState, useRef, useCallback } from "react";
+
+// ─── 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;
+}
+
+// ─── Validation utilities ────────────────────────────────────────────────────
+
+const PAN_REGEX = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
+
+const sanitize = (input: string): string =>
+  input
+    .toUpperCase()
+    .replace(/[^A-Z0-9]/g, "")
+    .slice(0, 10);
+
+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)}`;
+};
+
+const isValid = (cleaned: string): boolean =>
+  cleaned.length === 10 && PAN_REGEX.test(cleaned);
+
+const getSegments = (cleaned: string): Segment[] => [
+  {
+    label: "Letters",
+    done: cleaned.length >= 5,
+    valid: cleaned.length < 5 || /^[A-Z]{5}$/.test(cleaned.slice(0, 5)),
+  },
+  {
+    label: "Digits",
+    done: cleaned.length >= 9,
+    valid:
+      cleaned.length < 6 ||
+      /^[0-9]{1,4}$/.test(cleaned.slice(5, Math.min(9, cleaned.length))),
+  },
+  {
+    label: "Check",
+    done: cleaned.length === 10,
+    valid: cleaned.length < 10 || /^[A-Z]$/.test(cleaned[9]),
+  },
+];
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+const PanCardInput: React.FC<PanCardInputProps> = ({
+  value: controlledValue,
+  onChange,
+  onValid,
+  className = "",
+  label = "PAN Card Number",
+  error,
+}) => {
+  const [internal, setInternal] = useState<string>("");
+  const [focused, setFocused] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const raw = controlledValue !== undefined ? controlledValue : internal;
+  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 barClass = (seg: Segment): string => {
+    if (!seg.done) return "bg-gray-200";
+    if (!seg.valid) return "bg-red-400";
+    if (valid) return "bg-green-500";
+    return "bg-blue-500";
+  };
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const next = sanitize(e.target.value);
+
+      if (onChange) onChange(next);
+      else setInternal(next);
+
+      if (isValid(next) && onValid) onValid(next);
+
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          const pos = format(next).length;
+          inputRef.current.setSelectionRange(pos, pos);
+        }
+      });
+    },
+    [onChange, onValid]
+  );
+
+  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)
+      return { text: "Format: ABCDE1234F", cls: "text-gray-400" };
+    if (valid)
+      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" };
+  };
+
+  const helper = helperText();
+
+  return (
+    <div className={`w-full max-w-sm font-sans ${className}`}>
+      {label && (
+        <label className="block text-sm font-semibold text-gray-700 mb-2 tracking-wide">
+          {label}
+        </label>
+      )}
+
+      <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()}
+      >
+        <svg
+          className={`mr-3 h-5 w-5 shrink-0 transition-colors duration-200 ${
+            focused ? "text-blue-500" : "text-gray-400"
+          }`}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+          <polyline points="14 2 14 8 20 8" />
+          <line x1="16" y1="13" x2="8" y2="13" />
+          <line x1="16" y1="17" x2="8" y2="17" />
+          <polyline points="10 9 9 9 8 9" />
+        </svg>
+
+        <input
+          ref={inputRef}
+          type="text"
+          autoComplete="off"
+          spellCheck={false}
+          placeholder="ABCDE 1234 F"
+          value={displayed}
+          onChange={handleChange}
+          onFocus={() => 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"
+          maxLength={12}
+          aria-label="PAN Card Number"
+          aria-invalid={showError}
+          aria-describedby="pan-helper"
+        />
+
+        <div className="ml-2 shrink-0">
+          {valid ? (
+            <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"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </span>
+          ) : showError ? (
+            <svg
+              className="h-5 w-5 text-red-400"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Segment progress bars */}
+      <div className="mt-2.5 flex gap-1.5">
+        {segments.map((seg, i) => (
+          <div key={i} className="flex-1">
+            <div
+              className={`h-1 rounded-full transition-all duration-300 ${barClass(seg)}`}
+            />
+            <span className="block mt-1 text-[10px] text-gray-400 text-center select-none">
+              {seg.label}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      <p id="pan-helper" className={`mt-1 text-xs ${helper.cls}`}>
+        {helper.text}
+      </p>
+
+      <style>{`
+        @keyframes pan-bounce-in {
+          0%   { transform: scale(0.5); opacity: 0; }
+          60%  { transform: scale(1.2); }
+          80%  { transform: scale(0.95); }
+          100% { transform: scale(1); opacity: 1; }
+        }
+        .pan-bounce { animation: pan-bounce-in 0.4s ease forwards; }
+      `}</style>
+    </div>
+  );
+};
+
+export default PanCardInput;

package/registry.json

@@ -0,0 +1,51 @@
+{
+  "name": "kesp-ui",
+  "homepage": "https://github.com/yourusername/kesp-ui",
+  "items": [
+    {
+      "name": "aadhaar-input",
+      "type": "registry:ui",
+      "description": "A validated Aadhaar number input with Verhoeff checksum, progress bar, and formatting.",
+      "files": [
+        {
+          "path": "registry/aadhaar-input.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": ["lucide-react"],
+      "devDependencies": [],
+      "tailwind": {},
+      "cssVars": {}
+    },
+    {
+      "name": "pan-input",
+      "type": "registry:ui",
+      "description": "A validated PAN Card number input with segment progress bars and format hints.",
+      "files": [
+        {
+          "path": "registry/pan-input.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [],
+      "devDependencies": [],
+      "tailwind": {},
+      "cssVars": {}
+    },
+    {
+      "name": "otp-input",
+      "type": "registry:ui",
+      "description": "OTP input with timer, resend, and auto-validation",
+      "files": [
+        {
+          "path": "registry/otp-input.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": ["lucide-react"],
+      "devDependencies": [],
+      "tailwind": {},
+      "cssVars": {}
+    }
+  ]
+}