rl-core-front 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/can.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { JSX, ReactNode } from "react";
+
+import { useAuth } from "#core/contexts/auth-context";
+
+export interface CanProps {
+  /** Uma chave, ou todas as da lista. */
+  permission?: string | string[];
+  /** Pelo menos uma destas. Combinado com `permission`, as duas condições valem. */
+  any?: string[];
+  /** O que aparece no lugar quando não pode. Ausente, nada. */
+  fallback?: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Mostra os filhos só para quem tem a permissão.
+ *
+ * É o `hasPermission` do `useAuth` em forma de bloco: um interruptor que
+ * lança noutro módulo, um botão que só entrega 403 para quem não tem a chave.
+ * Esconder é cortesia — quem proíbe de verdade é o backend, e a chave aqui
+ * precisa ser a mesma que a rota exige, senão o bloco some para quem podia ou
+ * aparece para quem não pode.
+ *
+ * Sem chave nenhuma, mostra: é como a rota sem decorator.
+ */
+export function Can({ permission, any, fallback = null, children }: CanProps): JSX.Element {
+  const { hasAllPermissions, hasAnyPermission } = useAuth();
+  const all = permission === undefined ? [] : [permission].flat();
+  const allowed =
+    (all.length === 0 || hasAllPermissions(...all)) &&
+    (!any || any.length === 0 || hasAnyPermission(...any));
+
+  return <>{allowed ? children : fallback}</>;
+}

package/src/components/ui/index.ts

@@ -3,6 +3,7 @@ export * from "./alert";
 export * from "./avatar";
 export * from "./badge";
 export * from "./button";
+export * from "./can";
 export * from "./card";
 export * from "./checkbox";
 export * from "./column-visibility-modal";