@greatapps/greatauth-ui 0.3.12 → 0.3.14

package/dist/index.d.ts

@@ -38,6 +38,8 @@ interface MenuItem {
     href: string;
     children?: MenuItem[];
     onClick?: () => void;
+    isActive?: boolean;
+    badge?: string | number;
 }
 interface HeaderConfig {
     defaultBreadcrumb?: string;

package/dist/index.js

@@ -362,7 +362,7 @@ import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var SIDEBAR_STORAGE_KEY = "sidebar_state";
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
-var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_WIDTH_ICON = "3.5rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
 var SidebarContext = React.createContext(null);
 function useSidebar() {
@@ -572,6 +572,30 @@ function SidebarTrigger({
     }
   );
 }
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Toggle Sidebar",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle Sidebar",
+      className: cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function SidebarInset({ className, ...props }) {
   return /* @__PURE__ */ jsx7(
     "main",
@@ -757,7 +781,7 @@ function SidebarMenuButton({
 // src/components/app-sidebar.tsx
 import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
-import { ChevronUp, ChevronRight as ChevronRight2, LogOut } from "lucide-react";
+import { ChevronsUpDown, ChevronRight as ChevronRight2, LogOut } from "lucide-react";
 
 // src/components/ui/collapsible.tsx
 import { Collapsible as CollapsiblePrimitive } from "radix-ui";
@@ -779,12 +803,17 @@ function CollapsibleTrigger({
   );
 }
 function CollapsibleContent({
+  className,
   ...props
 }) {
   return /* @__PURE__ */ jsx8(
     CollapsiblePrimitive.CollapsibleContent,
     {
       "data-slot": "collapsible-content",
+      className: cn(
+        "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+        className
+      ),
       ...props
     }
   );
@@ -981,23 +1010,35 @@ function getUserInitials(name, email) {
   return parts[0][0].toUpperCase();
 }
 function SimpleMenuItem({ item, pathname }) {
-  const isActive = pathname.startsWith(item.href);
+  const isActive = item.isActive ?? pathname.startsWith(item.href);
   const Icon = item.icon;
-  return /* @__PURE__ */ jsx12(SidebarMenuItem, { children: /* @__PURE__ */ jsx12(SidebarMenuButton, { asChild: true, isActive, tooltip: item.label, children: /* @__PURE__ */ jsxs5(Link, { href: item.href, onClick: item.onClick, children: [
+  return /* @__PURE__ */ jsx12(SidebarMenuItem, { children: /* @__PURE__ */ jsx12(SidebarMenuButton, { asChild: true, isActive, tooltip: item.label, children: /* @__PURE__ */ jsxs5(Link, { href: item.href, onClick: item.onClick, "aria-current": isActive ? "page" : void 0, children: [
     /* @__PURE__ */ jsx12(Icon, { className: "size-4" }),
-    /* @__PURE__ */ jsx12("span", { children: item.label })
+    /* @__PURE__ */ jsx12("span", { children: item.label }),
+    item.badge != null && /* @__PURE__ */ jsx12("span", { className: "ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1.5 text-[10px] font-semibold text-primary tabular-nums", children: item.badge })
   ] }) }) });
 }
 function CollapsibleMenuItem({ item, pathname }) {
   const Icon = item.icon;
-  const isChildActive = item.children?.some((child) => pathname.startsWith(child.href)) ?? false;
-  return /* @__PURE__ */ jsx12(Collapsible, { defaultOpen: isChildActive, className: "group/collapsible", children: /* @__PURE__ */ jsxs5(SidebarMenuItem, { children: [
-    /* @__PURE__ */ jsx12(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(SidebarMenuButton, { tooltip: item.label, children: [
+  const isParentActive = pathname.startsWith(item.href);
+  const isChildActive = item.children?.some(
+    (child) => child.isActive !== void 0 ? child.isActive : pathname.startsWith(child.href)
+  ) ?? false;
+  return /* @__PURE__ */ jsx12(Collapsible, { defaultOpen: isParentActive || isChildActive, className: "group/collapsible", children: /* @__PURE__ */ jsxs5(SidebarMenuItem, { children: [
+    /* @__PURE__ */ jsx12(SidebarMenuButton, { asChild: true, isActive: isParentActive, tooltip: item.label, children: /* @__PURE__ */ jsxs5(Link, { href: item.href, onClick: item.onClick, children: [
       /* @__PURE__ */ jsx12(Icon, { className: "size-4" }),
-      /* @__PURE__ */ jsx12("span", { children: item.label }),
-      /* @__PURE__ */ jsx12(ChevronRight2, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+      /* @__PURE__ */ jsx12("span", { children: item.label })
     ] }) }),
-    /* @__PURE__ */ jsx12(CollapsibleContent, { children: /* @__PURE__ */ jsx12(SidebarMenu, { className: "ml-4 border-l pl-2", children: item.children?.map((child) => /* @__PURE__ */ jsx12(SimpleMenuItem, { item: child, pathname }, child.href)) }) })
+    /* @__PURE__ */ jsx12(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx12(
+      "button",
+      {
+        "data-sidebar": "menu-action",
+        className: "absolute right-1 top-1.5 flex h-5 w-5 items-center justify-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden focus-visible:ring-2 ring-sidebar-ring transition-colors group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden",
+        "aria-label": "Expandir submenu",
+        children: /* @__PURE__ */ jsx12(ChevronRight2, { className: "size-3.5 shrink-0 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx12(CollapsibleContent, { children: /* @__PURE__ */ jsx12(SidebarMenu, { className: "ml-4 border-l pl-2", children: item.children?.map((child) => /* @__PURE__ */ jsx12(SimpleMenuItem, { item: child, pathname }, child.href + child.label)) }) })
   ] }) });
 }
 function AppSidebar({ config }) {
@@ -1034,7 +1075,7 @@ function AppSidebar({ config }) {
           /* @__PURE__ */ jsx12("span", { className: "truncate font-semibold", children: userName }),
           /* @__PURE__ */ jsx12("span", { className: "truncate text-xs text-muted-foreground", children: userEmail })
         ] }),
-        /* @__PURE__ */ jsx12(ChevronUp, { className: "ml-auto size-4 group-data-[collapsible=icon]:hidden" })
+        /* @__PURE__ */ jsx12(ChevronsUpDown, { className: "ml-auto size-4 group-data-[collapsible=icon]:hidden" })
       ] }) }),
       /* @__PURE__ */ jsxs5(
         DropdownMenuContent,
@@ -1057,13 +1098,15 @@ function AppSidebar({ config }) {
           ]
         }
       )
-    ] }) }) }) })
+    ] }) }) }) }),
+    /* @__PURE__ */ jsx12(SidebarRail, {})
   ] });
 }
 
 // src/components/app-header.tsx
