@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-credit-card-input/index.es.js

@@ -0,0 +1,807 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Input as t } from "../input/index.es.js";
+import * as n from "react";
+import { AlertCircle as r, Check as i, CreditCard as a, Eye as o, EyeOff as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/waka-credit-card-input/index.tsx
+var u = [
+	{
+		type: "amex",
+		pattern: /^3[47]/,
+		lengths: [15],
+		cvvLength: 4
+	},
+	{
+		type: "visa",
+		pattern: /^4/,
+		lengths: [
+			13,
+			16,
+			19
+		],
+		cvvLength: 3
+	},
+	{
+		type: "mastercard",
+		pattern: /^(5[1-5]|2[2-7])/,
+		lengths: [16],
+		cvvLength: 3
+	},
+	{
+		type: "discover",
+		pattern: /^(6011|65|64[4-9])/,
+		lengths: [16, 19],
+		cvvLength: 3
+	},
+	{
+		type: "diners",
+		pattern: /^(36|38|30[0-5])/,
+		lengths: [14],
+		cvvLength: 3
+	},
+	{
+		type: "jcb",
+		pattern: /^35/,
+		lengths: [16, 19],
+		cvvLength: 3
+	},
+	{
+		type: "unionpay",
+		pattern: /^62/,
+		lengths: [
+			16,
+			17,
+			18,
+			19
+		],
+		cvvLength: 3
+	},
+	{
+		type: "maestro",
+		pattern: /^(50|5[6-9]|6[0-9])/,
+		lengths: [
+			12,
+			13,
+			14,
+			15,
+			16,
+			17,
+			18,
+			19
+		],
+		cvvLength: 3
+	}
+];
+function d(e) {
+	let t = e.replace(/\D/g, "");
+	for (let e of u) if (e.pattern.test(t)) return e.type;
+	return "unknown";
+}
+function f(e) {
+	return u.find((t) => t.type === e) || {
+		type: "unknown",
+		pattern: /.*/,
+		lengths: [16],
+		cvvLength: 3
+	};
+}
+function p(e) {
+	let t = e.replace(/\D/g, "");
+	if (t.length === 0) return !1;
+	let n = 0, r = !1;
+	for (let e = t.length - 1; e >= 0; e--) {
+		let i = parseInt(t[e], 10);
+		r && (i *= 2, i > 9 && (i -= 9)), n += i, r = !r;
+	}
+	return n % 10 == 0;
+}
+function m(e, t) {
+	let n = e.replace(/\D/g, "");
+	if (t === "amex") return [
+		n.slice(0, 4),
+		n.slice(4, 10),
+		n.slice(10, 15)
+	].filter(Boolean).join(" ");
+	let r = [];
+	for (let e = 0; e < n.length; e += 4) r.push(n.slice(e, e + 4));
+	return r.join(" ");
+}
+function h(e) {
+	let t = e.replace(/\D/g, "");
+	return t.length >= 2 ? `${t.slice(0, 2)}/${t.slice(2, 4)}` : t;
+}
+function g(e) {
+	let t = e.match(/^(\d{2})\/(\d{2})$/);
+	return t ? {
+		month: parseInt(t[1], 10),
+		year: parseInt(t[2], 10) + 2e3
+	} : null;
+}
+function _(e) {
+	let t = g(e);
+	if (!t) return !1;
+	let { month: n, year: r } = t;
+	if (n < 1 || n > 12) return !1;
+	let i = /* @__PURE__ */ new Date(), a = i.getFullYear(), o = i.getMonth() + 1;
+	return !(r < a || r === a && n < o);
+}
+function v({ type: t, className: n }) {
+	let r = e("w-8 h-6", n);
+	switch (t) {
+		case "visa": return /* @__PURE__ */ l("svg", {
+			className: r,
+			viewBox: "0 0 48 32",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ c("rect", {
+					width: "48",
+					height: "32",
+					rx: "4",
+					fill: "#1A1F71"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M20.5 21.5L22.5 10.5H25.5L23.5 21.5H20.5Z",
+					fill: "white"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M32.5 10.7C31.9 10.5 31 10.2 29.8 10.2C26.8 10.2 24.7 11.7 24.7 13.9C24.7 15.5 26.2 16.4 27.3 16.9C28.5 17.5 28.9 17.9 28.9 18.4C28.9 19.2 27.9 19.5 27 19.5C25.8 19.5 25.1 19.3 24.1 18.9L23.7 18.7L23.3 21.3C24 21.6 25.3 21.8 26.6 21.8C29.8 21.8 31.8 20.3 31.9 18C31.9 16.7 31.1 15.7 29.4 14.9C28.4 14.4 27.8 14 27.8 13.5C27.8 13 28.4 12.5 29.5 12.5C30.5 12.5 31.2 12.7 31.7 12.9L32 13L32.5 10.7Z",
+					fill: "white"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M37.5 10.5H35.2C34.5 10.5 34 10.7 33.7 11.4L29.5 21.5H32.7L33.3 19.8H37.2L37.6 21.5H40.5L37.5 10.5ZM34.2 17.5C34.5 16.7 35.5 14 35.5 14C35.5 14 35.8 13.2 36 12.7L36.2 13.9C36.2 13.9 36.8 16.7 36.9 17.5H34.2Z",
+					fill: "white"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M18.5 10.5L15.6 18.1L15.3 16.8C14.7 15 13 13 11 12L13.7 21.5H17L21.9 10.5H18.5Z",
+					fill: "white"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M13 10.5H8.1L8 10.7C11.8 11.6 14.3 14 15.2 16.9L14.2 11.5C14.1 10.8 13.6 10.5 13 10.5Z",
+					fill: "#F9A51A"
+				})
+			]
+		});
+		case "mastercard": return /* @__PURE__ */ l("svg", {
+			className: r,
+			viewBox: "0 0 48 32",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ c("rect", {
+					width: "48",
+					height: "32",
+					rx: "4",
+					fill: "#000000"
+				}),
+				/* @__PURE__ */ c("circle", {
+					cx: "18",
+					cy: "16",
+					r: "8",
+					fill: "#EB001B"
+				}),
+				/* @__PURE__ */ c("circle", {
+					cx: "30",
+					cy: "16",
+					r: "8",
+					fill: "#F79E1B"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M24 10.8C25.8 12.2 27 14.5 27 16C27 17.5 25.8 19.8 24 21.2C22.2 19.8 21 17.5 21 16C21 14.5 22.2 12.2 24 10.8Z",
+					fill: "#FF5F00"
+				})
+			]
+		});
+		case "amex": return /* @__PURE__ */ l("svg", {
+			className: r,
+			viewBox: "0 0 48 32",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ c("rect", {
+					width: "48",
+					height: "32",
+					rx: "4",
+					fill: "#006FCF"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M8 16H12L13 13.5L14 16H18L15.5 19.5H18V21H8V19.5H10.5L8 16Z",
+					fill: "white"
+				}),
+				/* @__PURE__ */ c("text", {
+					x: "20",
+					y: "20",
+					fill: "white",
+					fontSize: "8",
+					fontWeight: "bold",
+					fontFamily: "Arial",
+					children: "AMEX"
+				})
+			]
+		});
+		case "discover": return /* @__PURE__ */ l("svg", {
+			className: r,
+			viewBox: "0 0 48 32",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ c("rect", {
+					width: "48",
+					height: "32",
+					rx: "4",
+					fill: "#FFFFFF",
+					stroke: "#E5E5E5"
+				}),
+				/* @__PURE__ */ c("circle", {
+					cx: "30",
+					cy: "16",
+					r: "6",
+					fill: "#FF6600"
+				}),
+				/* @__PURE__ */ c("text", {
+					x: "8",
+					y: "20",
+					fill: "#000000",
+					fontSize: "7",
+					fontWeight: "bold",
+					fontFamily: "Arial",
+					children: "DISCOVER"
+				})
+			]
+		});
+		case "diners": return /* @__PURE__ */ l("svg", {
+			className: r,
+			viewBox: "0 0 48 32",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ c("rect", {
+					width: "48",
+					height: "32",
+					rx: "4",
+					fill: "#FFFFFF",
+					stroke: "#E5E5E5"
+				}),
+				/* @__PURE__ */ c("circle", {
+					cx: "24",
+					cy: "16",
+					r: "8",
+					fill: "#0079BE"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M19 16C19 13.2 20.5 10.8 22.7 9.6V22.4C20.5 21.2 19 18.8 19 16Z",
+					fill: "white"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M25.3 9.6C27.5 10.8 29 13.2 29 16C29 18.8 27.5 21.2 25.3 22.4V9.6Z",
+					fill: "white"
+				})
+			]
+		});
+		case "jcb": return /* @__PURE__ */ l("svg", {
+			className: r,
+			viewBox: "0 0 48 32",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ c("rect", {
+					width: "48",
+					height: "32",
+					rx: "4",
+					fill: "#FFFFFF",
+					stroke: "#E5E5E5"
+				}),
+				/* @__PURE__ */ c("rect", {
+					x: "8",
+					y: "8",
+					width: "10",
+					height: "16",
+					rx: "2",
+					fill: "#0066CC"
+				}),
+				/* @__PURE__ */ c("rect", {
+					x: "19",
+					y: "8",
+					width: "10",
+					height: "16",
+					rx: "2",
+					fill: "#E30613"
+				}),
+				/* @__PURE__ */ c("rect", {
+					x: "30",
+					y: "8",
+					width: "10",
+					height: "16",
+					rx: "2",
+					fill: "#00A651"
+				})
+			]
+		});
+		case "unionpay": return /* @__PURE__ */ l("svg", {
+			className: r,
+			viewBox: "0 0 48 32",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ c("rect", {
+				width: "48",
+				height: "32",
+				rx: "4",
+				fill: "#D71F27"
+			}), /* @__PURE__ */ c("text", {
+				x: "10",
+				y: "20",
+				fill: "white",
+				fontSize: "8",
+				fontWeight: "bold",
+				fontFamily: "Arial",
+				children: "UnionPay"
+			})]
+		});
+		case "maestro": return /* @__PURE__ */ l("svg", {
+			className: r,
+			viewBox: "0 0 48 32",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ c("rect", {
+					width: "48",
+					height: "32",
+					rx: "4",
+					fill: "#000000"
+				}),
+				/* @__PURE__ */ c("circle", {
+					cx: "18",
+					cy: "16",
+					r: "8",
+					fill: "#0066CC"
+				}),
+				/* @__PURE__ */ c("circle", {
+					cx: "30",
+					cy: "16",
+					r: "8",
+					fill: "#CC0000"
+				}),
+				/* @__PURE__ */ c("path", {
+					d: "M24 10C26 11.5 27.5 13.5 27.5 16C27.5 18.5 26 20.5 24 22C22 20.5 20.5 18.5 20.5 16C20.5 13.5 22 11.5 24 10Z",
+					fill: "#6C4899"
+				})
+			]
+		});
+		default: return /* @__PURE__ */ c(a, { className: e("w-5 h-5 text-muted-foreground", n) });
+	}
+}
+function y({ cardData: t, isFlipped: n, className: r }) {
+	return /* @__PURE__ */ c("div", {
+		className: e("perspective-1000", r),
+		children: /* @__PURE__ */ l("div", {
+			className: e("relative w-full h-48 transition-transform duration-700 transform-style-3d", n && "rotate-y-180"),
+			style: {
+				transformStyle: "preserve-3d",
+				transform: n ? "rotateY(180deg)" : "rotateY(0deg)"
+			},
+			children: [/* @__PURE__ */ l("div", {
+				className: e("absolute inset-0 w-full h-full rounded-xl p-6 text-white backface-hidden", "bg-gradient-to-br shadow-xl", t.cardType === "visa" && "from-blue-600 to-blue-800", t.cardType === "mastercard" && "from-red-600 to-orange-600", t.cardType === "amex" && "from-cyan-600 to-cyan-800", t.cardType === "discover" && "from-orange-500 to-orange-700", t.cardType === "unknown" && "from-gray-600 to-gray-800"),
+				style: { backfaceVisibility: "hidden" },
+				children: [
+					/* @__PURE__ */ l("div", {
+						className: "flex justify-between items-start mb-8",
+						children: [/* @__PURE__ */ c("div", { className: "w-12 h-8 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded opacity-90" }), /* @__PURE__ */ c(v, {
+							type: t.cardType,
+							className: "w-12 h-8"
+						})]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "font-mono text-xl tracking-wider mb-6",
+						children: t.cardNumber || "#### #### #### ####"
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "flex justify-between items-end",
+						children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("div", {
+							className: "text-xs uppercase opacity-70 mb-1",
+							children: "Card Holder"
+						}), /* @__PURE__ */ c("div", {
+							className: "font-medium tracking-wide uppercase",
+							children: t.cardHolder || "YOUR NAME"
+						})] }), /* @__PURE__ */ l("div", {
+							className: "text-right",
+							children: [/* @__PURE__ */ c("div", {
+								className: "text-xs uppercase opacity-70 mb-1",
+								children: "Expires"
+							}), /* @__PURE__ */ c("div", {
+								className: "font-mono",
+								children: t.expiry || "MM/YY"
+							})]
+						})]
+					})
+				]
+			}), /* @__PURE__ */ l("div", {
+				className: e("absolute inset-0 w-full h-full rounded-xl text-white backface-hidden rotate-y-180", "bg-gradient-to-br shadow-xl", t.cardType === "visa" && "from-blue-700 to-blue-900", t.cardType === "mastercard" && "from-red-700 to-orange-700", t.cardType === "amex" && "from-cyan-700 to-cyan-900", t.cardType === "discover" && "from-orange-600 to-orange-800", t.cardType === "unknown" && "from-gray-700 to-gray-900"),
+				style: {
+					backfaceVisibility: "hidden",
+					transform: "rotateY(180deg)"
+				},
+				children: [
+					/* @__PURE__ */ c("div", { className: "w-full h-12 bg-black/40 mt-6" }),
+					/* @__PURE__ */ c("div", {
+						className: "px-6 mt-6",
+						children: /* @__PURE__ */ l("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ c("div", {
+								className: "flex-1 h-10 bg-white/20 rounded flex items-center justify-end pr-4",
+								children: /* @__PURE__ */ c("span", {
+									className: "font-mono text-lg italic",
+									children: t.cvv || "###"
+								})
+							}), /* @__PURE__ */ c("div", {
+								className: "text-xs opacity-70",
+								children: "CVV"
+							})]
+						})
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "absolute bottom-4 right-4",
+						children: /* @__PURE__ */ c(v, {
+							type: t.cardType,
+							className: "w-10 h-6 opacity-50"
+						})
+					})
+				]
+			})]
+		})
+	});
+}
+function b(e = {}) {
+	let { initialValue: t, validateOnChange: r = !0, errorMessages: i } = e, [a, o] = n.useState({
+		cardNumber: t?.cardNumber || "",
+		rawCardNumber: t?.rawCardNumber || "",
+		cardHolder: t?.cardHolder || "",
+		expiry: t?.expiry || "",
+		cvv: t?.cvv || "",
+		cardType: t?.cardType || "unknown"
+	}), [s, c] = n.useState({}), [l, u] = n.useState({
+		cardNumber: !1,
+		cardHolder: !1,
+		expiry: !1,
+		cvv: !1
+	}), g = n.useCallback((e) => {
+		let t = {}, n = f(e.cardType);
+		return e.rawCardNumber ? n.lengths.includes(e.rawCardNumber.length) ? p(e.rawCardNumber) || (t.cardNumber = i?.luhn || "Invalid card number") : t.cardNumber = i?.cardNumber || "Invalid card number length" : t.cardNumber = i?.cardNumber || "Card number is required", e.cardHolder.trim() ? e.cardHolder.trim().length < 2 && (t.cardHolder = i?.cardHolder || "Name is too short") : t.cardHolder = i?.cardHolder || "Cardholder name is required", e.expiry ? _(e.expiry) || (t.expiry = i?.expiry || "Invalid or expired date") : t.expiry = i?.expiry || "Expiry date is required", e.cvv ? e.cvv.length !== n.cvvLength && (t.cvv = i?.cvv || `CVV must be ${n.cvvLength} digits`) : t.cvv = i?.cvv || "CVV is required", t;
+	}, [i]), v = n.useCallback((e) => {
+		let t = e.replace(/\D/g, "").slice(0, 19), n = d(t), i = m(t, n), s = {
+			...a,
+			cardNumber: i,
+			rawCardNumber: t,
+			cardType: n
+		};
+		o(s), u((e) => ({
+			...e,
+			cardNumber: !0
+		})), r && c(g(s));
+	}, [
+		a,
+		g,
+		r
+	]), y = n.useCallback((e) => {
+		let t = {
+			...a,
+			cardHolder: e.toUpperCase()
+		};
+		o(t), u((e) => ({
+			...e,
+			cardHolder: !0
+		})), r && c(g(t));
+	}, [
+		a,
+		g,
+		r
+	]), b = n.useCallback((e) => {
+		let t = h(e.replace(/\D/g, "").slice(0, 4)), n = {
+			...a,
+			expiry: t
+		};
+		o(n), u((e) => ({
+			...e,
+			expiry: !0
+		})), r && c(g(n));
+	}, [
+		a,
+		g,
+		r
+	]), x = n.useCallback((e) => {
+		let t = f(a.cardType), n = e.replace(/\D/g, "").slice(0, t.cvvLength), i = {
+			...a,
+			cvv: n
+		};
+		o(i), u((e) => ({
+			...e,
+			cvv: !0
+		})), r && c(g(i));
+	}, [
+		a,
+		g,
+		r
+	]), S = n.useCallback(() => {
+		o({
+			cardNumber: "",
+			rawCardNumber: "",
+			cardHolder: "",
+			expiry: "",
+			cvv: "",
+			cardType: "unknown"
+		}), c({}), u({
+			cardNumber: !1,
+			cardHolder: !1,
+			expiry: !1,
+			cvv: !1
+		});
+	}, []), C = n.useMemo(() => {
+		let e = g(a);
+		return Object.keys(e).length === 0;
+	}, [a, g]);
+	return {
+		cardData: a,
+		errors: n.useMemo(() => {
+			let e = {};
+			return l.cardNumber && s.cardNumber && (e.cardNumber = s.cardNumber), l.cardHolder && s.cardHolder && (e.cardHolder = s.cardHolder), l.expiry && s.expiry && (e.expiry = s.expiry), l.cvv && s.cvv && (e.cvv = s.cvv), e;
+		}, [s, l]),
+		touched: l,
+		isValid: C,
+		updateCardNumber: v,
+		updateCardHolder: y,
+		updateExpiry: b,
+		updateCvv: x,
+		validate: () => g(a),
+		reset: S,
+		setTouched: u
+	};
+}
+function x({ value: a, onChange: u, onValidationChange: p, disabled: m = !1, readOnly: h = !1, singleFieldMode: g = !1, showCardPreview: _ = !1, showCardTypeIcon: x = !0, placeholders: S, labels: C, errorMessages: w, size: T = "md", className: E, id: D, name: O, autoFocus: k = !1 }) {
+	let { cardData: A, errors: j, isValid: M, updateCardNumber: N, updateCardHolder: P, updateExpiry: F, updateCvv: I } = b({
+		initialValue: a,
+		errorMessages: w
+	}), [L, R] = n.useState(!1), [z, B] = n.useState(!1), [V, H] = n.useState(null), U = n.useRef(null), W = n.useRef(null), G = n.useRef(null), K = n.useRef(null);
+	n.useEffect(() => {
+		u?.(A);
+	}, [A, u]), n.useEffect(() => {
+		p?.(M, j);
+	}, [
+		M,
+		j,
+		p
+	]), n.useEffect(() => {
+		k && U.current && U.current.focus();
+	}, [k]);
+	let q = (e) => {
+		N(e.target.value);
+		let t = f(d(e.target.value.replace(/\D/g, ""))), n = e.target.value.replace(/\D/g, "");
+		t.lengths.includes(n.length) && G.current && G.current.focus();
+	}, J = (e) => {
+		F(e.target.value), e.target.value.replace(/\D/g, "").length === 4 && K.current && K.current.focus();
+	}, Y = () => {
+		H("cvv"), B(!0);
+	}, X = () => {
+		H(null), B(!1);
+	}, Z = {
+		sm: "h-8 text-xs",
+		md: "h-9 text-sm",
+		lg: "h-10 text-base"
+	}, Q = {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	}, $ = ({ children: t, label: n, error: i, htmlFor: a }) => /* @__PURE__ */ l("div", {
+		className: "space-y-1.5",
+		children: [
+			n && /* @__PURE__ */ c("label", {
+				htmlFor: a,
+				className: e("block font-medium text-foreground", Q[T]),
+				children: n
+			}),
+			t,
+			i && /* @__PURE__ */ l("div", {
+				className: "flex items-center gap-1 text-destructive",
+				children: [/* @__PURE__ */ c(r, { className: "h-3 w-3" }), /* @__PURE__ */ c("span", {
+					className: "text-xs",
+					children: i
+				})]
+			})
+		]
+	});
+	return g ? /* @__PURE__ */ c("div", {
+		className: e("space-y-4", E),
+		children: /* @__PURE__ */ c($, {
+			label: C?.cardNumber || "Card Details",
+			error: j.cardNumber,
+			htmlFor: D ? `${D}-combined` : void 0,
+			children: /* @__PURE__ */ l("div", {
+				className: "flex items-center gap-2",
+				children: [x && /* @__PURE__ */ c(v, {
+					type: A.cardType,
+					className: "flex-shrink-0"
+				}), /* @__PURE__ */ l("div", {
+					className: "flex-1 flex gap-2",
+					children: [
+						/* @__PURE__ */ c(t, {
+							ref: U,
+							id: D ? `${D}-combined` : void 0,
+							name: O ? `${O}-number` : void 0,
+							type: "text",
+							inputMode: "numeric",
+							autoComplete: "cc-number",
+							placeholder: S?.cardNumber || "Card number",
+							value: A.cardNumber,
+							onChange: q,
+							disabled: m,
+							readOnly: h,
+							className: e(Z[T], "flex-1", j.cardNumber && "border-destructive focus-visible:ring-destructive")
+						}),
+						/* @__PURE__ */ c(t, {
+							ref: G,
+							name: O ? `${O}-expiry` : void 0,
+							type: "text",
+							inputMode: "numeric",
+							autoComplete: "cc-exp",
+							placeholder: S?.expiry || "MM/YY",
+							value: A.expiry,
+							onChange: J,
+							disabled: m,
+							readOnly: h,
+							className: e(Z[T], "w-20", j.expiry && "border-destructive focus-visible:ring-destructive")
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "relative w-16",
+							children: [/* @__PURE__ */ c(t, {
+								ref: K,
+								name: O ? `${O}-cvv` : void 0,
+								type: L ? "text" : "password",
+								inputMode: "numeric",
+								autoComplete: "cc-csc",
+								placeholder: S?.cvv || "CVV",
+								value: A.cvv,
+								onChange: (e) => I(e.target.value),
+								onFocus: Y,
+								onBlur: X,
+								disabled: m,
+								readOnly: h,
+								className: e(Z[T], "pr-8", j.cvv && "border-destructive focus-visible:ring-destructive")
+							}), /* @__PURE__ */ c("button", {
+								type: "button",
+								onClick: () => R(!L),
+								className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+								tabIndex: -1,
+								children: c(L ? s : o, { className: "h-4 w-4" })
+							})]
+						})
+					]
+				})]
+			})
+		})
+	}) : /* @__PURE__ */ l("div", {
+		className: e("space-y-4", E),
+		children: [
+			_ && /* @__PURE__ */ c(y, {
+				cardData: A,
+				isFlipped: z,
+				className: "mb-6"
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "grid gap-4",
+				children: [
+					/* @__PURE__ */ c($, {
+						label: C?.cardNumber || "Card Number",
+						error: j.cardNumber,
+						htmlFor: D ? `${D}-number` : void 0,
+						children: /* @__PURE__ */ l("div", {
+							className: "relative",
+							children: [
+								/* @__PURE__ */ c(t, {
+									ref: U,
+									id: D ? `${D}-number` : void 0,
+									name: O ? `${O}-number` : void 0,
+									type: "text",
+									inputMode: "numeric",
+									autoComplete: "cc-number",
+									placeholder: S?.cardNumber || "1234 5678 9012 3456",
+									value: A.cardNumber,
+									onChange: q,
+									onFocus: () => H("cardNumber"),
+									onBlur: () => H(null),
+									disabled: m,
+									readOnly: h,
+									className: e(Z[T], "pr-12", j.cardNumber && "border-destructive focus-visible:ring-destructive")
+								}),
+								x && /* @__PURE__ */ c("div", {
+									className: "absolute right-3 top-1/2 -translate-y-1/2",
+									children: /* @__PURE__ */ c(v, { type: A.cardType })
+								}),
+								A.rawCardNumber && !j.cardNumber && /* @__PURE__ */ c(i, { className: "absolute right-12 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" })
+							]
+						})
+					}),
+					/* @__PURE__ */ c($, {
+						label: C?.cardHolder || "Cardholder Name",
+						error: j.cardHolder,
+						htmlFor: D ? `${D}-holder` : void 0,
+						children: /* @__PURE__ */ c(t, {
+							ref: W,
+							id: D ? `${D}-holder` : void 0,
+							name: O ? `${O}-holder` : void 0,
+							type: "text",
+							autoComplete: "cc-name",
+							placeholder: S?.cardHolder || "JOHN DOE",
+							value: A.cardHolder,
+							onChange: (e) => P(e.target.value),
+							onFocus: () => H("cardHolder"),
+							onBlur: () => H(null),
+							disabled: m,
+							readOnly: h,
+							className: e(Z[T], j.cardHolder && "border-destructive focus-visible:ring-destructive")
+						})
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "grid grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ c($, {
+							label: C?.expiry || "Expiry Date",
+							error: j.expiry,
+							htmlFor: D ? `${D}-expiry` : void 0,
+							children: /* @__PURE__ */ c(t, {
+								ref: G,
+								id: D ? `${D}-expiry` : void 0,
+								name: O ? `${O}-expiry` : void 0,
+								type: "text",
+								inputMode: "numeric",
+								autoComplete: "cc-exp",
+								placeholder: S?.expiry || "MM/YY",
+								value: A.expiry,
+								onChange: J,
+								onFocus: () => H("expiry"),
+								onBlur: () => H(null),
+								disabled: m,
+								readOnly: h,
+								className: e(Z[T], j.expiry && "border-destructive focus-visible:ring-destructive")
+							})
+						}), /* @__PURE__ */ c($, {
+							label: C?.cvv || "CVV",
+							error: j.cvv,
+							htmlFor: D ? `${D}-cvv` : void 0,
+							children: /* @__PURE__ */ l("div", {
+								className: "relative",
+								children: [/* @__PURE__ */ c(t, {
+									ref: K,
+									id: D ? `${D}-cvv` : void 0,
+									name: O ? `${O}-cvv` : void 0,
+									type: L ? "text" : "password",
+									inputMode: "numeric",
+									autoComplete: "cc-csc",
+									placeholder: S?.cvv ?? (A.cardType === "amex" ? "1234" : "123"),
+									value: A.cvv,
+									onChange: (e) => I(e.target.value),
+									onFocus: Y,
+									onBlur: X,
+									disabled: m,
+									readOnly: h,
+									className: e(Z[T], "pr-10", j.cvv && "border-destructive focus-visible:ring-destructive")
+								}), /* @__PURE__ */ c("button", {
+									type: "button",
+									onClick: () => R(!L),
+									className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+									tabIndex: -1,
+									"aria-label": L ? "Hide CVV" : "Show CVV",
+									children: c(L ? s : o, { className: "h-4 w-4" })
+								})]
+							})
+						})]
+					})
+				]
+			}),
+			M && A.rawCardNumber && /* @__PURE__ */ l("div", {
+				className: "flex items-center gap-2 text-sm text-green-600",
+				children: [/* @__PURE__ */ c(i, { className: "h-4 w-4" }), /* @__PURE__ */ c("span", { children: "Card details are valid" })]
+			})
+		]
+	});
+}
+//#endregion
+export { x as default, b as useCreditCardInput };