@greatapps/greatauth-ui 0.3.15 → 0.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatauth-ui",
-  "version": "0.3.15",
+  "version": "0.3.17",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/app-sidebar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
 import { ChevronsUpDown, ChevronRight, LogOut } from "lucide-react";
@@ -76,9 +77,16 @@ function CollapsibleMenuItem({ item, pathname }: { item: MenuItem; pathname: str
   const isChildActive = item.children?.some((child) =>
     child.isActive !== undefined ? child.isActive : pathname.startsWith(child.href)
   ) ?? false;
+  const isActive = isParentActive || isChildActive;
+
+  const [open, setOpen] = useState(isActive);
+
+  useEffect(() => {
+    if (isActive) setOpen(true);
+  }, [isActive]);
 
   return (
-    <Collapsible defaultOpen={isParentActive || isChildActive} className="group/collapsible">
+    <Collapsible open={open} onOpenChange={setOpen} className="group/collapsible">
       <SidebarMenuItem>
         <SidebarMenuButton asChild isActive={isParentActive} tooltip={item.label}>
           <Link href={item.href} onClick={item.onClick}>
@@ -173,7 +181,7 @@ export function AppSidebar({ config }: AppSidebarProps) {
                     <span className="truncate font-semibold">{userName}</span>
                     <span className="truncate text-xs text-muted-foreground">{userEmail}</span>
                   </div>
-                  <ChevronsUpDown className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
+                  <ChevronsUpDown aria-hidden="true" className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
@@ -191,7 +199,7 @@ export function AppSidebar({ config }: AppSidebarProps) {
                 <DropdownMenuSeparator />
                 {config.footerExtra}
                 <DropdownMenuItem onClick={handleLogout}>
-                  <LogOut className="size-4" />
+                  <LogOut aria-hidden="true" className="size-4" />
                   Sair
                 </DropdownMenuItem>
               </DropdownMenuContent>

package/src/components/image-crop-upload.tsx

@@ -164,8 +164,9 @@ export function ImageCropUpload({
             type="button"
             onClick={() => inputRef.current?.click()}
             className="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+            aria-label="Alterar foto"
           >
-            <Camera className="h-5 w-5 text-white" />
+            <Camera aria-hidden="true" className="h-5 w-5 text-white" />
           </button>
         )}
       </div>
@@ -177,6 +178,7 @@ export function ImageCropUpload({
         onChange={handleFileSelect}
         className="hidden"
         disabled={disabled}
+        aria-label="Selecionar imagem"
       />
 
       {!disabled && value && (
@@ -187,7 +189,7 @@ export function ImageCropUpload({
           onClick={handleRemove}
           className="text-destructive hover:text-destructive"
         >
-          <Trash2 className="h-4 w-4 mr-1" />
+          <Trash2 aria-hidden="true" className="h-4 w-4 mr-1" />
           Remover
         </Button>
       )}
@@ -243,7 +245,7 @@ export function ImageCropUpload({
               onClick={handleConfirmCrop}
               disabled={isUploading || !croppedArea}
             >
-              {isUploading ? "Enviando..." : "Confirmar"}
+              {isUploading ? "Enviando\u2026" : "Confirmar"}
             </Button>
           </DialogFooter>
         </DialogContent>

package/src/components/login-form.tsx

@@ -125,7 +125,7 @@ export function LoginForm({ config }: LoginFormProps) {
             <form onSubmit={handleSubmit} className="space-y-4">
               {error && (
                 <div className="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5 text-sm text-destructive">
-                  <AlertCircle className="h-4 w-4 shrink-0" />
+                  <AlertCircle aria-hidden="true" className="h-4 w-4 shrink-0" />
                   {error}
                 </div>
               )}
@@ -135,9 +135,10 @@ export function LoginForm({ config }: LoginFormProps) {
                   Email
                 </Label>
                 <div className="relative">
-                  <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Mail aria-hidden="true" className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                   <Input
                     id="login-email"
+                    name="email"
                     type="email"
                     placeholder="email@exemplo.com"
                     value={email}
@@ -154,9 +155,10 @@ export function LoginForm({ config }: LoginFormProps) {
                   Senha
                 </Label>
                 <div className="relative">
-                  <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Lock aria-hidden="true" className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                   <Input
                     id="login-password"
+                    name="password"
                     type={showPassword ? "text" : "password"}
                     placeholder="••••••••"
                     value={password}
@@ -187,8 +189,8 @@ export function LoginForm({ config }: LoginFormProps) {
               >
                 {loading ? (
                   <>
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    A entrar...
+                    <Loader2 aria-hidden="true" className="h-4 w-4 animate-spin" />
+                    A entrar…
                   </>
                 ) : (
                   "Entrar"

package/src/components/theme-toggle.tsx

@@ -33,8 +33,8 @@ export function ThemeToggle() {
 
   return (
     <Button variant="ghost" size="icon" onClick={toggleTheme}>
-      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <Sun aria-hidden="true" className="h-5 w-5 rotate-0 scale-100 transition-transform transition-opacity dark:-rotate-90 dark:scale-0" />
+      <Moon aria-hidden="true" className="absolute h-5 w-5 rotate-90 scale-0 transition-transform transition-opacity dark:rotate-0 dark:scale-100" />
       <span className="sr-only">Alternar tema</span>
     </Button>
   );

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

@@ -83,13 +83,14 @@ export function DataTable<TData, TValue>({
                         type="button"
                         className="flex items-center gap-1 hover:text-foreground -ml-1 px-1 py-0.5 rounded cursor-pointer select-none"
                         onClick={header.column.getToggleSortingHandler()}
+                        aria-label="Ordenar"
                       >
                         {flexRender(header.column.columnDef.header, header.getContext())}
                         {{
-                          asc: <ArrowUp className="h-3.5 w-3.5" />,
-                          desc: <ArrowDown className="h-3.5 w-3.5" />,
+                          asc: <ArrowUp aria-hidden="true" className="h-3.5 w-3.5" />,
+                          desc: <ArrowDown aria-hidden="true" className="h-3.5 w-3.5" />,
                         }[header.column.getIsSorted() as string] ?? (
-                          <ArrowUpDown className="h-3.5 w-3.5 text-muted-foreground/50" />
+                          <ArrowUpDown aria-hidden="true" className="h-3.5 w-3.5 text-muted-foreground/50" />
                         )}
                       </button>
                     ) : (
@@ -152,7 +153,7 @@ export function DataTable<TData, TValue>({
 
       {showPagination && (
         <div className="flex items-center justify-between px-2">
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-muted-foreground tabular-nums">
             {total} registro{total !== 1 ? "s" : ""}
           </p>
           <div className="flex items-center gap-2">
@@ -162,10 +163,10 @@ export function DataTable<TData, TValue>({
               onClick={() => onPageChange(page - 1)}
               disabled={page <= 1}
             >
-              <ChevronLeft className="h-4 w-4" />
+              <ChevronLeft aria-hidden="true" className="h-4 w-4" />
               Anterior
             </Button>
-            <span className="text-sm text-muted-foreground">
+            <span className="text-sm text-muted-foreground tabular-nums">
               {page} de {totalPages}
             </span>
             <Button
@@ -175,7 +176,7 @@ export function DataTable<TData, TValue>({
               disabled={page >= totalPages}
             >
               Próximo
-              <ChevronRight className="h-4 w-4" />
+              <ChevronRight aria-hidden="true" className="h-4 w-4" />
             </Button>
           </div>
         </div>

package/src/components/users/user-form-dialog.tsx

@@ -119,27 +119,27 @@ export function UserFormDialog({
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="user-name">Nome *</Label>
-              <Input id="user-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nome" required disabled={isPending} />
+              <Input id="user-name" name="firstName" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nome" required disabled={isPending} />
             </div>
             <div className="space-y-2">
               <Label htmlFor="user-lastname">Sobrenome</Label>
-              <Input id="user-lastname" value={lastName} onChange={(e) => setLastName(e.target.value)} placeholder="Sobrenome" disabled={isPending} />
+              <Input id="user-lastname" name="lastName" value={lastName} onChange={(e) => setLastName(e.target.value)} placeholder="Sobrenome" disabled={isPending} />
             </div>
           </div>
           <div className="space-y-2">
             <Label htmlFor="user-email">E-mail *</Label>
-            <Input id="user-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email@exemplo.com" required disabled={isPending} />
+            <Input id="user-email" name="email" type="email" autoComplete="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email@exemplo.com" required disabled={isPending} />
           </div>
           {!isEditing && (
             <div className="space-y-2">
               <Label htmlFor="user-password">Senha</Label>
-              <Input id="user-password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Senha inicial (opcional)" disabled={isPending} />
+              <Input id="user-password" name="password" type="password" autoComplete="new-password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Senha inicial (opcional)" disabled={isPending} />
             </div>
           )}
           <div className="space-y-2">
-            <Label>Perfil de acesso</Label>
+            <Label htmlFor="user-profile">Perfil de acesso</Label>
             <Select value={profile} onValueChange={setProfile} disabled={isPending}>
-              <SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
+              <SelectTrigger id="user-profile" className="w-full"><SelectValue /></SelectTrigger>
               <SelectContent>
                 {PROFILE_OPTIONS.map((opt) => (
                   <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
@@ -155,7 +155,7 @@ export function UserFormDialog({
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>Cancelar</Button>
             <Button type="submit" disabled={isPending || !name.trim() || !email.trim()}>
-              {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {isPending && <Loader2 aria-hidden="true" className="mr-2 h-4 w-4 animate-spin" />}
               {isEditing ? "Salvar" : "Criar"}
             </Button>
           </DialogFooter>

package/src/components/users/users-page.tsx

@@ -73,7 +73,7 @@ function useColumns(
       accessorKey: "last_login",
       header: "Último acesso",
       cell: ({ row }) => (
-        <span className="text-muted-foreground text-sm">
+        <span className="text-muted-foreground text-sm tabular-nums">
           {row.original.last_login
             ? format(new Date(row.original.last_login), "dd/MM/yyyy HH:mm", { locale: ptBR })
             : "—"}
@@ -84,7 +84,7 @@ function useColumns(
       accessorKey: "datetime_add",
       header: "Criado em",
       cell: ({ row }) => (
-        <span className="text-muted-foreground text-sm">
+        <span className="text-muted-foreground text-sm tabular-nums">
           {format(new Date(row.original.datetime_add), "dd/MM/yyyy", { locale: ptBR })}
         </span>
       ),
@@ -97,7 +97,7 @@ function useColumns(
         <div className="flex items-center gap-1">
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => onResetPassword(row.original)}>
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => onResetPassword(row.original)} aria-label="Reenviar senha">
                 <Forward className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -105,7 +105,7 @@ function useColumns(
           </Tooltip>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => onEdit(row.original)}>
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => onEdit(row.original)} aria-label="Editar">
                 <Pencil className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -113,7 +113,7 @@ function useColumns(
           </Tooltip>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive" onClick={() => onDelete(row.original.id)}>
+              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive" onClick={() => onDelete(row.original.id)} aria-label="Excluir">
                 <Trash2 className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -195,19 +195,22 @@ export function UsersPage({ config, renderPhones }: UsersPageProps) {
           <p className="text-sm text-muted-foreground">Gestão de usuários da conta</p>
         </div>
         <Button onClick={() => { setEditUser(null); setFormOpen(true); }} size="sm">
-          <Plus className="mr-2 h-4 w-4" />
+          <Plus aria-hidden="true" className="mr-2 h-4 w-4" />
           Novo Usuário
         </Button>
       </div>
 
       <div className="flex items-center gap-3">
         <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Search aria-hidden="true" className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <Input
-            placeholder="Buscar por nome ou e-mail..."
+            placeholder="Buscar por nome ou e-mail\u2026"
             value={search}
             onChange={(e) => { setSearch(e.target.value); setPage(1); }}
             className="pl-9"
+            name="search"
+            autoComplete="off"
+            aria-label="Buscar por nome ou e-mail"
           />
         </div>
         <Select value={profileFilter} onValueChange={(v) => { setProfileFilter(v); setPage(1); }}>