-import { Fragment } from "react";
+import { Fragment, useMemo as useMemo2 } from "react";
 import { usePathname as usePathname2 } from "next/navigation";
+import Link2 from "next/link";
 
 // src/components/ui/breadcrumb.tsx
 import { Slot as Slot4 } from "radix-ui";
@@ -1103,6 +1146,21 @@ function BreadcrumbItem({ className, ...props }) {
     }
   );
 }
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot4.Root : "a";
+  return /* @__PURE__ */ jsx13(
+    Comp,
+    {
+      "data-slot": "breadcrumb-link",
+      className: cn("hover:text-foreground transition-colors", className),
+      ...props
+    }
+  );
+}
 function BreadcrumbPage({ className, ...props }) {
   return /* @__PURE__ */ jsx13(
     "span",
@@ -1133,6 +1191,28 @@ function BreadcrumbSeparator({
     }
   );
 }
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn(
+        "size-5 [&>svg]:size-4 flex items-center justify-center",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx13(MoreHorizontal, {}),
+        /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
 
 // src/components/theme-toggle.tsx
 import { useTheme } from "next-themes";
@@ -1166,26 +1246,47 @@ function ThemeToggle() {
 }
 
 // src/components/app-header.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function AppHeader({ config }) {
   const pathname = usePathname2();
+  const { state } = useSidebar();
   const segments = pathname.split("/").filter(Boolean);
-  const breadcrumbs = segments.map((seg) => config.routeLabels[seg]).filter(Boolean);
+  const breadcrumbs = useMemo2(() => {
+    const items = [];
+    for (let i = 0; i < segments.length; i++) {
+      const label = config.routeLabels[segments[i]];
+      if (label) {
+        const href = "/" + segments.slice(0, i + 1).join("/");
+        items.push({ label, href });
+      }
+    }
+    return items;
+  }, [segments, config.routeLabels]);
+  const isLast = (i) => i === breadcrumbs.length - 1;
+  const showEllipsis = breadcrumbs.length > 2;
   return /* @__PURE__ */ jsxs8("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b px-4", children: [
     /* @__PURE__ */ jsx15(SidebarTrigger, { className: "-ml-1" }),
+    state === "collapsed" && config.appIcon && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      /* @__PURE__ */ jsx15(Separator, { orientation: "vertical", className: "!h-4" }),
+      /* @__PURE__ */ jsx15("div", { className: "shrink-0 text-sidebar-foreground", children: config.appIcon })
+    ] }),
     /* @__PURE__ */ jsx15(Separator, { orientation: "vertical", className: "mr-2 !h-4" }),
-    /* @__PURE__ */ jsx15(Breadcrumb, { className: "flex-1", children: /* @__PURE__ */ jsx15(BreadcrumbList, { children: breadcrumbs.length > 0 ? breadcrumbs.map((label, i) => /* @__PURE__ */ jsxs8(Fragment, { children: [
-      i > 0 && /* @__PURE__ */ jsx15(BreadcrumbSeparator, {}),
-      /* @__PURE__ */ jsx15(BreadcrumbItem, { children: /* @__PURE__ */ jsx15(BreadcrumbPage, { children: label }) })
-    ] }, i)) : config.defaultBreadcrumb ? /* @__PURE__ */ jsx15(BreadcrumbItem, { children: /* @__PURE__ */ jsx15(BreadcrumbPage, { children: config.defaultBreadcrumb }) }) : null }) }),
+    /* @__PURE__ */ jsx15(Breadcrumb, { className: "flex-1", children: /* @__PURE__ */ jsx15(BreadcrumbList, { children: breadcrumbs.length > 0 ? breadcrumbs.map((crumb, i) => {
+      const hiddenOnMobile = showEllipsis && i < breadcrumbs.length - 2;
+      return /* @__PURE__ */ jsxs8(Fragment, { children: [
+        showEllipsis && i === breadcrumbs.length - 2 && /* @__PURE__ */ jsx15(BreadcrumbItem, { className: "sm:hidden", children: /* @__PURE__ */ jsx15(BreadcrumbEllipsis, {}) }),
+        i > 0 && /* @__PURE__ */ jsx15(BreadcrumbSeparator, { className: hiddenOnMobile ? "hidden sm:flex" : void 0 }),
+        /* @__PURE__ */ jsx15(BreadcrumbItem, { className: hiddenOnMobile ? "hidden sm:flex" : void 0, children: isLast(i) ? /* @__PURE__ */ jsx15(BreadcrumbPage, { children: crumb.label }) : /* @__PURE__ */ jsx15(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx15(Link2, { href: crumb.href, children: crumb.label }) }) })
+      ] }, i);
+    }) : config.defaultBreadcrumb ? /* @__PURE__ */ jsx15(BreadcrumbItem, { children: /* @__PURE__ */ jsx15(BreadcrumbPage, { children: config.defaultBreadcrumb }) }) : null }) }),
     /* @__PURE__ */ jsx15(ThemeToggle, {})
   ] });
 }
 
 // src/components/app-shell.tsx
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function AppShell({ config, children, renderAbove }) {
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
     renderAbove,
     /* @__PURE__ */ jsx16(TooltipProvider, { children: /* @__PURE__ */ jsxs9(SidebarProvider, { className: "!h-svh !overflow-hidden", children: [
       /* @__PURE__ */ jsx16(AppSidebar, { config }),
@@ -1200,7 +1301,7 @@ function AppShell({ config, children, renderAbove }) {
 // src/components/login-form.tsx
 import { useState as useState3 } from "react";
 import { useRouter as useRouter2, useSearchParams } from "next/navigation";
-import { Loader2, Mail, Lock, AlertCircle } from "lucide-react";
+import { Loader2, Mail, Lock, AlertCircle, Eye, EyeOff } from "lucide-react";
 
 // src/components/ui/label.tsx
 import { Label as LabelPrimitive } from "radix-ui";
@@ -1223,7 +1324,7 @@ function Label({
 }
 
 // src/components/login-form.tsx
-import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function LoginForm({ config }) {
   const router = useRouter2();
   const searchParams = useSearchParams();
@@ -1232,6 +1333,7 @@ function LoginForm({ config }) {
   const [password, setPassword] = useState3("");
   const [loading, setLoading] = useState3(false);
   const [error, setError] = useState3("");
+  const [showPassword, setShowPassword] = useState3(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (loading) return;
@@ -1262,73 +1364,110 @@ function LoginForm({ config }) {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx18("div", { className: "flex min-h-svh items-center justify-center bg-muted/30 p-4", children: /* @__PURE__ */ jsxs10("div", { className: "w-full max-w-[400px]", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "mb-8 text-center", children: [
-      /* @__PURE__ */ jsx18("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm", children: config.icon }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-center gap-2", children: [
-        /* @__PURE__ */ jsx18("h1", { className: "text-2xl font-semibold tracking-tight", children: config.appName }),
-        config.appBadge && /* @__PURE__ */ jsx18(Badge, { variant: config.appBadge.variant, className: "text-xs", children: config.appBadge.text })
-      ] }),
-      /* @__PURE__ */ jsx18("p", { className: "mt-1.5 text-sm text-muted-foreground", children: config.description })
-    ] }),
-    /* @__PURE__ */ jsx18("div", { className: "rounded-xl border bg-card p-6 shadow-sm", children: /* @__PURE__ */ jsxs10("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-      error && /* @__PURE__ */ jsxs10("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", children: [
-        /* @__PURE__ */ jsx18(AlertCircle, { className: "h-4 w-4 shrink-0" }),
-        error
-      ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx18(Label, { htmlFor: "login-email", className: "text-sm font-medium", children: "Email" }),
-        /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx18(Mail, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-          /* @__PURE__ */ jsx18(
-            Input,
-            {
-              id: "login-email",
-              type: "email",
-              placeholder: "email@exemplo.com",
-              value: email,
-              onChange: (e) => setEmail(e.target.value),
-              className: "pl-9",
-              autoComplete: "email",
-              required: true
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx18(Label, { htmlFor: "login-password", className: "text-sm font-medium", children: "Senha" }),
-        /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx18(Lock, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-          /* @__PURE__ */ jsx18(
-            Input,
-            {
-              id: "login-password",
-              type: "password",
-              placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-              value: password,
-              onChange: (e) => setPassword(e.target.value),
-              className: "pl-9",
-              autoComplete: "current-password",
-              required: true
-            }
-          )
-        ] })
+  return /* @__PURE__ */ jsxs10("div", { className: "relative flex min-h-svh", children: [
+    /* @__PURE__ */ jsx18("div", { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsx18(ThemeToggle, {}) }),
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: "relative hidden items-center justify-center overflow-hidden bg-primary md:flex md:w-1/2",
+        style: {
+          backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px)",
+          backgroundSize: "24px 24px"
+        },
+        children: [
+          /* @__PURE__ */ jsx18("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/80 via-primary to-primary/90" }),
+          /* @__PURE__ */ jsxs10("div", { className: "relative z-10 flex flex-col items-center gap-4 px-8 text-center text-primary-foreground", children: [
+            /* @__PURE__ */ jsx18("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl bg-primary-foreground/15 shadow-lg backdrop-blur-sm", children: config.icon }),
+            /* @__PURE__ */ jsx18("h2", { className: "text-3xl font-bold tracking-tight", children: config.appName }),
+            /* @__PURE__ */ jsx18("p", { className: "max-w-xs text-base text-primary-foreground/80", children: config.description })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx18("div", { className: "flex w-full items-center justify-center bg-background p-4 md:w-1/2", children: /* @__PURE__ */ jsxs10("div", { className: "w-full max-w-sm", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "mb-8 text-center", children: [
+        /* @__PURE__ */ jsx18("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm md:hidden", children: config.icon }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx18("h1", { className: "text-3xl font-bold tracking-tight", children: config.appName }),
+          config.appBadge && /* @__PURE__ */ jsx18(Badge, { variant: config.appBadge.variant, className: "text-xs", children: config.appBadge.text })
+        ] }),
+        /* @__PURE__ */ jsx18("p", { className: "mt-1.5 text-base text-muted-foreground", children: config.description })
       ] }),
-      /* @__PURE__ */ jsx18(
-        Button,
-        {
-          type: "submit",
-          className: cn("w-full", loading && "cursor-wait"),
-          disabled: loading,
-          children: loading ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
-            /* @__PURE__ */ jsx18(Loader2, { className: "h-4 w-4 animate-spin" }),
-            "A entrar..."
-          ] }) : "Entrar"
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx18("p", { className: "mt-6 text-center text-xs text-muted-foreground", children: config.footerText || "Acesso restrito a utilizadores autorizados" })
-  ] }) });
+      /* @__PURE__ */ jsx18("div", { className: "rounded-xl border bg-card p-6 shadow-sm", children: /* @__PURE__ */ jsxs10("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+        error && /* @__PURE__ */ jsxs10("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", children: [
+          /* @__PURE__ */ jsx18(AlertCircle, { className: "h-4 w-4 shrink-0" }),
+          error
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx18(Label, { htmlFor: "login-email", className: "text-sm font-medium", children: "Email" }),
+          /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx18(Mail, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsx18(
+              Input,
+              {
+                id: "login-email",
+                type: "email",
+                placeholder: "email@exemplo.com",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                className: "pl-9",
+                autoComplete: "email",
+                required: true
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx18(Label, { htmlFor: "login-password", className: "text-sm font-medium", children: "Senha" }),
+          /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx18(Lock, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsx18(
+              Input,
+              {
+                id: "login-password",
+                type: showPassword ? "text" : "password",
+                placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                value: password,
+                onChange: (e) => setPassword(e.target.value),
+                className: "pl-9 pr-10",
+                autoComplete: "current-password",
+                required: true
+              }
+            ),
+            /* @__PURE__ */ jsx18(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowPassword(!showPassword),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+                "aria-label": showPassword ? "Ocultar senha" : "Mostrar senha",
+                children: showPassword ? /* @__PURE__ */ jsx18(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx18(Eye, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx18(
+          Button,
+          {
+            type: "submit",
+            className: cn("w-full", loading && "cursor-wait"),
+            disabled: loading,
+            children: loading ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+              /* @__PURE__ */ jsx18(Loader2, { className: "h-4 w-4 animate-spin" }),
+              "A entrar..."
+            ] }) : "Entrar"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx18("p", { className: "mt-6 text-center text-xs text-muted-foreground", children: config.footerText || "Acesso restrito a utilizadores autorizados" }),
+      /* @__PURE__ */ jsxs10("p", { className: "mt-1 text-center text-xs text-muted-foreground", children: [
+        "\xA9 ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " ",
+        config.appName
+      ] })
+    ] }) })
+  ] });
 }
 
 // src/components/entity-avatar.tsx
@@ -1891,14 +2030,14 @@ function useResetPassword(config) {
 }
 
 // src/components/users/users-page.tsx
-import { useMemo as useMemo3, useState as useState7 } from "react";
+import { useMemo as useMemo4, useState as useState7 } from "react";
 
 // src/components/users/user-form-dialog.tsx
 import { useEffect as useEffect3, useState as useState5 } from "react";
 
 // src/components/ui/select.tsx
 import { Select as SelectPrimitive } from "radix-ui";
-import { ChevronsUpDown, Check as Check2, ChevronUp as ChevronUp2, ChevronDown } from "lucide-react";
+import { ChevronsUpDown as ChevronsUpDown2, Check as Check2, ChevronUp, ChevronDown } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function Select({
   ...props
@@ -1928,7 +2067,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx23(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx23(ChevronsUpDown, { className: "text-muted-foreground size-4 pointer-events-none" }) })
+        /* @__PURE__ */ jsx23(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx23(ChevronsUpDown2, { className: "text-muted-foreground size-4 pointer-events-none" }) })
       ]
     }
   );
@@ -1998,7 +2137,7 @@ function SelectScrollUpButton({
       "data-slot": "select-scroll-up-button",
       className: cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className),
       ...props,
-      children: /* @__PURE__ */ jsx23(ChevronUp2, {})
+      children: /* @__PURE__ */ jsx23(ChevronUp, {})
     }
   );
 }
@@ -2580,7 +2719,7 @@ function UsersPage({ config, renderPhones }) {
   const [search, setSearch] = useState7("");
   const [profileFilter, setProfileFilter] = useState7("all");
   const [page, setPage] = useState7(1);
-  const queryParams = useMemo3(() => {
+  const queryParams = useMemo4(() => {
     const params = {
       limit: String(PAGE_SIZE),
       page: String(page)
@@ -2597,7 +2736,7 @@ function UsersPage({ config, renderPhones }) {
   const [resetUser, setResetUser] = useState7(null);
   const users = data?.data || [];
   const total = data?.total || 0;
-  const filtered = useMemo3(() => {
+  const filtered = useMemo4(() => {
     if (!search) return users;
     const term = search.toLowerCase();
     return users.filter(
@@ -2635,7 +2774,7 @@ function UsersPage({ config, renderPhones }) {
       }
     });
   }
-  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 p-4", children: [
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 p-4 md:p-6", children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs19("div", { children: [
         /* @__PURE__ */ jsx29("h1", { className: "text-xl font-semibold", children: "Usu\xE1rios" }),