rl-core-front 0.16.4 → 0.16.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "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/button.tsx

@@ -2,6 +2,7 @@
 
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "#core/lib/utils";
@@ -43,22 +44,54 @@ export interface ButtonProps
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  /**
+   * A ação está em curso: mostra o giro e recusa clique.
+   *
+   * As duas coisas juntas de propósito. Salvar sem sinal nenhum é o que faz
+   * clicar de novo, e clicar de novo é o que duplica o lançamento — desabilitar
+   * sem mostrar por quê parece que o botão quebrou. Quem passa `loading` não
+   * precisa lembrar de passar `disabled` também.
+   *
+   * Ignorado com `asChild`: ali o filho é que decide o que desenha.
+   */
+  loading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    { className, variant, size, asChild = false, loading = false, children, ...props },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
+
+    // O giro entra ANTES do conteúdo, no lugar onde o ícone do botão já ficava:
+    // aparecendo depois, o texto pula para a esquerda quando ele some.
+    const conteudo =
+      loading && !asChild ? (
+        <>
+          <Loader2 className="animate-spin" aria-hidden />
+          {children}
+        </>
+      ) : (
+        children
+      );
+
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        {...(asChild ? {} : { disabled: loading || props.disabled })}
+        // Quem usa leitor de tela não vê o giro: é o `aria-busy` que conta.
+        {...(loading && !asChild ? { "aria-busy": true } : {})}
         // `<button>` sem `type` nasce `submit`: dentro de um form, um botão que
         // só abre um modal acabava salvando o registro junto. Quem submete
         // declara `type="submit"` — o spread abaixo deixa isso sobrescrever.
         // Com `asChild` o filho pode não ser um `<button>`, então não força.
         {...(asChild ? {} : { type: "button" as const })}
         {...props}
-      />
+      >
+        {conteudo}
+      </Comp>
     );
   },
 );

package/src/components/ui/hover-tip.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type { FocusEvent, JSX, MouseEvent, ReactNode } from "react";
+import { useState } from "react";
+import { createPortal } from "react-dom";
+
+export interface HoverTipProps {
+  /** O que o tooltip diz. Vazio não desenha nada. */
+  label: string;
+  children: ReactNode;
+}
+
+/** Onde o rótulo aparece na tela, em coordenada de viewport. */
+interface TipPosition {
+  x: number;
+  y: number;
+}
+
+/** A folga entre o gatilho e o rótulo. */
+const GAP = 6;
+
+/**
+ * O rótulo que aparece **na hora** ao passar o mouse.
+ *
+ * Existe pelo mesmo motivo do `HoverLabel` dos gráficos: o `title` do HTML só
+ * aparece depois de cerca de um segundo parado, e um segundo é tempo suficiente
+ * para quem passou o mouse concluir que não há nada ali e seguir em frente.
+ * Numa coluna de cinco ícones, isso é a diferença entre descobrir o que cada um
+ * faz e clicar para descobrir.
+ *
+ * Abre **embaixo**, e sai do documento por um portal com posição fixa. As duas
+ * decisões são a mesma: o `Table` do core envolve a tabela num `overflow-x-auto`
+ * e, quando um eixo rola, o navegador recorta o outro também — dentro da célula,
+ * o rótulo da última linha era cortado pela borda da tabela. Abrir à esquerda,
+ * como já se tentou, cabia na caixa mas cobria o conteúdo da própria linha: na
+ * lista de receitas, o "Recebido" do botão tapava o "Pendente" da situação, que
+ * é justamente o dado que se confere antes de clicar.
+ *
+ * O estado mora aqui dentro e guarda só a coordenada. Ele re-renderiza este
+ * componente e o rótulo — não a linha da tabela, que entra por `children` e
+ * chega pronta de fora.
+ */
+export const HoverTip = ({ label, children }: HoverTipProps): JSX.Element => {
+  const [position, setPosition] = useState<TipPosition | null>(null);
+
+  const show = (event: MouseEvent<HTMLElement> | FocusEvent<HTMLElement>): void => {
+    const box = event.currentTarget.getBoundingClientRect();
+
+    setPosition({ x: box.left + box.width / 2, y: box.bottom + GAP });
+  };
+
+  const hide = (): void => setPosition(null);
+
+  return (
+    <span
+      className="relative inline-flex"
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      // Chegando por teclado o rótulo também aparece: quem navega com Tab
+      // precisa do mesmo texto que o mouse mostra.
+      onFocus={show}
+      onBlur={hide}
+    >
+      {children}
+      {label &&
+        position &&
+        createPortal(
+          <span
+            role="tooltip"
+            style={{ left: position.x, top: position.y }}
+            className="pointer-events-none fixed z-100 max-w-[90vw] -translate-x-1/2 whitespace-nowrap rounded-md border border-border bg-popover px-2 py-0.5 text-[11px] font-medium text-popover-foreground shadow-lg"
+          >
+            {label}
+          </span>,
+          document.body,
+        )}
+    </span>
+  );
+};

