@wakastellar/ui 4.0.0-dev.0 → 4.0.1

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

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

package/dist/components/waka-phone-input/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`),n=require(`../input/index.cjs.js`),r=require(`../popover/index.cjs.js`);let i=require(`react`);i=e.__toESM(i);let a=require(`lucide-react`),o=require(`react/jsx-runtime`);var s=[{code:`US`,name:`United States`,dialCode:`+1`,flag:`🇺🇸`,format:`(###) ###-####`,priority:1},{code:`GB`,name:`United Kingdom`,dialCode:`+44`,flag:`🇬🇧`,format:`#### ######`,priority:2},{code:`CA`,name:`Canada`,dialCode:`+1`,flag:`🇨🇦`,format:`(###) ###-####`,priority:3},{code:`FR`,name:`France`,dialCode:`+33`,flag:`🇫🇷`,format:`# ## ## ## ##`,priority:4},{code:`DE`,name:`Germany`,dialCode:`+49`,flag:`🇩🇪`,format:`### #######`,priority:5},{code:`AF`,name:`Afghanistan`,dialCode:`+93`,flag:`🇦🇫`,format:`## ### ####`},{code:`AL`,name:`Albania`,dialCode:`+355`,flag:`🇦🇱`,format:`## ### ####`},{code:`DZ`,name:`Algeria`,dialCode:`+213`,flag:`🇩🇿`,format:`### ## ## ##`},{code:`AR`,name:`Argentina`,dialCode:`+54`,flag:`🇦🇷`,format:`## ####-####`},{code:`AU`,name:`Australia`,dialCode:`+61`,flag:`🇦🇺`,format:`### ### ###`},{code:`AT`,name:`Austria`,dialCode:`+43`,flag:`🇦🇹`,format:`### #######`},{code:`BE`,name:`Belgium`,dialCode:`+32`,flag:`🇧🇪`,format:`### ## ## ##`},{code:`BR`,name:`Brazil`,dialCode:`+55`,flag:`🇧🇷`,format:`## #####-####`},{code:`CN`,name:`China`,dialCode:`+86`,flag:`🇨🇳`,format:`### #### ####`},{code:`CO`,name:`Colombia`,dialCode:`+57`,flag:`🇨🇴`,format:`### ### ####`},{code:`HR`,name:`Croatia`,dialCode:`+385`,flag:`🇭🇷`,format:`## ### ####`},{code:`CZ`,name:`Czech Republic`,dialCode:`+420`,flag:`🇨🇿`,format:`### ### ###`},{code:`DK`,name:`Denmark`,dialCode:`+45`,flag:`🇩🇰`,format:`## ## ## ##`},{code:`EG`,name:`Egypt`,dialCode:`+20`,flag:`🇪🇬`,format:`### ### ####`},{code:`FI`,name:`Finland`,dialCode:`+358`,flag:`🇫🇮`,format:`## ### ####`},{code:`GR`,name:`Greece`,dialCode:`+30`,flag:`🇬🇷`,format:`### ### ####`},{code:`HK`,name:`Hong Kong`,dialCode:`+852`,flag:`🇭🇰`,format:`#### ####`},{code:`HU`,name:`Hungary`,dialCode:`+36`,flag:`🇭🇺`,format:`## ### ####`},{code:`IN`,name:`India`,dialCode:`+91`,flag:`🇮🇳`,format:`##### #####`},{code:`ID`,name:`Indonesia`,dialCode:`+62`,flag:`🇮🇩`,format:`### ### ####`},{code:`IE`,name:`Ireland`,dialCode:`+353`,flag:`🇮🇪`,format:`## ### ####`},{code:`IL`,name:`Israel`,dialCode:`+972`,flag:`🇮🇱`,format:`## ### ####`},{code:`IT`,name:`Italy`,dialCode:`+39`,flag:`🇮🇹`,format:`### ### ####`},{code:`JP`,name:`Japan`,dialCode:`+81`,flag:`🇯🇵`,format:`## #### ####`},{code:`KR`,name:`South Korea`,dialCode:`+82`,flag:`🇰🇷`,format:`## #### ####`},{code:`MY`,name:`Malaysia`,dialCode:`+60`,flag:`🇲🇾`,format:`## ### ####`},{code:`MX`,name:`Mexico`,dialCode:`+52`,flag:`🇲🇽`,format:`### ### ####`},{code:`NL`,name:`Netherlands`,dialCode:`+31`,flag:`🇳🇱`,format:`# ## ## ## ##`},{code:`NZ`,name:`New Zealand`,dialCode:`+64`,flag:`🇳🇿`,format:`## ### ####`},{code:`NO`,name:`Norway`,dialCode:`+47`,flag:`🇳🇴`,format:`### ## ###`},{code:`PK`,name:`Pakistan`,dialCode:`+92`,flag:`🇵🇰`,format:`### #######`},{code:`PH`,name:`Philippines`,dialCode:`+63`,flag:`🇵🇭`,format:`### ### ####`},{code:`PL`,name:`Poland`,dialCode:`+48`,flag:`🇵🇱`,format:`### ### ###`},{code:`PT`,name:`Portugal`,dialCode:`+351`,flag:`🇵🇹`,format:`### ### ###`},{code:`RO`,name:`Romania`,dialCode:`+40`,flag:`🇷🇴`,format:`### ### ###`},{code:`RU`,name:`Russia`,dialCode:`+7`,flag:`🇷🇺`,format:`### ###-##-##`},{code:`SA`,name:`Saudi Arabia`,dialCode:`+966`,flag:`🇸🇦`,format:`## ### ####`},{code:`SG`,name:`Singapore`,dialCode:`+65`,flag:`🇸🇬`,format:`#### ####`},{code:`ZA`,name:`South Africa`,dialCode:`+27`,flag:`🇿🇦`,format:`## ### ####`},{code:`ES`,name:`Spain`,dialCode:`+34`,flag:`🇪🇸`,format:`### ### ###`},{code:`SE`,name:`Sweden`,dialCode:`+46`,flag:`🇸🇪`,format:`## ### ## ##`},{code:`CH`,name:`Switzerland`,dialCode:`+41`,flag:`🇨🇭`,format:`## ### ## ##`},{code:`TW`,name:`Taiwan`,dialCode:`+886`,flag:`🇹🇼`,format:`### ### ###`},{code:`TH`,name:`Thailand`,dialCode:`+66`,flag:`🇹🇭`,format:`## ### ####`},{code:`TR`,name:`Turkey`,dialCode:`+90`,flag:`🇹🇷`,format:`### ### ####`},{code:`UA`,name:`Ukraine`,dialCode:`+380`,flag:`🇺🇦`,format:`## ### ####`},{code:`AE`,name:`United Arab Emirates`,dialCode:`+971`,flag:`🇦🇪`,format:`## ### ####`},{code:`VN`,name:`Vietnam`,dialCode:`+84`,flag:`🇻🇳`,format:`## ### ####`}];function c(e,t){if(!t)return e;let n=e.replace(/\D/g,``),r=``,i=0;for(let e=0;e<t.length&&i<n.length;e++)t[e]===`#`?(r+=n[i],i++):r+=t[e];return i<n.length&&(r+=n.slice(i)),r}function l(e){return e.replace(/\D/g,``)}function u(e){return e.format?e.format.replace(/#/g,`0`):``}function d(e,t,n){let r=l(e);if(r.length<6||r.length>15)return!1;if(t.format){let e=(t.format.match(/#/g)||[]).length;if(Math.abs(r.length-e)>2)return!1}return!0}function f(e){return s.find(t=>t.code.toLowerCase()===e.toLowerCase())}function p(e){return s.find(t=>t.dialCode===e)}function m(e,t){let n=t?.map(e=>e.toUpperCase())||[];return[...e].sort((e,t)=>{let r=e.priority||999,i=t.priority||999,a=n.indexOf(e.code),o=n.indexOf(t.code);return a!==-1&&o===-1?-1:a===-1&&o!==-1?1:a!==-1&&o!==-1?a-o:r===i?e.name.localeCompare(t.name):r-i})}function h(e={}){let{initialCountry:t=`US`,initialValue:n=``,validate:r}=e,[a,o]=i.useState(t),[u,p]=i.useState(n),m=i.useMemo(()=>f(a)||s[0],[a]),h=i.useMemo(()=>c(u,m.format),[u,m.format]),g=i.useMemo(()=>`${m.dialCode} ${h}`.trim(),[m.dialCode,h]),_=i.useMemo(()=>{let e={countryCode:m.code,dialCode:m.dialCode,nationalNumber:l(u),fullNumber:g,isValid:!0};return r?r(e):d(u,m)},[u,m,g,r]),v=i.useMemo(()=>({countryCode:m.code,dialCode:m.dialCode,nationalNumber:l(u),fullNumber:g,isValid:_}),[m,u,g,_]),y=i.useCallback(e=>{o(e)},[]),b=i.useCallback(()=>{p(``)},[]);return{country:m,setCountry:y,nationalNumber:h,setNationalNumber:p,value:v,isValid:_,format:i.useCallback(e=>c(e,m.format),[m.format]),unformat:i.useCallback(e=>l(e),[]),clear:b,getFullNumber:i.useCallback(()=>g,[g])}}function g({value:e,onChange:p,defaultCountry:h=`US`,placeholder:g,disabled:v=!1,error:y=!1,size:b=`md`,showCopy:x=!0,showClear:S=!0,onCopy:C,countries:w,preferredCountries:T,validate:E,className:D,id:O,name:k,required:ee=!1,autoFocus:A=!1}){let[j,M]=i.useState(!1),[N,P]=i.useState(``),[F,I]=i.useState(()=>f(h)||s[0]),[L,R]=i.useState(``),[z,B]=i.useState(!1),V=i.useRef(null),H=i.useRef(null);i.useEffect(()=>{if(e)if(typeof e==`string`)R(l(e));else{let t=f(e.countryCode);t&&I(t),R(e.nationalNumber)}},[]);let U=i.useMemo(()=>{let e=s;if(w&&w.length>0){let t=w.map(e=>e.toUpperCase());e=s.filter(e=>t.includes(e.code))}return m(e,T)},[w,T]),W=i.useMemo(()=>{if(!N)return U;let e=N.toLowerCase();return U.filter(t=>t.name.toLowerCase().includes(e)||t.code.toLowerCase().includes(e)||t.dialCode.includes(e))},[U,N]),{popularCountries:G,otherCountries:K}=i.useMemo(()=>({popularCountries:W.filter(e=>e.priority&&e.priority<=5),otherCountries:W.filter(e=>!e.priority||e.priority>5)}),[W]),q=i.useMemo(()=>c(L,F.format),[L,F.format]),J=i.useMemo(()=>`${F.dialCode} ${q}`.trim(),[F.dialCode,q]),Y=i.useMemo(()=>{if(!L)return!1;let e={countryCode:F.code,dialCode:F.dialCode,nationalNumber:l(L),fullNumber:J,isValid:!0};return E?E(e):d(L,F)},[L,F,J,E]),X=i.useCallback((e,t)=>{let n=c(t,e.format),r=`${e.dialCode} ${n}`.trim(),i=l(t),a={countryCode:e.code,dialCode:e.dialCode,nationalNumber:i,fullNumber:r,isValid:d(t,e,E)};p?.(a)},[p,E]),te=e=>{let t=e.target.value,n=l(t);R(n),X(F,n)},Z=e=>{I(e),M(!1),P(``),X(e,L),setTimeout(()=>V.current?.focus(),0)},ne=async()=>{let e=J;try{await navigator.clipboard.writeText(e),B(!0),C?.(e),setTimeout(()=>B(!1),2e3)}catch{console.error(`Failed to copy to clipboard`)}},re=()=>{R(``),X(F,``),V.current?.focus()};i.useEffect(()=>{j&&setTimeout(()=>H.current?.focus(),0)},[j]);let Q={sm:`h-8 text-xs`,md:`h-9 text-sm`,lg:`h-10 text-base`},$={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`},ie={sm:`px-2`,md:`px-3`,lg:`px-4`},ae=g||u(F)||`Enter phone number`,oe=L.length>0;return(0,o.jsxs)(`div`,{className:t.cn(`relative`,D),children:[(0,o.jsxs)(`div`,{className:t.cn(`flex items-center rounded-md border border-input bg-transparent shadow-sm transition-colors`,`focus-within:ring-1 focus-within:ring-ring`,y&&`border-destructive focus-within:ring-destructive`,v&&`cursor-not-allowed opacity-50`,Q[b]),children:[(0,o.jsxs)(r.Popover,{open:j,onOpenChange:M,children:[(0,o.jsx)(r.PopoverTrigger,{asChild:!0,children:(0,o.jsxs)(`button`,{type:`button`,disabled:v,className:t.cn(`flex items-center gap-1 border-r border-input bg-muted/50 rounded-l-md transition-colors`,`hover:bg-muted focus:outline-none focus:bg-muted`,ie[b],Q[b],v&&`pointer-events-none`),"aria-label":`Select country`,"aria-expanded":j,children:[(0,o.jsx)(`span`,{className:`text-base`,role:`img`,"aria-label":F.name,children:F.flag}),(0,o.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:F.dialCode}),(0,o.jsx)(a.ChevronDown,{className:t.cn($[b],`text-muted-foreground transition-transform`,j&&`rotate-180`)})]})}),(0,o.jsxs)(r.PopoverContent,{className:`w-64 p-0`,align:`start`,sideOffset:4,children:[(0,o.jsxs)(`div`,{className:`flex items-center border-b px-3 py-2`,children:[(0,o.jsx)(a.Search,{className:`h-4 w-4 text-muted-foreground mr-2 flex-shrink-0`}),(0,o.jsx)(`input`,{ref:H,type:`text`,placeholder:`Search countries...`,value:N,onChange:e=>P(e.target.value),className:`flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground`}),N&&(0,o.jsx)(`button`,{type:`button`,onClick:()=>P(``),className:`text-muted-foreground hover:text-foreground`,children:(0,o.jsx)(a.X,{className:`h-3 w-3`})})]}),(0,o.jsxs)(`div`,{className:`max-h-64 overflow-y-auto`,children:[G.length>0&&!N&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(`div`,{className:`px-3 py-1.5 text-xs font-medium text-muted-foreground`,children:`Popular`}),G.map(e=>(0,o.jsx)(_,{country:e,isSelected:F.code===e.code,onClick:()=>Z(e)},`popular-${e.code}`)),(0,o.jsx)(`div`,{className:`mx-3 my-1 border-b`})]}),!N&&K.length>0&&(0,o.jsx)(`div`,{className:`px-3 py-1.5 text-xs font-medium text-muted-foreground`,children:`All Countries`}),(N?W:K).map(e=>(0,o.jsx)(_,{country:e,isSelected:F.code===e.code,onClick:()=>Z(e)},e.code)),W.length===0&&(0,o.jsx)(`div`,{className:`py-6 text-center text-sm text-muted-foreground`,children:`No countries found`})]})]})]}),(0,o.jsx)(`div`,{className:`flex items-center pl-2`,children:(0,o.jsx)(a.Phone,{className:t.cn($[b],`text-muted-foreground`)})}),(0,o.jsx)(n.Input,{ref:V,id:O,name:k,type:`tel`,inputMode:`tel`,value:q,onChange:te,placeholder:ae,disabled:v,required:ee,autoFocus:A,autoComplete:`tel-national`,className:t.cn(`border-0 shadow-none focus-visible:ring-0 flex-1`,Q[b]),"aria-label":`Phone number`}),(0,o.jsxs)(`div`,{className:`flex items-center gap-1 pr-2`,children:[oe&&(0,o.jsx)(`div`,{className:t.cn(`flex items-center justify-center`,Y?`text-green-500`:`text-muted-foreground/50`),children:Y?(0,o.jsx)(a.Check,{className:$[b]}):(0,o.jsx)(a.AlertCircle,{className:t.cn($[b],`opacity-50`)})}),S&&L&&!v&&(0,o.jsx)(`button`,{type:`button`,onClick:re,className:`text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded`,"aria-label":`Clear phone number`,children:(0,o.jsx)(a.X,{className:$[b]})}),x&&L&&!v&&(0,o.jsx)(`button`,{type:`button`,onClick:ne,className:t.cn(`transition-colors p-0.5 rounded`,z?`text-green-500`:`text-muted-foreground hover:text-foreground`),"aria-label":z?`Copied!`:`Copy phone number`,children:z?(0,o.jsx)(a.Check,{className:$[b]}):(0,o.jsx)(a.Copy,{className:$[b]})})]})]}),k&&(0,o.jsx)(`input`,{type:`hidden`,name:`${k}_full`,value:J})]})}function _({country:e,isSelected:n,onClick:r}){return(0,o.jsxs)(`button`,{type:`button`,onClick:r,className:t.cn(`w-full flex items-center gap-3 px-3 py-2 text-sm transition-colors`,`hover:bg-accent hover:text-accent-foreground`,`focus:outline-none focus:bg-accent focus:text-accent-foreground`,n&&`bg-accent`),children:[(0,o.jsx)(`span`,{className:`text-base`,role:`img`,"aria-label":e.name,children:e.flag}),(0,o.jsx)(`span`,{className:`flex-1 text-left truncate`,children:e.name}),(0,o.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:e.dialCode}),n&&(0,o.jsx)(a.Check,{className:`h-4 w-4 text-primary flex-shrink-0`})]})}exports.COUNTRIES=s,exports.default=g,exports.formatPhoneNumber=c,exports.getCountryByCode=f,exports.getCountryByDialCode=p,exports.unformatPhoneNumber=l,exports.usePhoneInput=h;