@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-payment-method-picker/index.es.js

@@ -0,0 +1,520 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Check as n, CreditCard as r, Plus as i, Trash2 as a } from "lucide-react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/waka-payment-method-picker/index.tsx
+var l = ({ className: e }) => /* @__PURE__ */ c("svg", {
+	viewBox: "0 0 48 32",
+	className: e,
+	fill: "none",
+	children: [/* @__PURE__ */ s("rect", {
+		width: "48",
+		height: "32",
+		rx: "4",
+		fill: "#1A1F71"
+	}), /* @__PURE__ */ s("path", {
+		d: "M19.5 21H17L18.8 11H21.3L19.5 21ZM15.1 11L12.7 18L12.4 16.5L11.5 12C11.5 12 11.4 11 10 11H6.1L6 11.2C6 11.2 7.5 11.5 9.3 12.6L11.5 21H14.1L17.9 11H15.1ZM35 21H37.3L35.3 11H33.2C32.1 11 31.8 11.9 31.8 11.9L28 21H30.6L31.1 19.5H34.3L35 21ZM31.9 17.5L33.3 13.5L34.1 17.5H31.9ZM28.4 13.5L28.7 11.8C28.7 11.8 27.3 11.2 25.8 11.2C24.2 11.2 21.4 11.9 21.4 14.5C21.4 17 24.9 17 24.9 18.3C24.9 19.6 21.7 19.3 20.4 18.3L20.1 20.1C20.1 20.1 21.5 20.8 23.5 20.8C25.5 20.8 27.6 19.7 27.6 17.3C27.6 14.8 24 14.5 24 13.4C24 12.3 26.5 12.4 27.7 13.1L28.4 13.5Z",
+		fill: "white"
+	})]
+}), u = ({ className: e }) => /* @__PURE__ */ c("svg", {
+	viewBox: "0 0 48 32",
+	className: e,
+	fill: "none",
+	children: [
+		/* @__PURE__ */ s("rect", {
+			width: "48",
+			height: "32",
+			rx: "4",
+			fill: "#252525"
+		}),
+		/* @__PURE__ */ s("circle", {
+			cx: "19",
+			cy: "16",
+			r: "9",
+			fill: "#EB001B"
+		}),
+		/* @__PURE__ */ s("circle", {
+			cx: "29",
+			cy: "16",
+			r: "9",
+			fill: "#F79E1B"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M24 9.5C25.9 11 27.1 13.4 27.1 16C27.1 18.6 25.9 21 24 22.5C22.1 21 20.9 18.6 20.9 16C20.9 13.4 22.1 11 24 9.5Z",
+			fill: "#FF5F00"
+		})
+	]
+}), d = ({ className: e }) => /* @__PURE__ */ c("svg", {
+	viewBox: "0 0 48 32",
+	className: e,
+	fill: "none",
+	children: [/* @__PURE__ */ s("rect", {
+		width: "48",
+		height: "32",
+		rx: "4",
+		fill: "#006FCF"
+	}), /* @__PURE__ */ s("path", {
+		d: "M10 20V12H14.5L15.5 13.5L16.5 12H35V19.5C35 19.5 34.3 20 33.5 20H23.5L22.5 18.5V20H19V18C19 18 18.5 18.5 17.5 18.5H16.5V20H10ZM11 13V19H13.5L15.5 16L17.5 19H20V15.5L22 19H24L26 15.5V19H28V13H25L23 16.5L21 13H11ZM29 13V19H31V17H33C34.1 17 35 16.1 35 15C35 13.9 34.1 13 33 13H29ZM31 14.5H32.5C32.8 14.5 33 14.7 33 15C33 15.3 32.8 15.5 32.5 15.5H31V14.5Z",
+		fill: "white"
+	})]
+}), f = ({ className: e }) => /* @__PURE__ */ c("svg", {
+	viewBox: "0 0 48 32",
+	className: e,
+	fill: "none",
+	children: [
+		/* @__PURE__ */ s("rect", {
+			width: "48",
+			height: "32",
+			rx: "4",
+			fill: "#003087"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M19.5 8H25C27.8 8 29.5 9.5 29 12.5C28.5 16 26 17.5 23.5 17.5H21.5L20.5 23H17L19.5 8Z",
+			fill: "#009CDE"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M22 10H26.5C28.5 10 29.5 11 29.2 13C28.8 15.5 27 16.5 25 16.5H23.5L22.8 20.5H20L22 10Z",
+			fill: "white"
+		})
+	]
+}), p = ({ className: e }) => /* @__PURE__ */ c("svg", {
+	viewBox: "0 0 48 32",
+	className: e,
+	fill: "none",
+	children: [
+		/* @__PURE__ */ s("rect", {
+			width: "48",
+			height: "32",
+			rx: "4",
+			fill: "#000000"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M15.5 11.5C16.2 10.6 16.7 9.4 16.5 8.2C15.4 8.3 14.1 9 13.3 9.9C12.6 10.7 12 11.9 12.2 13.1C13.4 13.2 14.7 12.4 15.5 11.5Z",
+			fill: "white"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M16.5 13.3C14.9 13.2 13.5 14.2 12.7 14.2C11.9 14.2 10.7 13.4 9.4 13.4C7.7 13.4 6.1 14.4 5.2 16C3.3 19.2 4.7 24 6.5 26.6C7.4 27.9 8.5 29.3 9.9 29.3C11.2 29.2 11.7 28.4 13.3 28.4C14.8 28.4 15.3 29.3 16.7 29.2C18.1 29.2 19.1 27.9 20 26.6C21 25.1 21.4 23.7 21.5 23.6C21.4 23.6 18.4 22.4 18.4 18.9C18.3 16 20.7 14.6 20.8 14.5C19.4 12.5 17.3 12.3 16.5 13.3Z",
+			fill: "white",
+			transform: "scale(0.6) translate(12, 1)"
+		}),
+		/* @__PURE__ */ s("text", {
+			x: "24",
+			y: "19",
+			fill: "white",
+			fontSize: "8",
+			fontFamily: "system-ui",
+			fontWeight: "600",
+			children: "Pay"
+		})
+	]
+}), m = ({ className: e }) => /* @__PURE__ */ c("svg", {
+	viewBox: "0 0 48 32",
+	className: e,
+	fill: "none",
+	children: [
+		/* @__PURE__ */ s("rect", {
+			width: "48",
+			height: "32",
+			rx: "4",
+			fill: "#FFFFFF",
+			stroke: "#E0E0E0"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M22.8 16.6V20.4H21.4V10H25.2C26.1 10 26.9 10.3 27.6 10.9C28.3 11.5 28.6 12.3 28.6 13.3C28.6 14.3 28.3 15.1 27.6 15.7C26.9 16.3 26.1 16.6 25.1 16.6H22.8ZM22.8 11.3V15.3H25.2C25.7 15.3 26.2 15.1 26.5 14.7C26.9 14.3 27.1 13.9 27.1 13.3C27.1 12.8 26.9 12.3 26.5 11.9C26.1 11.5 25.7 11.3 25.1 11.3H22.8Z",
+			fill: "#5F6368"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M32.8 13.4C33.9 13.4 34.8 13.7 35.5 14.4C36.2 15.1 36.5 15.9 36.5 17V20.4H35.1V19.3H35C34.4 20.2 33.6 20.6 32.5 20.6C31.6 20.6 30.8 20.3 30.2 19.8C29.6 19.3 29.3 18.6 29.3 17.8C29.3 17 29.6 16.3 30.3 15.8C30.9 15.3 31.8 15 32.9 15C33.8 15 34.6 15.2 35.1 15.5V15.2C35.1 14.7 34.9 14.2 34.5 13.9C34.1 13.5 33.6 13.3 33 13.3C32.1 13.3 31.5 13.7 31 14.4L29.8 13.7C30.5 12.8 31.5 13.4 32.8 13.4ZM30.8 17.8C30.8 18.2 31 18.5 31.3 18.8C31.6 19.1 32 19.2 32.5 19.2C33.2 19.2 33.8 19 34.3 18.5C34.8 18 35.1 17.5 35.1 16.9C34.6 16.5 33.9 16.3 33.1 16.3C32.5 16.3 32 16.5 31.6 16.8C31.1 17.1 30.8 17.4 30.8 17.8Z",
+			fill: "#5F6368"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M43 13.6L38.7 23.3H37.2L38.8 19.9L36 13.6H37.6L39.5 18.3L41.4 13.6H43Z",
+			fill: "#5F6368"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M16.5 15.5C16.5 15.1 16.5 14.7 16.4 14.3H10.5V16.6H13.9C13.8 17.3 13.4 18 12.7 18.4V19.9H14.7C15.9 18.8 16.5 17.3 16.5 15.5Z",
+			fill: "#4285F4"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M10.5 21.3C12.1 21.3 13.5 20.8 14.7 19.9L12.7 18.4C12.1 18.8 11.4 19 10.5 19C9 19 7.7 18 7.2 16.7H5.2V18.2C6.3 20.2 8.3 21.3 10.5 21.3Z",
+			fill: "#34A853"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M7.2 16.7C7 16.2 6.9 15.6 6.9 15C6.9 14.4 7 13.8 7.2 13.3V11.8H5.2C4.6 13 4.2 14.4 4.2 15C4.2 15.6 4.6 17 5.2 18.2L7.2 16.7Z",
+			fill: "#FBBC05"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M10.5 11C11.5 11 12.4 11.4 13.1 12L14.8 10.3C13.5 9.1 12.1 8.5 10.5 8.5C8.3 8.5 6.3 9.6 5.2 11.8L7.2 13.3C7.7 12 9 11 10.5 11Z",
+			fill: "#EA4335"
+		})
+	]
+}), h = ({ className: e }) => /* @__PURE__ */ c("svg", {
+	viewBox: "0 0 48 32",
+	className: e,
+	fill: "none",
+	children: [
+		/* @__PURE__ */ s("rect", {
+			width: "48",
+			height: "32",
+			rx: "4",
+			fill: "#1E3A5F"
+		}),
+		/* @__PURE__ */ s("path", {
+			d: "M24 7L10 14V16H38V14L24 7Z",
+			fill: "white"
+		}),
+		/* @__PURE__ */ s("rect", {
+			x: "12",
+			y: "17",
+			width: "3",
+			height: "7",
+			fill: "white"
+		}),
+		/* @__PURE__ */ s("rect", {
+			x: "18",
+			y: "17",
+			width: "3",
+			height: "7",
+			fill: "white"
+		}),
+		/* @__PURE__ */ s("rect", {
+			x: "27",
+			y: "17",
+			width: "3",
+			height: "7",
+			fill: "white"
+		}),
+		/* @__PURE__ */ s("rect", {
+			x: "33",
+			y: "17",
+			width: "3",
+			height: "7",
+			fill: "white"
+		}),
+		/* @__PURE__ */ s("rect", {
+			x: "10",
+			y: "25",
+			width: "28",
+			height: "2",
+			fill: "white"
+		})
+	]
+}), g = [
+	{
+		type: "credit_card",
+		label: "Credit or Debit Card",
+		description: "Pay securely with your card",
+		acceptedBrands: [
+			"visa",
+			"mastercard",
+			"amex"
+		]
+	},
+	{
+		type: "paypal",
+		label: "PayPal",
+		description: "Fast and secure payment"
+	},
+	{
+		type: "apple_pay",
+		label: "Apple Pay",
+		description: "Pay with Face ID or Touch ID"
+	},
+	{
+		type: "google_pay",
+		label: "Google Pay",
+		description: "Fast checkout with Google"
+	},
+	{
+		type: "bank_transfer",
+		label: "Bank Transfer",
+		description: "Direct bank payment"
+	}
+], _ = ({ type: t, brand: n, className: i }) => {
+	let a = e("h-8 w-12 rounded", i);
+	if (t === "credit_card" && n) switch (n) {
+		case "visa": return /* @__PURE__ */ s(l, { className: a });
+		case "mastercard": return /* @__PURE__ */ s(u, { className: a });
+		case "amex": return /* @__PURE__ */ s(d, { className: a });
+		default: return /* @__PURE__ */ s(r, { className: e("h-6 w-6 text-muted-foreground", i) });
+	}
+	switch (t) {
+		case "credit_card": return /* @__PURE__ */ s(r, { className: e("h-6 w-6 text-muted-foreground", i) });
+		case "paypal": return /* @__PURE__ */ s(f, { className: a });
+		case "apple_pay": return /* @__PURE__ */ s(p, { className: a });
+		case "google_pay": return /* @__PURE__ */ s(m, { className: a });
+		case "bank_transfer": return /* @__PURE__ */ s(h, { className: a });
+		default: return /* @__PURE__ */ s(r, { className: e("h-6 w-6 text-muted-foreground", i) });
+	}
+}, v = ({ brands: t, className: n }) => /* @__PURE__ */ c("div", {
+	className: e("flex items-center gap-1", n),
+	children: [
+		t.includes("visa") && /* @__PURE__ */ s(l, { className: "h-6 w-9" }),
+		t.includes("mastercard") && /* @__PURE__ */ s(u, { className: "h-6 w-9" }),
+		t.includes("amex") && /* @__PURE__ */ s(d, { className: "h-6 w-9" })
+	]
+});
+function y({ value: r, onChange: l, savedMethods: u = [], options: d = g, showAddNew: f = !0, onAddNew: p, onDelete: m, allowDelete: h = !0, variant: y = "card", size: S = "md", layout: C = "list", columns: w = 2, showBrandIcons: T = !0, disabled: E = !1, className: D, label: O, error: k, required: A = !1 }) {
+	let [j, M] = t.useState(null), N = {
+		sm: {
+			container: "p-3",
+			text: "text-sm",
+			subtext: "text-xs",
+			icon: "h-5 w-8",
+			gap: "gap-2"
+		},
+		md: {
+			container: "p-4",
+			text: "text-base",
+			subtext: "text-sm",
+			icon: "h-6 w-10",
+			gap: "gap-3"
+		},
+		lg: {
+			container: "p-5",
+			text: "text-lg",
+			subtext: "text-base",
+			icon: "h-8 w-12",
+			gap: "gap-4"
+		}
+	}, P = {
+		1: "grid-cols-1",
+		2: "grid-cols-1 sm:grid-cols-2",
+		3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+	}, F = (e, t) => {
+		E || l?.(e, t);
+	}, I = (e) => {
+		E || p?.(e);
+	}, L = (e, t) => {
+		e.stopPropagation(), !E && m?.(t);
+	}, R = (e) => u.filter((t) => t.type === e), z = (e) => r === e, B = (t) => /* @__PURE__ */ s("div", {
+		className: e("h-5 w-5 rounded-full border-2 flex items-center justify-center transition-all duration-200", t ? "border-primary bg-primary" : "border-muted-foreground/30"),
+		children: t && /* @__PURE__ */ s("div", { className: "h-2 w-2 rounded-full bg-primary-foreground animate-in zoom-in-50 duration-200" })
+	}), V = (t) => /* @__PURE__ */ s("div", {
+		className: e("h-6 w-6 rounded-full flex items-center justify-center transition-all duration-200", t ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"),
+		children: t && /* @__PURE__ */ s(n, { className: "h-4 w-4 animate-in zoom-in-50 duration-200" })
+	}), H = (t) => {
+		let n = z(t.id);
+		return /* @__PURE__ */ s("button", {
+			type: "button",
+			onClick: () => F(t.id, t),
+			disabled: E,
+			className: e("group relative w-full text-left rounded-lg border transition-all duration-200", N[S].container, y === "card" && [
+				"bg-card hover:bg-accent/50",
+				n && "border-primary ring-2 ring-primary/20 bg-primary/5",
+				!n && "border-border hover:border-primary/50"
+			], y === "radio" && [
+				"bg-transparent hover:bg-accent/30",
+				n && "border-primary",
+				!n && "border-border"
+			], E && "opacity-50 cursor-not-allowed", !E && "cursor-pointer"),
+			children: /* @__PURE__ */ c("div", {
+				className: e("flex items-center", N[S].gap),
+				children: [
+					y === "radio" && B(n),
+					/* @__PURE__ */ s(_, {
+						type: t.type,
+						brand: t.brand,
+						className: N[S].icon
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ s("div", {
+							className: e("font-medium truncate", N[S].text),
+							children: t.label || b(t)
+						}), /* @__PURE__ */ s("div", {
+							className: e("text-muted-foreground", N[S].subtext),
+							children: x(t)
+						})]
+					}),
+					t.isDefault && /* @__PURE__ */ s("span", {
+						className: "px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full",
+						children: "Default"
+					}),
+					y === "card" && V(n),
+					h && m && /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: (e) => L(e, t.id),
+						className: e("opacity-0 group-hover:opacity-100 p-1.5 rounded-md transition-all duration-200", "text-muted-foreground hover:text-destructive hover:bg-destructive/10"),
+						"aria-label": `Delete ${t.label || "payment method"}`,
+						children: /* @__PURE__ */ s(a, { className: "h-4 w-4" })
+					})
+				]
+			})
+		}, t.id);
+	};
+	return /* @__PURE__ */ c("div", {
+		className: e("w-full", D),
+		children: [
+			O && /* @__PURE__ */ c("label", {
+				className: "block text-sm font-medium mb-2",
+				children: [O, A && /* @__PURE__ */ s("span", {
+					className: "text-destructive ml-1",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: e(C === "list" && "space-y-3", C === "grid" && e("grid gap-3", P[w])),
+				role: "radiogroup",
+				"aria-label": O || "Payment method selection",
+				children: [
+					u.length > 0 && !d.length && /* @__PURE__ */ s(o, { children: u.map(H) }),
+					d.map((t) => {
+						let n = R(t.type), r = z(t.type), a = j === t.type;
+						return /* @__PURE__ */ c("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ s("button", {
+								type: "button",
+								onClick: () => {
+									n.length > 0 ? M(a ? null : t.type) : F(t.type, t);
+								},
+								disabled: E || t.disabled,
+								className: e("group relative w-full text-left rounded-lg border transition-all duration-200", N[S].container, y === "card" && [
+									"bg-card hover:bg-accent/50",
+									r && "border-primary ring-2 ring-primary/20 bg-primary/5",
+									!r && "border-border hover:border-primary/50"
+								], y === "radio" && [
+									"bg-transparent hover:bg-accent/30",
+									r && "border-primary",
+									!r && "border-border"
+								], (E || t.disabled) && "opacity-50 cursor-not-allowed", !(E || t.disabled) && "cursor-pointer"),
+								children: /* @__PURE__ */ c("div", {
+									className: e("flex items-center", N[S].gap),
+									children: [
+										y === "radio" && B(r),
+										/* @__PURE__ */ s(_, {
+											type: t.type,
+											className: N[S].icon
+										}),
+										/* @__PURE__ */ c("div", {
+											className: "flex-1 min-w-0",
+											children: [/* @__PURE__ */ s("div", {
+												className: e("font-medium", N[S].text),
+												children: t.label
+											}), t.description && /* @__PURE__ */ s("div", {
+												className: e("text-muted-foreground", N[S].subtext),
+												children: t.description
+											})]
+										}),
+										t.type === "credit_card" && T && t.acceptedBrands && /* @__PURE__ */ s(v, { brands: t.acceptedBrands }),
+										y === "card" && n.length === 0 && V(r),
+										n.length > 0 && /* @__PURE__ */ c("span", {
+											className: e("px-2 py-0.5 text-xs font-medium rounded-full", "bg-muted text-muted-foreground"),
+											children: [n.length, " saved"]
+										})
+									]
+								})
+							}), a && n.length > 0 && /* @__PURE__ */ c("div", {
+								className: "ml-4 pl-4 border-l-2 border-muted space-y-2 animate-in slide-in-from-top-2 duration-200",
+								children: [n.map(H), f && /* @__PURE__ */ c("button", {
+									type: "button",
+									onClick: () => I(t.type),
+									disabled: E,
+									className: e("w-full flex items-center gap-3 p-3 rounded-lg border border-dashed", "text-muted-foreground hover:text-foreground hover:border-primary/50", "transition-all duration-200", E && "opacity-50 cursor-not-allowed"),
+									children: [/* @__PURE__ */ s(i, { className: "h-5 w-5" }), /* @__PURE__ */ c("span", {
+										className: N[S].subtext,
+										children: ["Add new ", t.label.toLowerCase()]
+									})]
+								})]
+							})]
+						}, t.type);
+					}),
+					f && !d.length && /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: () => I("credit_card"),
+						disabled: E,
+						className: e("w-full flex items-center justify-center gap-3 rounded-lg border-2 border-dashed", N[S].container, "text-muted-foreground hover:text-foreground hover:border-primary/50", "transition-all duration-200", E && "opacity-50 cursor-not-allowed"),
+						children: [/* @__PURE__ */ s(i, { className: "h-5 w-5" }), /* @__PURE__ */ s("span", {
+							className: e("font-medium", N[S].text),
+							children: "Add Payment Method"
+						})]
+					})
+				]
+			}),
+			k && /* @__PURE__ */ s("p", {
+				className: "mt-2 text-sm text-destructive",
+				children: k
+			})
+		]
+	});
+}
+function b(e) {
+	switch (e.type) {
+		case "credit_card":
+			let t = e.brand ? e.brand.charAt(0).toUpperCase() + e.brand.slice(1) : "Card";
+			return e.last4 ? `${t} ending in ${e.last4}` : t;
+		case "paypal": return e.email || "PayPal";
+		case "apple_pay": return "Apple Pay";
+		case "google_pay": return "Google Pay";
+		case "bank_transfer": return e.bankName || "Bank Account";
+		default: return "Payment Method";
+	}
+}
+function x(e) {
+	switch (e.type) {
+		case "credit_card": return e.expiryDate ? `Expires ${e.expiryDate}` : e.last4 ? `**** **** **** ${e.last4}` : "";
+		case "paypal": return e.email || "";
+		case "bank_transfer": return e.last4 ? `Account ending in ${e.last4}` : "";
+		default: return "";
+	}
+}
+function S(e) {
+	return /* @__PURE__ */ s(y, {
+		variant: "card",
+		layout: "grid",
+		columns: 2,
+		...e
+	});
+}
+function C(e) {
+	return /* @__PURE__ */ s(y, {
+		variant: "radio",
+		layout: "list",
+		...e
+	});
+}
+function w(e) {
+	return /* @__PURE__ */ s(y, {
+		variant: "radio",
+		size: "sm",
+		...e
+	});
+}
+function T(e = [], n = g) {
+	let [r, i] = t.useState(e.find((e) => e.isDefault)?.id || e[0]?.id), [a, o] = t.useState(e);
+	return {
+		value: r,
+		onChange: i,
+		selectedMethod: t.useMemo(() => {
+			let e = a.find((e) => e.id === r);
+			if (e) return e;
+			let t = n.find((e) => e.type === r);
+			if (t) return {
+				type: t.type,
+				id: t.type
+			};
+		}, [
+			r,
+			a,
+			n
+		]),
+		methods: a,
+		addMethod: t.useCallback((e) => {
+			o((t) => [...t, e]), i(e.id);
+		}, []),
+		removeMethod: t.useCallback((e) => {
+			o((t) => t.filter((t) => t.id !== e)), r === e && i(a[0]?.id);
+		}, [r, a]),
+		setDefault: t.useCallback((e) => {
+			o((t) => t.map((t) => ({
+				...t,
+				isDefault: t.id === e
+			})));
+		}, []),
+		options: n
+	};
+}
+//#endregion
+export { S as WakaPaymentMethodPickerCards, w as WakaPaymentMethodPickerCompact, C as WakaPaymentMethodPickerRadio, y as default, T as usePaymentMethodPicker };