package/src/components/ui/index.ts

@@ -20,6 +20,7 @@ export * from "./filter-field";
 export * from "./filter-group";
 export * from "./filter-rule";
 export * from "./filter-sheet";
+export * from "./hover-tip";
 export * from "./image-upload";
 export * from "./input";
 export * from "./job-progress";

package/src/components/ui/money-input.tsx

@@ -37,6 +37,15 @@ export interface MoneyInputProps {
   id?: string;
   placeholder?: string;
   disabled?: boolean;
+  /**
+   * Foca o campo ao montar.
+   *
+   * Existe porque num modal cujo primeiro campo é o valor — a meta do mês, o
+   * ajuste de saldo — o `DialogContent` entrega o foco ao botão de fechar do
+   * cabeçalho, e quem abriu para digitar um número precisa de um Tab antes de
+   * começar.
+   */
+  autoFocus?: boolean;
 }
 
 /**
@@ -113,6 +122,7 @@ export const MoneyInput = ({
   id,
   placeholder,
   disabled = false,
+  autoFocus = false,
 }: MoneyInputProps): JSX.Element => {
   const { t } = useI18n();
   const [open, setOpen] = useState(false);
@@ -218,6 +228,7 @@ export const MoneyInput = ({
             onBlur={onBlur}
             placeholder={placeholder}
             disabled={disabled}
+            autoFocus={autoFocus}
             prefix="R$"
             inputMode="decimal"
             className="pr-11"
@@ -254,20 +265,20 @@ export const MoneyInput = ({
         tabIndex={-1}
         className="w-72"
       >
-        <div className="flex min-h-17 flex-col justify-between gap-1 rounded-md border border-border bg-muted/50 px-3 py-2 text-right">
+        <div className="flex min-h-14 flex-col justify-between gap-1 rounded-md border border-border bg-muted/50 px-3 py-1.5 text-right">
           <span className="min-h-5 break-all font-mono text-xs text-muted-foreground">
             {toDisplayExpression(expression)}
           </span>
           {outcome.message ? (
             <span className="break-words text-xs text-destructive">{outcome.message}</span>
           ) : (
-            <span className="break-all font-mono text-lg font-medium tabular-nums">
+            <span className="break-all font-mono text-base font-medium tabular-nums">
               {formatMoneyBR(outcome.value ?? 0)}
             </span>
           )}
         </div>
 
-        <div className="mt-2 grid grid-cols-4 gap-1.5">
+        <div className="mt-2 grid grid-cols-4 gap-1">
           {KEYS.map((key, index) => (
             <Button
               key={key.label ?? key.action ?? index}
@@ -276,7 +287,7 @@ export const MoneyInput = ({
               aria-label={key.labelKey ? t(key.labelKey) : undefined}
               onClick={() => press(key)}
               className={cn(
-                "h-9 px-0 font-mono text-sm",
+                "h-8 px-0 font-mono text-sm",
                 key.role === "operator" && "text-primary",
                 key.role === "aux" && "text-muted-foreground",
               )}
@@ -286,28 +297,31 @@ export const MoneyInput = ({
           ))}
         </div>
 
-        <div className="mt-2 flex gap-1.5">
+        {/*
+          A dica saiu daqui e virou o `title` do botão: num notebook de 768px o
+          painel inteiro não cabe na altura disponível, e o `PopoverContent`
+          passa a rolar — o teclado de uma calculadora com barra de rolagem é
+          pior que uma dica a menos.
+        */}
+        <div className="mt-2 flex gap-1">
           <Button
             type="button"
             variant="outline"
-            className="h-9 flex-1"
+            className="h-8 flex-1"
             onClick={() => setOpen(false)}
           >
             {t("calculator.cancel")}
           </Button>
           <Button
             type="button"
-            className="h-9 flex-1"
+            className="h-8 flex-1"
+            title={t("calculator.hint")}
             disabled={outcome.value === null}
             onClick={apply}
           >
             {t("calculator.apply")}
           </Button>
         </div>
-
-        <p className="mt-2 text-center text-[10px] text-muted-foreground">
-          {t("calculator.hint")}
-        </p>
       </PopoverContent>
     </Popover>
   );

package/src/features/rbac/panels/catalog-panel.tsx

