@bharat-ui/react 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bharat-ui/react",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": false,
   "repository": {
     "type": "git",
@@ -14,7 +14,9 @@
     "./OTPInput": "./src/OTPInput.tsx",
     "./PANInput": "./src/PANInput.tsx",
     "./PincodeInput": "./src/PincodeInput.tsx",
-    "./UPIButton": "./src/UPIButton.tsx"
+    "./IFSCInput": "./src/IFSCInput.tsx",
+    "./UPIButton": "./src/UPIButton.tsx",
+    "./resolvers": "./src/resolvers.ts"
   },
   "publishConfig": {
     "exports": {
@@ -34,9 +36,17 @@
         "import": "./dist/PincodeInput.js",
         "types": "./dist/PincodeInput.d.ts"
       },
+      "./IFSCInput": {
+        "import": "./dist/IFSCInput.js",
+        "types": "./dist/IFSCInput.d.ts"
+      },
       "./UPIButton": {
         "import": "./dist/UPIButton.js",
         "types": "./dist/UPIButton.d.ts"
+      },
+      "./resolvers": {
+        "import": "./dist/resolvers.js",
+        "types": "./dist/resolvers.d.ts"
       }
     },
     "files": [
@@ -50,8 +60,8 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@bharat-ui/validators": "0.1.4",
-    "@bharat-ui/data": "0.1.3"
+    "@bharat-ui/validators": "0.1.5",
+    "@bharat-ui/data": "0.1.4"
   },
   "devDependencies": {
     "@bharat-ui/eslint-config": "*",

package/src/IFSCInput.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { validateIFSC } from "@bharat-ui/validators";
+import * as React from "react";
+import type { IFSCData, IFSCResolver } from "./types";
+
+export type { IFSCData, IFSCResolver };
+
+export interface IFSCInputProps {
+  value?: string;
+  onChange?: (value: string, valid: boolean) => void;
+  label?: string;
+  error?: string;
+  disabled?: boolean;
+  showDetails?: boolean;
+  resolver?: IFSCResolver;
+}
+
+export function IFSCInput({
+  value = "",
+  onChange,
+  label,
+  error,
+  disabled = false,
+  showDetails = true,
+  resolver,
+}: IFSCInputProps) {
+  const [focused, setFocused] = React.useState(false);
+  const [resolvedData, setResolvedData] = React.useState<IFSCData | null>(null);
+  const [resolving, setResolving] = React.useState(false);
+
+  const result = value.length === 11 ? validateIFSC(value) : null;
+
+  React.useEffect(() => {
+    if (!resolver || !result?.valid) {
+      setResolvedData(null);
+      return;
+    }
+    let cancelled = false;
+    setResolving(true);
+    resolver(value).then((data) => {
+      if (!cancelled) {
+        setResolvedData(data);
+        setResolving(false);
+      }
+    });
+    return () => { cancelled = true; };
+  }, [value, resolver, result?.valid]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const cleaned = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 11);
+    onChange?.(cleaned, cleaned.length === 11 ? validateIFSC(cleaned).valid : false);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+      {label && (
+        <label style={{ fontSize: "13px", fontWeight: 500, color: error ? "#dc2626" : "#6b7280" }}>
+          {label}
+        </label>
+      )}
+
+      <input
+        type="text"
+        value={value}
+        onChange={handleChange}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        disabled={disabled}
+        maxLength={11}
+        placeholder="SBIN0001234"
+        style={{
+          border: `1.5px solid ${error ? "#dc2626" : focused ? "#B45309" : "#d1d5db"}`,
+          borderRadius: "8px",
+          padding: "10px 12px",
+          fontSize: "15px",
+          fontFamily: "var(--font-mono, monospace)",
+          letterSpacing: "0.1em",
+          outline: "none",
+          background: disabled ? "#f9fafb" : "#ffffff",
+          color: "#111827",
+          width: "100%",
+          boxSizing: "border-box",
+          boxShadow: focused ? "0 0 0 3px rgba(180,83,9,0.12)" : "none",
+          transition: "all 0.15s ease",
+          textTransform: "uppercase",
+        }}
+      />
+
+      {showDetails && result?.valid && resolver && (
+        resolving ? (
+          <div style={{ padding: "10px 12px", background: "#f9fafb", borderRadius: "8px", border: "0.5px solid #e5e7eb", fontSize: "12px", color: "#9ca3af" }}>
+            Looking up...
+          </div>
+        ) : resolvedData ? (
+          <BankCard data={resolvedData} />
+        ) : null
+      )}
+
+      {result && !result.valid && value.length === 11 && !error && (
+        <span style={{ fontSize: "12px", color: "#dc2626" }}>{result.error}</span>
+      )}
+
+      {error && <span style={{ fontSize: "12px", color: "#dc2626" }}>{error}</span>}
+    </div>
+  );
+}
+
+function BankCard({ data }: { data: IFSCData }) {
+  const rows = [
+    { label: "Bank", value: data.bank },
+    data.branch ? { label: "Branch", value: data.branch } : null,
+    data.city ? { label: "City", value: data.city } : null,
+    data.state ? { label: "State", value: data.state } : null,
+    data.address ? { label: "Address", value: data.address } : null,
+  ].filter(Boolean) as { label: string; value: string }[];
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "6px", padding: "10px 12px", background: "#f9fafb", borderRadius: "8px", border: "0.5px solid #e5e7eb", marginTop: "2px" }}>
+      {rows.map((row) => (
+        <div key={row.label} style={{ display: "flex", justifyContent: "space-between", fontSize: "13px", gap: "12px" }}>
+          <span style={{ color: "#6b7280", flexShrink: 0 }}>{row.label}</span>
+          <span style={{ fontWeight: 500, color: "#111827", textAlign: "right" }}>{row.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/PincodeInput.tsx

@@ -2,6 +2,9 @@
 
 import { validatePincode } from "@bharat-ui/validators";
 import * as React from "react";
+import type { PincodeData, PincodeResolver } from "./types";
+
+export type { PincodeData, PincodeResolver };
 
 export interface PincodeInputProps {
   value?: string;
@@ -10,6 +13,7 @@ export interface PincodeInputProps {
   error?: string;
   disabled?: boolean;
   showCascade?: boolean;
+  resolver?: PincodeResolver;
 }
 
 export function PincodeInput({
@@ -19,29 +23,39 @@ export function PincodeInput({
   error,
   disabled = false,
   showCascade = true,
+  resolver,
 }: PincodeInputProps) {
   const [focused, setFocused] = React.useState(false);
+  const [resolvedData, setResolvedData] = React.useState<PincodeData | null>(null);
+  const [resolving, setResolving] = React.useState(false);
 
   const result = value.length === 6 ? validatePincode(value) : null;
 
+  React.useEffect(() => {
+    if (!resolver || !result?.valid) {
+      setResolvedData(null);
+      return;
+    }
+    let cancelled = false;
+    setResolving(true);
+    resolver(value).then((data) => {
+      if (!cancelled) {
+        setResolvedData(data);
+        setResolving(false);
+      }
+    });
+    return () => { cancelled = true; };
+  }, [value, resolver, result?.valid]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const cleaned = e.target.value.replace(/\D/g, "").slice(0, 6);
-    onChange?.(
-      cleaned,
-      cleaned.length === 6 ? validatePincode(cleaned).valid : false,
-    );
+    onChange?.(cleaned, cleaned.length === 6 ? validatePincode(cleaned).valid : false);
   };
 
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
       {label && (
-        <label
-          style={{
-            fontSize: "13px",
-            fontWeight: 500,
-            color: error ? "#dc2626" : "#6b7280",
-          }}
-        >
+        <label style={{ fontSize: "13px", fontWeight: 500, color: error ? "#dc2626" : "#6b7280" }}>
           {label}
         </label>
       )}
@@ -57,9 +71,7 @@ export function PincodeInput({
         maxLength={6}
         placeholder="390001"
         style={{
-          border: `1.5px solid ${
-            error ? "#dc2626" : focused ? "#B45309" : "#d1d5db"
-          }`,
+          border: `1.5px solid ${error ? "#dc2626" : focused ? "#B45309" : "#d1d5db"}`,
           borderRadius: "8px",
           padding: "10px 12px",
           fontSize: "15px",
@@ -75,79 +87,37 @@ export function PincodeInput({
         }}
       />
 
-      {showCascade && result?.valid && result.meta && (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "6px",
-            padding: "10px 12px",
-            background: "#f9fafb",
-            borderRadius: "8px",
-            border: "0.5px solid #e5e7eb",
-            marginTop: "2px",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              fontSize: "13px",
-            }}
-          >
-            <span style={{ color: "#6b7280" }}>District</span>
-            <span style={{ fontWeight: 500, color: "#111827" }}>
-              {result.meta.district}
-            </span>
-          </div>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              fontSize: "13px",
-            }}
-          >
-            <span style={{ color: "#6b7280" }}>State</span>
-            <span style={{ fontWeight: 500, color: "#111827" }}>
-              {result.meta.state}
-            </span>
-          </div>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              fontSize: "13px",
-            }}
-          >
-            <span style={{ color: "#6b7280" }}>Zone</span>
-            <span style={{ fontWeight: 500, color: "#111827" }}>
-              {result.meta.zone}
-            </span>
+      {showCascade && result?.valid && resolver && (
+        resolving ? (
+          <div style={{ padding: "10px 12px", background: "#f9fafb", borderRadius: "8px", border: "0.5px solid #e5e7eb", fontSize: "12px", color: "#9ca3af" }}>
+            Looking up...
           </div>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              fontSize: "13px",
-            }}
-          >
-            <span style={{ color: "#6b7280" }}>Head PO</span>
-            <span style={{ fontWeight: 500, color: "#111827" }}>
-              {result.meta.headPO}
-            </span>
-          </div>
-        </div>
+        ) : resolvedData ? (
+          <CascadeCard data={resolvedData} />
+        ) : null
       )}
 
-      {showCascade && result && !result.valid && value.length === 6 && (
-        <span style={{ fontSize: "12px", color: "#dc2626" }}>
-          {result.error}
-        </span>
-      )}
+      {error && <span style={{ fontSize: "12px", color: "#dc2626" }}>{error}</span>}
+    </div>
+  );
+}
 
-      {error && (
-        <span style={{ fontSize: "12px", color: "#dc2626" }}>{error}</span>
-      )}
+function CascadeCard({ data }: { data: PincodeData }) {
+  const rows = [
+    data.district ? { label: "District", value: data.district } : null,
+    { label: "State", value: data.state },
+    data.zone ? { label: "Zone", value: data.zone } : null,
+    data.headPO ? { label: "Head PO", value: data.headPO } : null,
+  ].filter(Boolean) as { label: string; value: string }[];
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "6px", padding: "10px 12px", background: "#f9fafb", borderRadius: "8px", border: "0.5px solid #e5e7eb", marginTop: "2px" }}>
+      {rows.map((row) => (
+        <div key={row.label} style={{ display: "flex", justifyContent: "space-between", fontSize: "13px" }}>
+          <span style={{ color: "#6b7280" }}>{row.label}</span>
+          <span style={{ fontWeight: 500, color: "#111827" }}>{row.value}</span>
+        </div>
+      ))}
     </div>
   );
 }

package/src/resolvers.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { PINCODE_DATA, PINCODE_PREFIX } from "@bharat-ui/data/pincode";
+import { IFSC_DATA } from "@bharat-ui/data/ifsc";
+import type { PincodeData, IFSCData } from "./types";
+
+// Bundled resolvers — backed by the small popular dataset in @bharat-ui/data.
+// Bundle cost: ~8KB. Import only if you want offline/zero-config lookup.
+// For full coverage swap with an API-backed resolver instead.
+
+export const bundledPincodeResolver = async (pincode: string): Promise<PincodeData | null> => {
+  const entry = PINCODE_DATA[pincode];
+  if (entry) return entry;
+  const prefix = pincode.slice(0, 2);
+  const prefixEntry = PINCODE_PREFIX[prefix];
+  return prefixEntry ?? null;
+};
+
+export const bundledIFSCResolver = async (ifsc: string): Promise<IFSCData | null> => {
+  return IFSC_DATA[ifsc.toUpperCase()] ?? null;
+};

package/src/types.ts

@@ -0,0 +1,19 @@
+export interface PincodeData {
+  district?: string;
+  state: string;
+  zone?: string;
+  headPO?: string;
+}
+
+export type PincodeResolver = (pincode: string) => Promise<PincodeData | null>;
+
+export interface IFSCData {
+  bank: string;
+  branch?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  contact?: string;
+}
+
+export type IFSCResolver = (ifsc: string) => Promise<IFSCData | null>;