package/dist/components/waka-permission-matrix/index.cjs.js

@@ -0,0 +1,20 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);var a={sm:{cell:`w-10 h-10`,header:`h-12`,roleHeader:`w-24`,permissionCell:`min-w-[180px]`,text:`text-xs`,icon:`h-3.5 w-3.5`,padding:`p-1`},md:{cell:`w-12 h-12`,header:`h-14`,roleHeader:`w-32`,permissionCell:`min-w-[220px]`,text:`text-sm`,icon:`h-4 w-4`,padding:`p-2`},lg:{cell:`w-14 h-14`,header:`h-16`,roleHeader:`w-40`,permissionCell:`min-w-[260px]`,text:`text-base`,icon:`h-5 w-5`,padding:`p-3`}},o=[`#ef4444`,`#3b82f6`,`#22c55e`,`#a855f7`,`#f59e0b`,`#06b6d4`,`#ec4899`,`#8b5cf6`];function s(e,t){return`${e}:${t}`}function c(e,t){return e.color||o[t%o.length]}function l({roles:e,permissions:t,categories:r,initialValues:i=[],onPermissionChange:a}){let[o,c]=n.useState(()=>{let e=new Map;return i.forEach(t=>{if(!t.inherited){let n=s(t.roleId,t.permissionId);e.set(n,t.granted)}}),e}),[l]=n.useState(()=>{let e=new Map;return i.forEach(t=>{if(t.inherited){let n=s(t.roleId,t.permissionId);e.set(n,t.granted)}}),e}),[u,d]=n.useState(``),[f,p]=n.useState(new Set),[m,h]=n.useState([]),[g,_]=n.useState(`none`),v=n.useRef(i),y=n.useCallback((e,t,n)=>{let r=s(e,t);c(e=>{let t=new Map(e);return t.set(r,n),t}),a?.(e,t,n)},[a]),b=n.useCallback((e,t)=>{let n=s(e,t);return o.has(n)?o.get(n)||!1:l.get(n)||!1},[o,l]),x=n.useCallback((e,t)=>{let n=s(e,t);return!o.has(n)&&l.has(n)},[o,l]),S=n.useCallback((e,t)=>{y(e,t,!b(e,t))},[b,y]),C=n.useCallback(e=>{c(n=>{let r=new Map(n);return t.forEach(t=>{let n=s(e,t.id);r.set(n,!0)}),r})},[t]),w=n.useCallback(e=>{c(n=>{let r=new Map(n);return t.forEach(t=>{let n=s(e,t.id);r.set(n,!1)}),r})},[t]),T=n.useCallback(t=>{c(n=>{let r=new Map(n);return e.forEach(e=>{let n=s(e.id,t);r.set(n,!0)}),r})},[e]),E=n.useCallback(t=>{c(n=>{let r=new Map(n);return e.forEach(e=>{let n=s(e.id,t);r.set(n,!1)}),r})},[e]),D=n.useCallback(e=>{p(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),O=n.useCallback(()=>{p(new Set)},[]),k=n.useCallback(()=>{p(new Set(r.map(e=>e.id)))},[r]),A=n.useCallback(e=>{h(t=>t.includes(e)?t:t.length>=2?[t[1],e]:[...t,e])},[]),j=n.useCallback(e=>{h(t=>t.filter(t=>t!==e))},[]),M=n.useCallback(()=>{h([]),_(`none`)},[]),N=n.useMemo(()=>{if(!u.trim())return t;let e=u.toLowerCase();return t.filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.id.toLowerCase().includes(e))},[t,u]);return{values:o,inheritedValues:l,setPermission:y,getPermission:b,isInherited:x,togglePermission:S,enableAllForRole:C,disableAllForRole:w,enableForAllRoles:T,disableForAllRoles:E,searchQuery:u,setSearchQuery:d,collapsedCategories:f,toggleCategory:D,expandAll:O,collapseAll:k,compareRoles:m,setCompareRoles:h,addToComparison:A,removeFromComparison:j,clearComparison:M,compareMode:g,setCompareMode:_,filteredPermissions:N,groupedPermissions:n.useMemo(()=>{let e=new Map;return r.forEach(t=>{e.set(t.id,[])}),N.forEach(t=>{let n=e.get(t.categoryId)||[];e.set(t.categoryId,[...n,t])}),e},[N,r]),exportValues:n.useCallback(()=>{let e=[];return o.forEach((t,n)=>{let[r,i]=n.split(`:`);e.push({roleId:r,permissionId:i,granted:t})}),l.forEach((t,n)=>{let[r,i]=n.split(`:`);e.push({roleId:r,permissionId:i,granted:t,inherited:!0})}),e},[o,l]),importValues:n.useCallback(e=>{let t=new Map;e.forEach(e=>{if(!e.inherited){let n=s(e.roleId,e.permissionId);t.set(n,e.granted)}}),c(t)},[]),reset:n.useCallback(()=>{let e=new Map;v.current.forEach(t=>{if(!t.inherited){let n=s(t.roleId,t.permissionId);e.set(n,t.granted)}}),c(e)},[]),copyRolePermissions:n.useCallback((e,n)=>{c(r=>{let i=new Map(r);return t.forEach(t=>{let a=s(e,t.id),o=s(n,t.id),c=r.get(a)||l.get(a)||!1;i.set(o,c)}),i})},[t,l]),getRolePermissionCount:n.useCallback(e=>{let n=0;return t.forEach(t=>{b(e,t.id)&&n++}),{granted:n,total:t.length}},[t,b]),getCategoryPermissionCount:n.useCallback((e,n)=>{let r=t.filter(e=>e.categoryId===n),i=0;return r.forEach(t=>{b(e,t.id)&&i++}),{granted:i,total:r.length}},[t,b]),rolesDiffer:n.useCallback((e,t,n)=>b(e,n)!==b(t,n),[b])}}function u({granted:e,inherited:n,readOnly:o,highlighted:s,size:c,onToggle:l}){let u=a[c];return(0,i.jsxs)(`div`,{className:t.cn(`relative flex items-center justify-center border border-border/50 transition-all duration-200`,u.cell,u.padding,!o&&!n&&`cursor-pointer hover:bg-accent/50`,n&&`bg-muted/30`,s&&`ring-2 ring-amber-400 ring-inset`,e?n?`bg-green-50 dark:bg-green-950/30`:`bg-green-100 dark:bg-green-900/40`:`bg-background`),onClick:!o&&!n?l:void 0,title:n?`Inherited permission (read-only)`:o?`Read-only`:e?`Click to revoke`:`Click to grant`,children:[e?(0,i.jsx)(r.Check,{className:t.cn(u.icon,n?`text-green-400 dark:text-green-600`:`text-green-600 dark:text-green-400`)}):(0,i.jsx)(r.X,{className:t.cn(u.icon,`text-muted-foreground/40`)}),n&&(0,i.jsx)(`div`,{className:`absolute -top-0.5 -right-0.5`,children:(0,i.jsx)(r.GitBranch,{className:`h-3 w-3 text-amber-500`})}),o&&!n&&(0,i.jsx)(`div`,{className:`absolute -bottom-0.5 -right-0.5`,children:(0,i.jsx)(r.Lock,{className:`h-2.5 w-2.5 text-muted-foreground/50`})})]})}function d({category:e,isCollapsed:n,roleCount:o,showIcon:s,size:c,onToggle:l}){let u=a[c];return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-2 bg-muted/50 border-y border-border cursor-pointer hover:bg-muted/70 transition-colors`,u.padding,u.text),onClick:l,style:{gridColumn:`span ${o+1}`},children:[n?(0,i.jsx)(r.ChevronRight,{className:u.icon}):(0,i.jsx)(r.ChevronDown,{className:u.icon}),s&&e.icon&&(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:e.icon}),(0,i.jsx)(`span`,{className:`font-semibold`,children:e.name}),e.description&&(0,i.jsxs)(`span`,{className:`text-muted-foreground ml-2 hidden sm:inline`,children:[`- `,e.description]})]})}function f({role:e,color:o,size:s,showBulkActions:c,readOnly:l,isComparing:u,permissionCount:d,onEnableAll:f,onDisableAll:p,onCompareToggle:m}){let h=a[s],[g,_]=n.useState(!1);return(0,i.jsxs)(`div`,{className:t.cn(`relative flex flex-col items-center justify-center border-b border-border bg-background`,h.header,h.padding,u&&`ring-2 ring-inset`,`min-w-[80px]`),style:{borderTopColor:o,borderTopWidth:3,...u&&{boxShadow:`inset 0 0 0 2px ${o}`}},children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(r.Users,{className:t.cn(h.icon,`text-muted-foreground`)}),(0,i.jsx)(`span`,{className:t.cn(h.text,`font-semibold truncate max-w-[100px]`),title:e.name,children:e.name})]}),(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[d.granted,`/`,d.total]}),c&&!l&&(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:()=>_(!g),className:`p-1 rounded hover:bg-muted transition-colors`,children:(0,i.jsx)(r.ChevronDown,{className:`h-3 w-3`})}),g&&(0,i.jsxs)(`div`,{className:`absolute top-full right-0 mt-1 z-20 bg-popover border rounded-lg shadow-lg p-1 min-w-[120px]`,children:[(0,i.jsxs)(`button`,{type:`button`,onClick:()=>{f(),_(!1)},className:`w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent rounded transition-colors`,children:[(0,i.jsx)(r.CheckSquare,{className:`h-3.5 w-3.5`}),`Enable All`]}),(0,i.jsxs)(`button`,{type:`button`,onClick:()=>{p(),_(!1)},className:`w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent rounded transition-colors`,children:[(0,i.jsx)(r.Square,{className:`h-3.5 w-3.5`}),`Disable All`]}),(0,i.jsx)(`hr`,{className:`my-1 border-border`}),(0,i.jsxs)(`button`,{type:`button`,onClick:()=>{m(),_(!1)},className:`w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent rounded transition-colors`,children:[(0,i.jsx)(r.Eye,{className:`h-3.5 w-3.5`}),u?`Remove from Compare`:`Compare`]})]})]}),g&&(0,i.jsx)(`div`,{className:`fixed inset-0 z-10`,onClick:()=>_(!1)})]})}function p({permission:e,roles:o,size:s,readOnly:c,showBulkActions:l,compareRoles:d,compareMode:f,getPermission:p,isInherited:m,togglePermission:h,enableForAllRoles:g,disableForAllRoles:_,rolesDiffer:v,getRoleColor:y}){let b=a[s],[x,S]=n.useState(!1),C=f===`highlight-diff`&&d.length===2&&v(d[0],d[1],e.id);return(0,i.jsxs)(`div`,{className:`contents group`,children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-2 bg-background border-b border-r border-border`,b.permissionCell,b.padding,b.text,`sticky left-0 z-10`),children:[(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`span`,{className:`font-medium truncate`,children:e.name}),e.inherited&&(0,i.jsx)(`span`,{title:`Inherited permission`,children:(0,i.jsx)(r.GitBranch,{className:`h-3 w-3 text-amber-500 flex-shrink-0`})})]}),e.description&&(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground truncate`,children:e.description})]}),l&&!c&&(0,i.jsxs)(`div`,{className:`relative opacity-0 group-hover:opacity-100 transition-opacity`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:()=>S(!x),className:`p-1 rounded hover:bg-muted transition-colors`,children:(0,i.jsx)(r.ChevronDown,{className:`h-3 w-3`})}),x&&(0,i.jsxs)(`div`,{className:`absolute top-full left-0 mt-1 z-20 bg-popover border rounded-lg shadow-lg p-1 min-w-[120px]`,children:[(0,i.jsxs)(`button`,{type:`button`,onClick:()=>{g(e.id),S(!1)},className:`w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent rounded transition-colors`,children:[(0,i.jsx)(r.CheckSquare,{className:`h-3.5 w-3.5`}),`Grant All`]}),(0,i.jsxs)(`button`,{type:`button`,onClick:()=>{_(e.id),S(!1)},className:`w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent rounded transition-colors`,children:[(0,i.jsx)(r.Square,{className:`h-3.5 w-3.5`}),`Revoke All`]})]}),x&&(0,i.jsx)(`div`,{className:`fixed inset-0 z-10`,onClick:()=>S(!1)})]})]}),o.map((t,n)=>{let r=p(t.id,e.id),a=m(t.id,e.id),o=d.includes(t.id);return(0,i.jsx)(u,{granted:r,inherited:a,readOnly:c,highlighted:C&&o,size:s,onToggle:()=>h(t.id,e.id)},`${e.id}-${t.id}`)})]})}function m({roles:e,permissions:o,categories:s,initialValues:u=[],readOnly:m=!1,enableComparison:h=!0,enableBulkOperations:g=!0,enableSearch:_=!0,showInheritance:v=!0,showCategoryIcons:y=!0,collapsibleCategories:b=!0,stickyHeader:x=!0,cellSize:S=`md`,onPermissionChange:C,onBulkChange:w,onSave:T,className:E}){let D=l({roles:e,permissions:o,categories:s,initialValues:u,onPermissionChange:C}),O=a[S],k=n.useMemo(()=>[...s].sort((e,t)=>(e.order||0)-(t.order||0)),[s]),A=n.useMemo(()=>[...e].sort((e,t)=>(e.order||0)-(t.order||0)),[e]);return(0,i.jsxs)(`div`,{className:t.cn(`space-y-4`,E),children:[_&&(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-4`,children:[(0,i.jsxs)(`div`,{className:`relative flex-1 max-w-sm`,children:[(0,i.jsx)(r.Search,{className:t.cn(O.icon,`absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground`)}),(0,i.jsx)(`input`,{type:`text`,placeholder:`Search permissions...`,value:D.searchQuery,onChange:e=>D.setSearchQuery(e.target.value),className:t.cn(`w-full pl-10 pr-4 py-2 border border-border rounded-lg bg-background`,O.text,`focus:outline-none focus:ring-2 focus:ring-primary/50`)}),D.searchQuery&&(0,i.jsx)(`button`,{type:`button`,onClick:()=>D.setSearchQuery(``),className:`absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground`,children:(0,i.jsx)(r.X,{className:O.icon})})]}),b&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsxs)(`button`,{type:`button`,onClick:D.expandAll,className:t.cn(`flex items-center gap-1 px-3 py-1.5 border border-border rounded-lg`,`bg-background hover:bg-muted transition-colors`,O.text),children:[(0,i.jsx)(r.ChevronDown,{className:O.icon}),`Expand All`]}),(0,i.jsxs)(`button`,{type:`button`,onClick:D.collapseAll,className:t.cn(`flex items-center gap-1 px-3 py-1.5 border border-border rounded-lg`,`bg-background hover:bg-muted transition-colors`,O.text),children:[(0,i.jsx)(r.ChevronRight,{className:O.icon}),`Collapse All`]})]}),h&&D.compareRoles.length===2&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`span`,{className:t.cn(O.text,`text-muted-foreground`),children:`Compare:`}),(0,i.jsx)(`div`,{className:`flex rounded-lg border border-border overflow-hidden`,children:[`none`,`highlight-diff`].map(e=>(0,i.jsx)(`button`,{type:`button`,onClick:()=>D.setCompareMode(e),className:t.cn(`px-3 py-1.5 transition-colors`,O.text,D.compareMode===e?`bg-primary text-primary-foreground`:`bg-background hover:bg-muted`),children:e===`none`?`Off`:`Highlight Diff`},e))}),(0,i.jsx)(`button`,{type:`button`,onClick:D.clearComparison,className:t.cn(`px-3 py-1.5 border border-border rounded-lg`,`bg-background hover:bg-muted transition-colors`,O.text),children:`Clear`})]})]}),v&&(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-4 text-sm text-muted-foreground`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`div`,{className:`flex items-center justify-center w-6 h-6 bg-green-100 dark:bg-green-900/40 rounded border border-border/50`,children:(0,i.jsx)(r.Check,{className:`h-3.5 w-3.5 text-green-600 dark:text-green-400`})}),(0,i.jsx)(`span`,{children:`Granted`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`div`,{className:`flex items-center justify-center w-6 h-6 bg-green-50 dark:bg-green-950/30 rounded border border-border/50`,children:(0,i.jsx)(r.Check,{className:`h-3.5 w-3.5 text-green-400 dark:text-green-600`})}),(0,i.jsx)(`span`,{children:`Inherited`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`div`,{className:`flex items-center justify-center w-6 h-6 bg-background rounded border border-border/50`,children:(0,i.jsx)(r.X,{className:`h-3.5 w-3.5 text-muted-foreground/40`})}),(0,i.jsx)(`span`,{children:`Not granted`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(r.GitBranch,{className:`h-4 w-4 text-amber-500`}),(0,i.jsx)(`span`,{children:`Inherited indicator`})]})]}),(0,i.jsx)(`div`,{className:`overflow-auto rounded-lg border border-border`,children:(0,i.jsxs)(`div`,{className:`grid min-w-max`,style:{gridTemplateColumns:`${O.permissionCell} repeat(${A.length}, ${O.cell.split(` `)[0].replace(`w-`,`minmax(`)}, 1fr))`},children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-center bg-muted/50 border-b border-r border-border font-semibold`,O.header,O.padding,O.text,x&&`sticky top-0 left-0 z-30`),children:[(0,i.jsx)(r.Shield,{className:t.cn(O.icon,`mr-2`)}),`Permissions`]}),A.map((e,n)=>(0,i.jsx)(`div`,{className:t.cn(x&&`sticky top-0 z-20`),children:(0,i.jsx)(f,{role:e,color:c(e,n),size:S,showBulkActions:g,readOnly:m,isComparing:D.compareRoles.includes(e.id),permissionCount:D.getRolePermissionCount(e.id),onEnableAll:()=>D.enableAllForRole(e.id),onDisableAll:()=>D.disableAllForRole(e.id),onCompareToggle:()=>{D.compareRoles.includes(e.id)?D.removeFromComparison(e.id):D.addToComparison(e.id)}})},e.id)),k.map(e=>{let t=D.groupedPermissions.get(e.id)||[],r=D.collapsedCategories.has(e.id);return t.length===0?null:(0,i.jsxs)(n.Fragment,{children:[b&&(0,i.jsx)(d,{category:e,isCollapsed:r,roleCount:A.length,showIcon:y,size:S,onToggle:()=>D.toggleCategory(e.id)}),!r&&t.map(e=>(0,i.jsx)(p,{permission:e,roles:A,size:S,readOnly:m,showBulkActions:g,compareRoles:D.compareRoles,compareMode:D.compareMode,getPermission:D.getPermission,isInherited:D.isInherited,togglePermission:D.togglePermission,enableForAllRoles:D.enableForAllRoles,disableForAllRoles:D.disableForAllRoles,rolesDiffer:D.rolesDiffer,getRoleColor:c},e.id))]},e.id)})]})}),!m&&T&&(0,i.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:D.reset,className:t.cn(`px-4 py-2 border border-border rounded-lg`,`bg-background hover:bg-muted transition-colors`,O.text),children:`Reset`}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>{T?.(D.exportValues())},className:t.cn(`px-4 py-2 rounded-lg`,`bg-primary text-primary-foreground hover:bg-primary/90 transition-colors`,O.text),children:`Save Permissions`})]}),(0,i.jsx)(`style`,{children:`
+        @keyframes permission-check {
+          0% { transform: scale(0.8); opacity: 0; }
+          50% { transform: scale(1.2); }
+          100% { transform: scale(1); opacity: 1; }
+        }
+
+        @keyframes permission-highlight {
+          0%, 100% { box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.5); }
+          50% { box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 1); }
+        }
+
+        .permission-granted {
+          animation: permission-check 0.2s ease-out;
+        }
+
+        .permission-highlighted {
+          animation: permission-highlight 2s ease-in-out infinite;
+        }
+      `})]})}exports.default=m,exports.usePermissionMatrix=l;