@@ -17,6 +17,7 @@ import {
   DialogHeader,
   DialogTitle,
   Field,
+  HoverTip,
   Input,
   RowActions,
 } from "#core/components/ui";
@@ -157,23 +158,29 @@ export function CatalogPanel({
         cell: ({ row }) => (
           <RowActions>
             {canUpdate && (
-              <Button
-                variant="ghost"
-                size="iconSm"
-                onClick={() => openEdit(row.original)}
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
+              <HoverTip label={t("common.edit")}>
+                <Button
+                  aria-label={t("common.edit")}
+                  variant="ghost"
+                  size="iconSm"
+                  onClick={() => openEdit(row.original)}
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+              </HoverTip>
             )}
             {canDelete && (
-              <Button
-                variant="ghost"
-                size="iconSm"
-                className="text-destructive"
-                onClick={() => removeItem(row.original)}
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
+              <HoverTip label={t("common.delete")}>
+                <Button
+                  aria-label={t("common.delete")}
+                  variant="ghost"
+                  size="iconSm"
+                  className="text-destructive"
+                  onClick={() => removeItem(row.original)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </HoverTip>
             )}
           </RowActions>
         ),

package/src/features/rbac/panels/groups-panel.tsx

@@ -18,6 +18,7 @@ import {
   DialogHeader,
   DialogTitle,
   Field,
+  HoverTip,
   Input,
   Label,
   RowActions,
@@ -188,23 +189,29 @@ export function GroupsPanel(): JSX.Element {
         cell: ({ row }) => (
           <RowActions>
             {hasPermission("groups:update:any") && (
-              <Button
-                variant="ghost"
-                size="iconSm"
-                onClick={() => openEdit(row.original)}
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
+              <HoverTip label={t("common.edit")}>
+                <Button
+                  aria-label={t("common.edit")}
+                  variant="ghost"
+                  size="iconSm"
+                  onClick={() => openEdit(row.original)}
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+              </HoverTip>
             )}
             {hasPermission("groups:delete:any") && (
-              <Button
-                variant="ghost"
-                size="iconSm"
-                className="text-destructive"
-                onClick={() => remove(row.original)}
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
+              <HoverTip label={t("common.delete")}>
+                <Button
+                  aria-label={t("common.delete")}
+                  variant="ghost"
+                  size="iconSm"
+                  className="text-destructive"
+                  onClick={() => remove(row.original)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </HoverTip>
             )}
           </RowActions>
         ),

package/src/features/rbac/panels/permissions-panel.tsx

@@ -16,6 +16,7 @@ import {
   DialogHeader,
   DialogTitle,
   Field,
+  HoverTip,
   Input,
   RowActions,
 } from "#core/components/ui";
@@ -118,23 +119,29 @@ export function PermissionsPanel(): JSX.Element {
         cell: ({ row }) => (
           <RowActions>
             {hasPermission("permissions:update:any") && (
-              <Button
-                variant="ghost"
-                size="iconSm"
-                onClick={() => openEdit(row.original)}
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
+              <HoverTip label={t("common.edit")}>
+                <Button
+                  aria-label={t("common.edit")}
+                  variant="ghost"
+                  size="iconSm"
+                  onClick={() => openEdit(row.original)}
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+              </HoverTip>
             )}
             {hasPermission("permissions:delete:any") && (
-              <Button
-                variant="ghost"
-                size="iconSm"
-                className="text-destructive"
-                onClick={() => remove(row.original)}
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
+              <HoverTip label={t("common.delete")}>
+                <Button
+                  aria-label={t("common.delete")}
+                  variant="ghost"
+                  size="iconSm"
+                  className="text-destructive"
+                  onClick={() => remove(row.original)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </HoverTip>
             )}
           </RowActions>
         ),

package/src/features/users/users-screen.tsx

@@ -26,6 +26,7 @@ import {
   CreateButton,
   DataTable,
   DataTableFeatures,
+  HoverTip,
   RowActions,
 } from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
@@ -152,74 +153,82 @@ export function UsersScreen(): JSX.Element {
           return (
             <RowActions>
               {canUpdate && (
-                <Button
-                  variant="ghost"
-                  size="iconSm"
-                  title={t("common.edit")}
-                  onClick={() => openEdit(item)}
-                >
-                  <Pencil className="h-4 w-4" />
-                </Button>
+                <HoverTip label={t("common.edit")}>
+                  <Button
+                    variant="ghost"
+                    size="iconSm"
+                    aria-label={t("common.edit")}
+                    onClick={() => openEdit(item)}
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                </HoverTip>
               )}
               {canInvite && (
-                <Button
-                  variant="ghost"
-                  size="iconSm"
-                  title={t("users.sendFirstAccessLink")}
-                  onClick={() => {
-                    void confirm({
-                      title: t("users.sendFirstAccessLink"),
-                      description: item.email,
-                      confirmLabel: t("common.send"),
-                    }).then((ok) => {
-                      if (ok) {
-                        void u.sendFirstAccessLink(item.id);
-                      }
-                    });
-                  }}
-                >
-                  <MailPlus className="h-4 w-4" />
-                </Button>
+                <HoverTip label={t("users.sendFirstAccessLink")}>
+                  <Button
+                    variant="ghost"
+                    size="iconSm"
+                    aria-label={t("users.sendFirstAccessLink")}
+                    onClick={() => {
+                      void confirm({
+                        title: t("users.sendFirstAccessLink"),
+                        description: item.email,
+                        confirmLabel: t("common.send"),
+                      }).then((ok) => {
+                        if (ok) {
+                          void u.sendFirstAccessLink(item.id);
+                        }
+                      });
+                    }}
+                  >
+                    <MailPlus className="h-4 w-4" />
+                  </Button>
+                </HoverTip>
               )}
               {canReset && (
-                <Button
-                  variant="ghost"
-                  size="iconSm"
-                  title={t("users.sendPasswordResetLink")}
-                  onClick={() => {
-                    void confirm({
-                      title: t("users.sendPasswordResetLink"),
-                      description: item.email,
-                      confirmLabel: t("common.send"),
-                    }).then((ok) => {
-                      if (ok) {
-                        void u.sendPasswordResetLink(item.id);
-                      }
-                    });
-                  }}
-                >
-                  <KeyRound className="h-4 w-4" />
-                </Button>
+                <HoverTip label={t("users.sendPasswordResetLink")}>
+                  <Button
+                    variant="ghost"
+                    size="iconSm"
+                    aria-label={t("users.sendPasswordResetLink")}
+                    onClick={() => {
+                      void confirm({
+                        title: t("users.sendPasswordResetLink"),
+                        description: item.email,
+                        confirmLabel: t("common.send"),
+                      }).then((ok) => {
+                        if (ok) {
+                          void u.sendPasswordResetLink(item.id);
+                        }
+                      });
+                    }}
+                  >
+                    <KeyRound className="h-4 w-4" />
+                  </Button>
+                </HoverTip>
               )}
               {canReset2fa && item.twoFactorEnabled && (
-                <Button
-                  variant="ghost"
-                  size="iconSm"
-                  title={t("users.resetTwoFactor")}
-                  onClick={() => {
-                    void confirm({
-                      title: t("users.resetTwoFactor"),
-                      description: item.name,
-                      destructive: true,
-                    }).then((ok) => {
-                      if (ok) {
-                        void u.resetTwoFactor(item.id);
-                      }
-                    });
-                  }}
-                >
-                  <ShieldOff className="h-4 w-4" />
-                </Button>
+                <HoverTip label={t("users.resetTwoFactor")}>
+                  <Button
+                    variant="ghost"
+                    size="iconSm"
+                    aria-label={t("users.resetTwoFactor")}
+                    onClick={() => {
+                      void confirm({
+                        title: t("users.resetTwoFactor"),
+                        description: item.name,
+                        destructive: true,
+                      }).then((ok) => {
+                        if (ok) {
+                          void u.resetTwoFactor(item.id);
+                        }
+                      });
+                    }}
+                  >
+                    <ShieldOff className="h-4 w-4" />
+                  </Button>
+                </HoverTip>
               )}
               {canDeactivate && (
                 <Button
@@ -238,26 +247,28 @@ export function UsersScreen(): JSX.Element {
                 </Button>
               )}
               {canDelete && (
-                <Button
-                  variant="ghost"
-                  size="iconSm"
-                  className="text-destructive"
-                  title={t("common.delete")}
-                  onClick={() => {
-                    void confirm({
-                      title: t("common.delete"),
-                      description: item.name,
-                      confirmLabel: t("common.delete"),
-                      destructive: true,
-                    }).then((ok) => {
-                      if (ok) {
-                        void u.remove(item.id);
-                      }
-                    });
-                  }}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
+                <HoverTip label={t("common.delete")}>
+                  <Button
+                    variant="ghost"
+                    size="iconSm"
+                    className="text-destructive"
+                    aria-label={t("common.delete")}
+                    onClick={() => {
+                      void confirm({
+                        title: t("common.delete"),
+                        description: item.name,
+                        confirmLabel: t("common.delete"),
+                        destructive: true,
+                      }).then((ok) => {
+                        if (ok) {
+                          void u.remove(item.id);
+                        }
+                      });
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </HoverTip>
               )}
             </RowActions>
           );