@bharat-ui/react 0.1.0

package/README.md

@@ -0,0 +1,159 @@
+# @bharat-ui/react
+
+React components for Indian products — PAN input, Aadhaar OTP, UPI payments, pincode lookup and ₹ amount entry.  
+Built on top of [`@bharat-ui/validators`](https://npmjs.com/package/@bharat-ui/validators). Requires React 19.
+
+## Install
+
+```bash
+npm install @bharat-ui/react
+```
+
+## Components
+
+Import each component from its own subpath:
+
+```ts
+import { AmountInput }  from '@bharat-ui/react/AmountInput';
+import { OTPInput }     from '@bharat-ui/react/OTPInput';
+import { PANInput }     from '@bharat-ui/react/PANInput';
+import { PincodeInput } from '@bharat-ui/react/PincodeInput';
+import { UPIButton }    from '@bharat-ui/react/UPIButton';
+```
+
+---
+
+### `<AmountInput />`
+
+Currency input with live INR formatting. Displays ₹ formatted output while storing the raw number internally.
+
+```tsx
+<AmountInput
+  label="Loan amount"
+  value={amount}
+  onChange={(raw, formatted) => setAmount(raw)}
+/>
+```
+
+| Prop | Type | Default |
+|---|---|---|
+| `value` | `number \| undefined` | — |
+| `onChange` | `(raw: number, formatted: string) => void` | — |
+| `label` | `string` | — |
+| `placeholder` | `string` | `'0'` |
+| `error` | `string` | — |
+| `disabled` | `boolean` | `false` |
+| `showCompact` | `boolean` | `true` |
+
+---
+
+### `<OTPInput />`
+
+Individual-box OTP entry with auto-advance, backspace handling, paste support and a built-in resend countdown timer.
+
+```tsx
+<OTPInput
+  label="Enter OTP sent to +91 98765 43210"
+  length={6}
+  resendAfterSeconds={30}
+  onComplete={(otp) => verifyOTP(otp)}
+  onResend={() => requestNewOTP()}
+/>
+```
+
+| Prop | Type | Default |
+|---|---|---|
+| `length` | `4 \| 6` | `6` |
+| `label` | `string` | — |
+| `onComplete` | `(otp: string) => void` | — |
+| `onChange` | `(otp: string) => void` | — |
+| `resendAfterSeconds` | `number` | `30` |
+| `onResend` | `() => void` | — |
+| `error` | `string` | — |
+| `disabled` | `boolean` | `false` |
+
+---
+
+### `<PANInput />`
+
+Text input that auto-uppercases, validates PAN format on each keystroke, and shows the taxpayer type badge on valid input.
+
+```tsx
+<PANInput
+  label="PAN number"
+  value={pan}
+  onChange={(value, valid) => setPan(value)}
+/>
+```
+
+| Prop | Type | Default |
+|---|---|---|
+| `value` | `string` | `''` |
+| `onChange` | `(value: string, valid: boolean) => void` | — |
+| `label` | `string` | — |
+| `error` | `string` | — |
+| `disabled` | `boolean` | `false` |
+| `showTypeBadge` | `boolean` | `true` |
+
+---
+
+### `<PincodeInput />`
+
+Numeric input that looks up the 6-digit pincode in the India Post dataset and shows the resolved district and state on valid input — no network calls.
+
+```tsx
+<PincodeInput
+  label="Pincode"
+  value={pincode}
+  onChange={(value, valid) => setPincode(value)}
+/>
+```
+
+| Prop | Type | Default |
+|---|---|---|
+| `value` | `string` | `''` |
+| `onChange` | `(value: string, valid: boolean) => void` | — |
+| `label` | `string` | — |
+| `error` | `string` | — |
+| `disabled` | `boolean` | `false` |
+| `showCascade` | `boolean` | `true` |
+
+---
+
+### `<UPIButton />`
+
+Renders a row of UPI app buttons (GPay, PhonePe, Paytm, BHIM) that each generate a deep-link payment URI. No SDK or backend required.
+
+```tsx
+<UPIButton
+  vpa="merchant@okaxis"
+  amount={499}
+  merchantName="Acme Store"
+  transactionNote="Order #1234"
+/>
+```
+
+| Prop | Type | Default |
+|---|---|---|
+| `vpa` | `string` | — |
+| `amount` | `number` | — |
+| `merchantName` | `string` | — |
+| `transactionNote` | `string` | — |
+| `currency` | `string` | `'INR'` |
+| `onSuccess` | `() => void` | — |
+| `onError` | `(error: string) => void` | — |
+
+---
+
+## Peer dependencies
+
+```json
+{
+  "react": "^19.0.0",
+  "react-dom": "^19.0.0"
+}
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@bharat-ui/react",
+  "version": "0.1.0",
+  "private": false,
+  "exports": {
+    "./AmountInput": "./src/AmountInput.tsx",
+    "./OTPInput": "./src/OTPInput.tsx",
+    "./PANInput": "./src/PANInput.tsx",
+    "./PincodeInput": "./src/PincodeInput.tsx",
+    "./UPIButton": "./src/UPIButton.tsx"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "check-types": "tsc --noEmit",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@bharat-ui/validators": "0.1.0",
+    "@bharat-ui/data": "0.1.0"
+  },
+  "devDependencies": {
+    "@bharat-ui/eslint-config": "*",
+    "@bharat-ui/typescript-config": "*",
+    "@types/node": "^22.15.3",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "eslint": "^9.39.1",
+    "typescript": "5.9.2"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/src/AmountInput.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { formatINR, formatINRCompact, parseINR } from "@bharat-ui/validators";
+import * as React from "react";
+
+export interface AmountInputProps {
+  value?: number;
+  onChange?: (raw: number, formatted: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  label?: string;
+  error?: string;
+  showCompact?: boolean;
+}
+
+export function AmountInput({
+  value,
+  onChange,
+  placeholder = "0",
+  disabled = false,
+  label,
+  error,
+  showCompact = true,
+}: AmountInputProps) {
+  const [display, setDisplay] = React.useState(value ? formatINR(value) : "");
+  const [focused, setFocused] = React.useState(false);
+
+  const handleFocus = () => {
+    setFocused(true);
+    if (display) {
+      setDisplay(String(parseINR(display)));
+    }
+  };
+
+  const handleBlur = () => {
+    setFocused(false);
+    const raw = parseINR(display);
+    if (!isNaN(raw) && raw > 0) {
+      setDisplay(formatINR(raw));
+      onChange?.(raw, formatINR(raw));
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.replace(/[^\d]/g, "");
+    setDisplay(val);
+  };
+
+  const raw = parseINR(display);
+  const compact = !isNaN(raw) && raw > 0 ? formatINRCompact(raw) : null;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+      {label && (
+        <label
+          style={{
+            fontSize: "13px",
+            fontWeight: 500,
+            color: error ? "#dc2626" : "#6b7280",
+          }}
+        >
+          {label}
+        </label>
+      )}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          border: `1.5px solid ${error ? "#dc2626" : focused ? "#B45309" : "#d1d5db"}`,
+          borderRadius: "8px",
+          padding: "0 12px",
+          gap: "6px",
+          background: disabled ? "#f9fafb" : "#ffffff",
+          boxShadow: focused ? "0 0 0 3px rgba(180,83,9,0.12)" : "none",
+          transition: "all 0.15s ease",
+        }}
+      >
+        <span
+          style={{
+            fontSize: "16px",
+            fontWeight: 500,
+            color: "#6b7280",
+            userSelect: "none",
+          }}
+        >
+          ₹
+        </span>
+        <input
+          type="text"
+          inputMode="numeric"
+          value={display}
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          style={{
+            border: "none",
+            outline: "none",
+            fontSize: "16px",
+            fontWeight: 500,
+            padding: "10px 0",
+            width: "100%",
+            background: "transparent",
+            color: "#111827",
+          }}
+        />
+      </div>
+      {showCompact && compact && !focused && (
+        <span
+          style={{
+            fontSize: "12px",
+            color: "#6b7280",
+          }}
+        >
+          {compact}
+        </span>
+      )}
+      {error && (
+        <span
+          style={{
+            fontSize: "12px",
+            color: "#dc2626",
+          }}
+        >
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/OTPInput.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import * as React from "react";
+
+export interface OTPInputProps {
+  length?: 4 | 6;
+  onComplete?: (otp: string) => void;
+  onChange?: (otp: string) => void;
+  resendAfterSeconds?: number;
+  onResend?: () => void;
+  error?: string;
+  disabled?: boolean;
+  label?: string;
+}
+
+export function OTPInput({
+  length = 6,
+  onComplete,
+  onChange,
+  resendAfterSeconds = 30,
+  onResend,
+  error,
+  disabled = false,
+  label,
+}: OTPInputProps) {
+  const [values, setValues] = React.useState<string[]>(Array(length).fill(""));
+  const [seconds, setSeconds] = React.useState(resendAfterSeconds);
+  const [focused, setFocused] = React.useState<number | null>(null);
+  const refs = React.useRef<(HTMLInputElement | null)[]>([]);
+
+  React.useEffect(() => {
+    if (seconds <= 0) return;
+    const timer = setTimeout(() => setSeconds((s) => s - 1), 1000);
+    return () => clearTimeout(timer);
+  }, [seconds]);
+
+  const handleChange = (index: number, val: string) => {
+    const digit = val.replace(/\D/g, "").slice(-1);
+    const next = [...values];
+    next[index] = digit;
+    setValues(next);
+
+    const otp = next.join("");
+    onChange?.(otp);
+
+    if (digit && index < length - 1) {
+      refs.current[index + 1]?.focus();
+    }
+
+    if (next.every((v) => v !== "") && otp.length === length) {
+      onComplete?.(otp);
+    }
+  };
+
+  const handleKeyDown = (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    if (e.key === "Backspace") {
+      if (values[index]) {
+        const next = [...values];
+        next[index] = "";
+        setValues(next);
+        onChange?.(next.join(""));
+      } else if (index > 0) {
+        refs.current[index - 1]?.focus();
+      }
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const pasted = e.clipboardData
+      .getData("text")
+      .replace(/\D/g, "")
+      .slice(0, length);
+
+    if (!pasted) return;
+
+    const next = Array(length).fill("");
+    pasted.split("").forEach((char, i) => {
+      next[i] = char;
+    });
+    setValues(next);
+    onChange?.(next.join(""));
+
+    const lastFilled = Math.min(pasted.length, length - 1);
+    refs.current[lastFilled]?.focus();
+
+    if (pasted.length === length) {
+      onComplete?.(pasted);
+    }
+  };
+
+  const handleResend = () => {
+    setSeconds(resendAfterSeconds);
+    setValues(Array(length).fill(""));
+    refs.current[0]?.focus();
+    onResend?.();
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      {label && (
+        <label
+          style={{
+            fontSize: "13px",
+            fontWeight: 500,
+            color: error ? "#dc2626" : "#6b7280",
+          }}
+        >
+          {label}
+        </label>
+      )}
+
+      <div
+        style={{ display: "flex", gap: "8px" }}
+        role="group"
+        aria-label={label ?? "OTP input"}
+      >
+        {values.map((val, i) => (
+          <input
+            key={i}
+            ref={(el) => {
+              refs.current[i] = el;
+            }}
+            type="text"
+            inputMode="numeric"
+            maxLength={1}
+            value={val}
+            disabled={disabled}
+            aria-label={`Digit ${i + 1} of ${length}`}
+            onChange={(e) => handleChange(i, e.target.value)}
+            onKeyDown={(e) => handleKeyDown(i, e)}
+            onPaste={handlePaste}
+            onFocus={() => setFocused(i)}
+            onBlur={() => setFocused(null)}
+            style={{
+              width: "44px",
+              height: "52px",
+              textAlign: "center",
+              fontSize: "20px",
+              fontWeight: 600,
+              border: `1.5px solid ${
+                error
+                  ? "#dc2626"
+                  : focused === i
+                    ? "#B45309"
+                    : val
+                      ? "#B45309"
+                      : "#d1d5db"
+              }`,
+              borderRadius: "8px",
+              outline: "none",
+              background: disabled ? "#f9fafb" : "#ffffff",
+              color: "#111827",
+              boxShadow:
+                focused === i ? "0 0 0 3px rgba(180,83,9,0.12)" : "none",
+              transition: "all 0.15s ease",
+            }}
+          />
+        ))}
+      </div>
+
+      {error && (
+        <span style={{ fontSize: "12px", color: "#dc2626" }}>{error}</span>
+      )}
+
+      {onResend && (
+        <div style={{ fontSize: "13px", color: "#6b7280", marginTop: "4px" }}>
+          {seconds > 0 ? (
+            <>
+              Didn't get it?{" "}
+              <span style={{ color: "#B45309" }}>
+                Resend in 0:{String(seconds).padStart(2, "0")}
+              </span>
+            </>
+          ) : (
+            <>
+              Didn't get it?{" "}
+              <button
+                onClick={handleResend}
+                style={{
+                  background: "none",
+                  border: "none",
+                  color: "#B45309",
+                  cursor: "pointer",
+                  fontSize: "13px",
+                  fontWeight: 500,
+                  padding: 0,
+                  textDecoration: "underline",
+                }}
+              >
+                Resend OTP
+              </button>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/PANInput.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { validatePAN } from "@bharat-ui/validators";
+import * as React from "react";
+
+export interface PANInputProps {
+  value?: string;
+  onChange?: (value: string, valid: boolean) => void;
+  label?: string;
+  error?: string;
+  disabled?: boolean;
+  showTypeBadge?: boolean;
+}
+
+const TYPE_COLORS: Record<string, { bg: string; text: string }> = {
+  P: { bg: "#f0fdf4", text: "#15803d" },
+  C: { bg: "#eff6ff", text: "#1d4ed8" },
+  H: { bg: "#fef3c7", text: "#92400e" },
+  F: { bg: "#fdf4ff", text: "#7e22ce" },
+  T: { bg: "#fff1f2", text: "#be123c" },
+};
+
+export function PANInput({
+  value = "",
+  onChange,
+  label,
+  error,
+  disabled = false,
+  showTypeBadge = true,
+}: PANInputProps) {
+  const [focused, setFocused] = React.useState(false);
+
+  const result = value.length > 0 ? validatePAN(value) : null;
+  const typeCode = result?.meta?.typeCode ?? null;
+  const badgeColor = typeCode
+    ? (TYPE_COLORS[typeCode] ?? { bg: "#f3f4f6", text: "#374151" })
+    : null;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const cleaned = e.target.value
+      .toUpperCase()
+      .replace(/[^A-Z0-9]/g, "")
+      .slice(0, 10);
+    onChange?.(cleaned, validatePAN(cleaned).valid);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+      {label && (
+        <label
+          style={{
+            fontSize: "13px",
+            fontWeight: 500,
+            color: error ? "#dc2626" : "#6b7280",
+          }}
+        >
+          {label}
+        </label>
+      )}
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          border: `1.5px solid ${
+            error ? "#dc2626" : focused ? "#B45309" : "#d1d5db"
+          }`,
+          borderRadius: "8px",
+          padding: "0 12px",
+          gap: "8px",
+          background: disabled ? "#f9fafb" : "#ffffff",
+          boxShadow: focused ? "0 0 0 3px rgba(180,83,9,0.12)" : "none",
+          transition: "all 0.15s ease",
+        }}
+      >
+        <input
+          type="text"
+          value={value}
+          onChange={handleChange}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          disabled={disabled}
+          maxLength={10}
+          placeholder="ABCDE1234F"
+          style={{
+            border: "none",
+            outline: "none",
+            fontSize: "15px",
+            fontFamily: "var(--font-mono, monospace)",
+            letterSpacing: "0.12em",
+            padding: "10px 0",
+            width: "100%",
+            background: "transparent",
+            color: "#111827",
+            textTransform: "uppercase",
+          }}
+        />
+
+        {showTypeBadge && result?.valid && badgeColor && (
+          <span
+            style={{
+              fontSize: "11px",
+              fontWeight: 500,
+              padding: "2px 8px",
+              borderRadius: "99px",
+              background: badgeColor.bg,
+              color: badgeColor.text,
+              whiteSpace: "nowrap",
+              flexShrink: 0,
+            }}
+          >
+            {result.meta?.type}
+          </span>
+        )}
+      </div>
+
+      {!error && result && !result.valid && value.length === 10 && (
+        <span style={{ fontSize: "12px", color: "#dc2626" }}>
+          {result.error}
+        </span>
+      )}
+
+      {error && (
+        <span style={{ fontSize: "12px", color: "#dc2626" }}>{error}</span>
+      )}
+    </div>
+  );
+}

package/src/PincodeInput.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { validatePincode } from "@bharat-ui/validators";
+import * as React from "react";
+
+export interface PincodeInputProps {
+  value?: string;
+  onChange?: (value: string, valid: boolean) => void;
+  label?: string;
+  error?: string;
+  disabled?: boolean;
+  showCascade?: boolean;
+}
+
+export function PincodeInput({
+  value = "",
+  onChange,
+  label,
+  error,
+  disabled = false,
+  showCascade = true,
+}: PincodeInputProps) {
+  const [focused, setFocused] = React.useState(false);
+
+  const result = value.length === 6 ? validatePincode(value) : null;
+
+  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,
+    );
+  };
+
+  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"
+        inputMode="numeric"
+        value={value}
+        onChange={handleChange}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        disabled={disabled}
+        maxLength={6}
+        placeholder="390001"
+        style={{
+          border: `1.5px solid ${
+            error ? "#dc2626" : focused ? "#B45309" : "#d1d5db"
+          }`,
+          borderRadius: "8px",
+          padding: "10px 12px",
+          fontSize: "15px",
+          fontFamily: "var(--font-mono, monospace)",
+          letterSpacing: "0.08em",
+          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",
+        }}
+      />
+
+      {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>
+          </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>
+      )}
+
+      {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>
+  );
+}

package/src/UPIButton.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { formatINR } from "@bharat-ui/validators";
+import * as React from "react";
+
+export interface UPIApp {
+  name: string;
+  packageName: string;
+  deepLinkScheme: string;
+}
+
+const UPI_APPS: UPIApp[] = [
+  {
+    name: "GPay",
+    packageName: "com.google.android.apps.nbu.paisa.user",
+    deepLinkScheme: "gpay",
+  },
+  {
+    name: "PhonePe",
+    packageName: "com.phonepe.app",
+    deepLinkScheme: "phonepe",
+  },
+  { name: "Paytm", packageName: "net.one97.paytm", deepLinkScheme: "paytmmp" },
+  { name: "BHIM", packageName: "in.org.npci.upiapp", deepLinkScheme: "upi" },
+];
+
+export interface UPIButtonProps {
+  vpa: string;
+  amount: number;
+  merchantName: string;
+  transactionNote?: string;
+  currency?: string;
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+}
+
+function buildUPIUrl(params: {
+  vpa: string;
+  amount: number;
+  merchantName: string;
+  transactionNote: string;
+  currency: string;
+}): string {
+  const query = new URLSearchParams({
+    pa: params.vpa,
+    pn: params.merchantName,
+    am: params.amount.toFixed(2),
+    cu: params.currency,
+    tn: params.transactionNote,
+  });
+  return `upi://pay?${query.toString()}`;
+}
+
+export function UPIButton({
+  vpa,
+  amount,
+  merchantName,
+  transactionNote = "Payment",
+  currency = "INR",
+  onSuccess,
+  onError,
+}: UPIButtonProps) {
+  const [expanded, setExpanded] = React.useState(false);
+  const [isDesktop, setIsDesktop] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsDesktop(window.innerWidth > 768);
+  }, []);
+
+  const upiUrl = buildUPIUrl({
+    vpa,
+    amount,
+    merchantName,
+    transactionNote,
+    currency,
+  });
+
+  const handlePayClick = () => {
+    if (isDesktop) {
+      setExpanded((e) => !e);
+      return;
+    }
+    window.location.href = upiUrl;
+  };
+
+  const handleAppClick = (app: UPIApp) => {
+    const appUrl = upiUrl.replace("upi://", `${app.deepLinkScheme}://`);
+    try {
+      window.location.href = appUrl;
+      onSuccess?.();
+    } catch {
+      onError?.(`Could not open ${app.name}`);
+    }
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      <button
+        onClick={handlePayClick}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          padding: "12px 20px",
+          borderRadius: "8px",
+          border: "1.5px solid #B45309",
+          background: "transparent",
+          color: "#B45309",
+          fontSize: "15px",
+          fontWeight: 500,
+          cursor: "pointer",
+          width: "100%",
+          transition: "all 0.15s ease",
+        }}
+        onMouseEnter={(e) => {
+          (e.target as HTMLButtonElement).style.background =
+            "rgba(180,83,9,0.06)";
+        }}
+        onMouseLeave={(e) => {
+          (e.target as HTMLButtonElement).style.background = "transparent";
+        }}
+      >
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <rect x="2" y="5" width="20" height="14" rx="2" />
+          <line x1="2" y1="10" x2="22" y2="10" />
+        </svg>
+        Pay {formatINR(amount)} via UPI
+      </button>
+
+      {expanded && isDesktop && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px",
+            border: "0.5px solid #e5e7eb",
+            borderRadius: "8px",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              padding: "8px 12px",
+              fontSize: "11px",
+              fontWeight: 500,
+              color: "#6b7280",
+              background: "#f9fafb",
+              letterSpacing: "0.06em",
+              textTransform: "uppercase",
+            }}
+          >
+            Choose UPI app
+          </div>
+          {UPI_APPS.map((app) => (
+            <button
+              key={app.name}
+              onClick={() => handleAppClick(app)}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "12px 16px",
+                border: "none",
+                borderTop: "0.5px solid #f3f4f6",
+                background: "#ffffff",
+                cursor: "pointer",
+                fontSize: "14px",
+                color: "#111827",
+                textAlign: "left",
+                transition: "background 0.1s ease",
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLButtonElement).style.background =
+                  "#fef3c7";
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLButtonElement).style.background =
+                  "#ffffff";
+              }}
+            >
+              <span>{app.name}</span>
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#9ca3af"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="9 18 15 12 9 6" />
+              </svg>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div
+        style={{
+          display: "flex",
+          gap: "6px",
+          flexWrap: "wrap",
+        }}
+      >
+        {UPI_APPS.map((app) => (
+          <span
+            key={app.name}
+            style={{
+              fontSize: "11px",
+              padding: "3px 8px",
+              borderRadius: "99px",
+              border: "0.5px solid #e5e7eb",
+              color: "#6b7280",
+            }}
+          >
+            {app.name}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/button.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { ReactNode } from "react";
+
+interface ButtonProps {
+  children: ReactNode;
+  className?: string;
+  appName: string;
+}
+
+export const Button = ({ children, className, appName }: ButtonProps) => {
+  return (
+    <button
+      className={className}
+      onClick={() => alert(`Hello from your ${appName} app!`)}
+    >
+      {children}
+    </button>
+  );
+};

package/src/card.tsx

@@ -0,0 +1,27 @@
+import { type JSX } from "react";
+
+export function Card({
+  className,
+  title,
+  children,
+  href,
+}: {
+  className?: string;
+  title: string;
+  children: React.ReactNode;
+  href: string;
+}): JSX.Element {
+  return (
+    <a
+      className={className}
+      href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <h2>
+        {title} <span>-&gt;</span>
+      </h2>
+      <p>{children}</p>
+    </a>
+  );
+}

package/src/code.tsx

@@ -0,0 +1,11 @@
+import { type JSX } from "react";
+
+export function Code({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): JSX.Element {
+  return <code className={className}>{children}</code>;
+}