rl-core-front 0.3.0 → 0.5.0

package/src/components/app-shell.tsx

@@ -17,6 +17,9 @@ import { usePathname, useRouter } from "next/navigation";
 import type { JSX } from "react";
 import { useEffect, useMemo, useState } from "react";
 
+import { anyOrTeam } from "#core/_utils/permission";
+import { safeStorage } from "#core/_utils/storage";
+import { fullName } from "#core/_utils/user";
 import { Breadcrumbs } from "#core/components/breadcrumbs";
 import { LanguageSelector } from "#core/components/language-selector";
 import { ThemeToggle } from "#core/components/theme-toggle";
@@ -43,7 +46,37 @@ interface NavItem {
   key: string;
   href: string;
   icon: React.ComponentType<{ className?: string }>;
-  perm: string | null;
+  /** Uma permissão, ou várias das quais basta ter uma. */
+  perm: string | string[] | null;
+}
+
+/**
+ * Item de menu declarado pelo projeto.
+ *
+ * O core não conhece as telas de quem o instala (§14), então elas entram por
+ * aqui em vez de o projeto reescrever o shell.
+ *
+ * ```tsx
+ * <AppShell navItems={[{ label: "nav.tasks", href: "/tarefas", icon: ListTodo }]}>
+ * ```
+ */
+export interface AppNavItem {
+  /**
+   * Chave de i18n (`nav.tasks`) ou o texto pronto (`"Tarefas"`).
+   *
+   * Chave sem tradução cadastrada volta como veio, então as duas formas
+   * funcionam — o projeto só precisa do dicionário quando for bilíngue.
+   */
+  label: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+  /**
+   * Permissão exigida para o item aparecer. Ausente, aparece para todos.
+   *
+   * Uma lista significa "qualquer uma destas" — é o que permite a mesma tela
+   * atender dois escopos, como `users:read:any` e `users:read:team`.
+   */
+  permission?: string | string[] | null;
 }
 
 const DASHBOARD: NavItem = {
@@ -59,7 +92,14 @@ const PROFILE: NavItem = {
   perm: null,
 };
 const ADMIN_CHILDREN: NavItem[] = [
-  { key: "nav.users", href: "/usuarios", icon: Users, perm: "users:read:any" },
+  {
+    key: "nav.users",
+    href: "/usuarios",
+    icon: Users,
+    // Gerente entra pela mesma porta: a lista que ele recebe já vem podada à
+    // equipe dele.
+    perm: anyOrTeam("users:read"),
+  },
   { key: "nav.rbac", href: "/rbac", icon: ShieldCheck, perm: "roles:read:any" },
   { key: "nav.logs", href: "/logs", icon: ScrollText, perm: "audit:read:any" },
   // Restrito a administradores — só quem tem audit:read-trail:any (só Super Admin) vê este item.
@@ -71,7 +111,13 @@ const ADMIN_CHILDREN: NavItem[] = [
   },
 ];
 
-export function AppShell({ children }: { children: React.ReactNode }): JSX.Element {
+export interface AppShellProps {
+  children: React.ReactNode;
+  /** Telas do projeto no menu, entre o dashboard e o grupo de administração. */
+  navItems?: AppNavItem[];
+}
+
+export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
   const { user, loading, logout, hasPermission } = useAuth();
   const { t } = useI18n();
   const brand = useBrand();
@@ -79,16 +125,40 @@ export function AppShell({ children }: { children: React.ReactNode }): JSX.Eleme
   const pathname = usePathname();
 
   const [mobileOpen, setMobileOpen] = useState(false);
-  const [collapsed, setCollapsed] = useState<boolean>(() => {
-    if (typeof window === "undefined") {return false;}
-    return localStorage.getItem(COLLAPSE_KEY) === "1";
-  });
+  const [collapsed, setCollapsed] = useState<boolean>(
+    () => safeStorage.get(COLLAPSE_KEY) === "1",
+  );
+
+  const allows = (perm: string | string[] | null): boolean => {
+    if (!perm) {
+      return true;
+    }
+    return Array.isArray(perm)
+      ? perm.some((code) => hasPermission(code))
+      : hasPermission(perm);
+  };
 
   const adminChildren = useMemo(
-    () => ADMIN_CHILDREN.filter((c) => !c.perm || hasPermission(c.perm)),
+    () => ADMIN_CHILDREN.filter((c) => allows(c.perm)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [user],
   );
+
+  // Os itens do projeto passam pelo mesmo filtro de permissão dos do core: um
+  // menu que mostra o que o usuário não pode abrir só entrega 403.
+  const projectItems = useMemo<NavItem[]>(
+    () =>
+      (navItems ?? [])
+        .filter((item) => allows(item.permission ?? null))
+        .map((item) => ({
+          key: item.label,
+          href: item.href,
+          icon: item.icon,
+          perm: item.permission ?? null,
+        })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [user, navItems],
+  );
   const adminActive = adminChildren.some((c) => pathname === c.href);
   const [adminOpen, setAdminOpen] = useState(adminActive);
 
@@ -115,7 +185,7 @@ export function AppShell({ children }: { children: React.ReactNode }): JSX.Eleme
   const toggleCollapsed = (): void =>
     setCollapsed((v) => {
       const next = !v;
-      localStorage.setItem(COLLAPSE_KEY, next ? "1" : "0");
+      safeStorage.set(COLLAPSE_KEY, next ? "1" : "0");
       return next;
     });
 
@@ -158,6 +228,10 @@ export function AppShell({ children }: { children: React.ReactNode }): JSX.Eleme
     <div className="flex flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden p-3">
       <NavLink item={DASHBOARD} mini={mini} />
 
+      {projectItems.map((item) => (
+        <NavLink key={item.href} item={item} mini={mini} />
+      ))}
+
       {adminChildren.length > 0 &&
         (mini ? (
           <>
@@ -246,7 +320,7 @@ export function AppShell({ children }: { children: React.ReactNode }): JSX.Eleme
               />
               <div className="hidden text-left sm:block">
                 <p className="text-sm font-semibold leading-tight">
-                  {user?.name}
+                  {fullName(user)}
                 </p>
                 <p className="text-xs text-muted-foreground">
                   {user?.roles?.[0] ?? ""}
@@ -256,7 +330,7 @@ export function AppShell({ children }: { children: React.ReactNode }): JSX.Eleme
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-48">
-            <DropdownMenuLabel>{user?.name}</DropdownMenuLabel>
+            <DropdownMenuLabel>{fullName(user)}</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem onClick={() => router.push("/perfil")}>
               <User className="h-4 w-4" />

package/src/components/brand-header.tsx

@@ -7,6 +7,12 @@ import { useBrand } from "#core/contexts";
 export interface BrandHeaderProps {
   /** Título do passo ou da tela, exibido sob a marca. */
   title: string;
+  /**
+   * Mostra logo e nome acima do título. Desligue quando a marca já estiver na
+   * tela por outro caminho — é o caso do `BrandPanel` ao lado do formulário,
+   * onde repeti-la no cartão seria dizer a mesma coisa duas vezes.
+   */
+  showBrand?: boolean;
 }
 
 /**
@@ -17,19 +23,28 @@ export interface BrandHeaderProps {
  * ela está. O conteúdo vem do `BrandProvider` do projeto; sem ele, do padrão do
  * core.
  */
-export function BrandHeader({ title }: BrandHeaderProps): JSX.Element {
+export function BrandHeader({
+  title,
+  showBrand = true,
+}: BrandHeaderProps): JSX.Element {
   const brand = useBrand();
 
   return (
     <div className="mb-6 flex flex-col items-center gap-1">
-      <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-        {brand.logo}
-      </div>
-      <span className="text-lg font-extrabold">{brand.name}</span>
-      {brand.tagline && (
-        <p className="text-sm text-muted-foreground">{brand.tagline}</p>
+      {showBrand && (
+        <>
+          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+            {brand.logo}
+          </div>
+          <span className="text-lg font-extrabold">{brand.name}</span>
+          {brand.tagline && (
+            <p className="text-sm text-muted-foreground">{brand.tagline}</p>
+          )}
+        </>
       )}
-      <h1 className="mt-2 text-xl font-semibold">{title}</h1>
+      <h1 className={showBrand ? "mt-2 text-xl font-semibold" : "text-xl font-semibold"}>
+        {title}
+      </h1>
     </div>
   );
 }

package/src/components/brand-panel.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { useBrand } from "#core/contexts";
+import { cn } from "#core/lib/utils";
+
+export interface BrandPanelProps {
+  className?: string;
+}
+
+/**
+ * A marca ocupando metade da tela de login, ao lado do formulário.
+ *
+ * É o irmão grande do `BrandHeader`: mesma fonte (o `BrandProvider` do
+ * projeto), espaço diferente. Serve a quem tem logo grande — no cabeçalho do
+ * cartão ela sairia espremida.
+ *
+ * O core não dimensiona a logo: ela é um `ReactNode` do projeto, que sabe se é
+ * um SVG, um `next/image` ou um ícone. Aqui ela só ganha o espaço.
+ */
+export function BrandPanel({ className }: BrandPanelProps): JSX.Element {
+  const brand = useBrand();
+
+  return (
+    <div
+      className={cn(
+        "flex flex-1 flex-col items-center justify-center gap-4 bg-muted/30 p-8 text-center",
+        className,
+      )}
+    >
+      {brand.logo}
+      <span className="text-3xl font-extrabold">{brand.name}</span>
+      {brand.tagline && (
+        <p className="max-w-sm text-sm text-muted-foreground">
+          {brand.tagline}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -1,6 +1,7 @@
 // Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
 export * from "./app-shell";
 export * from "./brand-header";
+export * from "./brand-panel";
 export * from "./breadcrumbs";
 export * from "./language-selector";
 export * from "./password-field";

package/src/components/password-field.tsx

@@ -3,37 +3,64 @@
 import { Eye, EyeOff } from "lucide-react";
 import { forwardRef, InputHTMLAttributes, useState } from "react";
 
-import { Input } from "#core/components/ui";
+import { Input, PasswordRequirements } from "#core/components/ui";
 import { cn } from "#core/lib/utils";
 
 interface PasswordFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   error?: boolean;
+  /**
+   * Valor atual do campo. Presente, o campo mostra as exigências de senha
+   * logo abaixo — **só enquanto está em foco**.
+   *
+   * A lista some ao sair do campo de propósito: são cinco linhas, e em tela
+   * com dois campos de senha elas dobrariam de tamanho e empurrariam o botão
+   * para fora da vista. Enquanto se digita é quando a lista serve; depois,
+   * quem avisa que algo está errado é a mensagem de validação.
+   *
+   * A visibilidade é `focus-within` no CSS, e não estado: o olho de
+   * mostrar/ocultar vive dentro do campo, e clicar nele tiraria o foco do
+   * input — com estado, a lista piscaria a cada clique.
+   */
+  rulesFor?: string;
 }
 
 export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
-  function PasswordField({ className, error, ...props }, ref) {
+  function PasswordField({ className, error, rulesFor, ...props }, ref) {
     const [show, setShow] = useState(false);
     return (
-      <div className="relative">
-        <Input
-          ref={ref}
-          type={show ? "text" : "password"}
-          className={cn(
-            "pr-10",
-            error && "border-destructive focus-visible:ring-destructive",
-            className,
-          )}
-          {...props}
-        />
-        <button
-          type="button"
-          tabIndex={-1}
-          onClick={() => setShow((s) => !s)}
-          className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
-          aria-label={show ? "ocultar senha" : "mostrar senha"}
-        >
-          {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-        </button>
+      <div className="group">
+        <div className="relative">
+          <Input
+            ref={ref}
+            type={show ? "text" : "password"}
+            className={cn(
+              "pr-10",
+              error && "border-destructive focus-visible:ring-destructive",
+              className,
+            )}
+            {...props}
+          />
+          <button
+            type="button"
+            tabIndex={-1}
+            onClick={() => setShow((s) => !s)}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
+            aria-label={show ? "ocultar senha" : "mostrar senha"}
+          >
+            {show ? (
+              <EyeOff className="h-4 w-4" />
+            ) : (
+              <Eye className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+
+        {rulesFor !== undefined && (
+          <PasswordRequirements
+            value={rulesFor}
+            className="mt-2 hidden group-focus-within:flex"
+          />
+        )}
       </div>
     );
   },

package/src/components/ui/alert.tsx

@@ -7,8 +7,8 @@ const alertVariants = cva("rounded-md border px-3 py-2 text-sm", {
   variants: {
     variant: {
       info: "border-primary/30 bg-primary/10 text-primary",
-      success: "border-success/30 bg-success/10 text-success",
-      warning: "border-warning/30 bg-warning/10 text-warning",
+      success: "border-success/30 bg-success/10 text-success-strong",
+      warning: "border-warning/30 bg-warning/10 text-warning-strong",
       error: "border-destructive/30 bg-destructive/10 text-destructive",
     },
   },
@@ -18,10 +18,39 @@ const alertVariants = cva("rounded-md border px-3 py-2 text-sm", {
 export interface AlertProps
   extends
     React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof alertVariants> {}
+    VariantProps<typeof alertVariants> {
+  /**
+   * Ícone à esquerda, alinhado à primeira linha do texto.
+   *
+   * Existe porque telas passaram a remontar o aviso à mão só para ter um ícone
+   * — e a cópia não acompanhou a correção de contraste das cores. Sem ícone, o
+   * componente renderiza exatamente como antes.
+   */
+  icon?: React.ReactNode;
+}
 
-export function Alert({ variant, className, ...props }: AlertProps): React.JSX.Element {
+export function Alert({
+  variant,
+  className,
+  icon,
+  children,
+  ...props
+}: AlertProps): React.JSX.Element {
   return (
-    <div className={cn(alertVariants({ variant }), className)} {...props} />
+    <div
+      className={cn(
+        alertVariants({ variant }),
+        icon && "flex items-start gap-2",
+        className,
+      )}
+      {...props}
+    >
+      {icon && (
+        <span className="mt-0.5 shrink-0 [&>svg]:h-4 [&>svg]:w-4" aria-hidden>
+          {icon}
+        </span>
+      )}
+      {icon ? <span>{children}</span> : children}
+    </div>
   );
 }

package/src/components/ui/badge.tsx

@@ -11,8 +11,8 @@ const badgeVariants = cva(
         default: "border-transparent bg-primary/10 text-primary",
         secondary: "border-transparent bg-secondary text-secondary-foreground",
         destructive: "border-transparent bg-destructive/10 text-destructive",
-        success: "border-transparent bg-success/15 text-success",
-        warning: "border-transparent bg-warning/15 text-warning",
+        success: "border-transparent bg-success/15 text-success-strong",
+        warning: "border-transparent bg-warning/15 text-warning-strong",
         outline: "text-foreground",
       },
     },

package/src/components/ui/button.tsx

@@ -52,6 +52,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        // `<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}
       />
     );

package/src/components/ui/confirm-dialog.tsx

@@ -43,7 +43,9 @@ export function ConfirmDialog({
 }: ConfirmDialogProps): React.JSX.Element {
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onCancel()}>
-      <DialogContent className="max-w-sm">
+      {/* Sem ampliar: são duas linhas e dois botões, e o tamanho pequeno é
+          parte do recado — esticado só ganharia vazio. */}
+      <DialogContent className="max-w-sm" expandable={false}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}

package/src/components/ui/data-table.tsx

@@ -39,7 +39,6 @@ import {
   ColumnVisibilityModal,
   ColumnVisibilityOption,
 } from "#core/components/ui/column-visibility-modal";
-import { FilterChips } from "#core/components/ui/filter-chips";
 import { FilterSheet } from "#core/components/ui/filter-sheet";
 import { Spinner } from "#core/components/ui/spinner";
 import {
@@ -94,6 +93,16 @@ interface DataTableProps<T extends RowData> {
    * não aparece — listagem sem catálogo continua funcionando igual.
    */
   filters?: FiltersState;
+  /**
+   * Campos que a `toolbar` já controla: somem do painel de filtros e não são
+   * contados no botão "Filtros", para a mesma escolha não existir em dois
+   * lugares.
+   *
+   * Some da interface, não do catálogo — é o catálogo que serializa o filtro,
+   * então o atalho da barra continua funcionando normalmente. O painel também
+   * não os desmarca ao aplicar nem ao limpar: não são dele.
+   */
+  hiddenFilterFields?: string[];
 }
 
 /** Extras que uma coluna pode declarar em `meta`. */
@@ -144,6 +153,7 @@ export function DataTable<T extends RowData>({
   onSortingChange,
   enableSorting = true,
   filters,
+  hiddenFilterFields,
 }: DataTableProps<T>): JSX.Element {
   const { t } = useI18n();
   const [colsOpen, setColsOpen] = useState(false);
@@ -220,7 +230,7 @@ export function DataTable<T extends RowData>({
       ? filters.tree && filters.filter
         ? countConditions(filters.tree)
         : 0
-      : activeFilterCount(filters.values);
+      : activeFilterCount(filters.values, hiddenFilterFields);
 
   return (
     <div>
@@ -257,8 +267,6 @@ export function DataTable<T extends RowData>({
         </div>
       </div>
 
-      {filters && <FilterChips filters={filters} />}
-
       <Card>
         <Table>
           <TableHeader>
@@ -394,6 +402,7 @@ export function DataTable<T extends RowData>({
           open={filtersOpen}
           onOpenChange={setFiltersOpen}
           filters={filters}
+          hiddenFields={hiddenFilterFields}
         />
       )}
     </div>

package/src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { Maximize2, Minimize2, X } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "#core/lib/utils";
@@ -26,28 +26,127 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+/**
+ * Escala de largura do Tailwind, em ordem. Ampliar anda dois degraus: `md` vira
+ * `xl`, `2xl` vira `4xl`. O modal cresce mantendo a proporção que já tinha, em
+ * vez de saltar para a tela inteira — um formulário de duas colunas esticado a
+ * 100% fica pior, não melhor. Um degrau só passava despercebido.
+ */
+const WIDTH_SCALE: readonly string[] = [
+  "max-w-3xs",
+  "max-w-2xs",
+  "max-w-xs",
+  "max-w-sm",
+  "max-w-md",
+  "max-w-lg",
+  "max-w-xl",
+  "max-w-2xl",
+  "max-w-3xl",
+  "max-w-4xl",
+  "max-w-5xl",
+  "max-w-6xl",
+  "max-w-7xl",
+];
+
+/** Largura de quem não declara nenhuma. */
+const DEFAULT_WIDTH = "max-w-lg";
+
+/** Quantos degraus o botão sobe de uma vez. */
+const EXPAND_STEPS = 2;
+
+/** Só para quem já está no topo da escala: daí não há degrau, resta a tela. */
+const FULL_WIDTH = "max-w-none";
+
+/**
+ * A largura do modal ampliado.
+ *
+ * Lê a **última** `max-w-*` do `className` porque é ela que o `tailwind-merge`
+ * deixa valer. Largura fora da escala (`max-w-[42rem]`) não tem degrau a subir:
+ * amplia para a tela toda.
+ */
+const expandedWidth = (className?: string): string => {
+  const declared = (className ?? "")
+    .split(/\s+/)
+    .filter((item) => item.startsWith("max-w-"));
+  const current = declared[declared.length - 1] ?? DEFAULT_WIDTH;
+  const index = WIDTH_SCALE.indexOf(current);
+  const last = WIDTH_SCALE.length - 1;
+
+  // Fora da escala não há degrau a subir, e chutar um da escala encolheria um
+  // `max-w-[90rem]`. Amplia para a tela, que é o que o botão promete.
+  if (index === -1 || index === last) {
+    return FULL_WIDTH;
+  }
+
+  // Perto do topo, dois degraus passariam do fim: para no último em vez de
+  // cair em tela cheia, que é justamente o salto que a escala evita.
+  return WIDTH_SCALE[Math.min(index + EXPAND_STEPS, last)];
+};
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /**
+   * Botão de ampliar ao lado do fechar.
+   *
+   * Ligado por padrão: ampliar um degrau não atrapalha modal nenhum. Desligue
+   * com `expandable={false}` onde o tamanho é parte do desenho — confirmação
+   * curta, por exemplo, que esticada só fica com mais vazio.
+   */
+  expandable?: boolean;
+}
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg rounded-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-h-[calc(100%-2rem)] overflow-y-auto",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  DialogContentProps
+>(({ className, children, expandable = true, ...props }, ref) => {
+  // Reinicia a cada montagem: o Radix desmonta o conteúdo ao fechar, então
+  // reabrir traz o modal no tamanho normal — modal pequeno que volta ampliado
+  // surpreende quem o abriu.
+  const [expanded, setExpanded] = React.useState(false);
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 overflow-y-auto",
+          "w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] rounded-xl",
+          DEFAULT_WIDTH,
+          className,
+          // Depois do `className`: é o que faz a largura ampliada vencer a que
+          // o chamador declarou, e só enquanto estiver ampliado.
+          expanded && expandedWidth(className),
+        )}
+        {...props}
+      >
+        {children}
+        <div className="absolute right-4 top-4 flex items-center gap-2">
+          {expandable && (
+            <button
+              type="button"
+              onClick={() => setExpanded((value) => !value)}
+              className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              {expanded ? (
+                <Minimize2 className="h-4 w-4" />
+              ) : (
+                <Maximize2 className="h-4 w-4" />
+              )}
+              <span className="sr-only">
+                {expanded ? "Restaurar" : "Ampliar"}
+              </span>
+            </button>
+          )}
+          <DialogPrimitive.Close className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Fechar</span>
+          </DialogPrimitive.Close>
+        </div>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 /**