@greatapps/greatauth-ui 0.3.11 → 0.3.13

package/dist/index.js

@@ -359,8 +359,7 @@ function Skeleton({ className, ...props }) {
 
 // src/components/ui/sidebar.tsx
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var SIDEBAR_COOKIE_NAME = "sidebar_state";
-var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_STORAGE_KEY = "sidebar_state";
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
@@ -384,7 +383,13 @@ function SidebarProvider({
 }) {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
-  const [_open, _setOpen] = React.useState(defaultOpen);
+  const [_open, _setOpen] = React.useState(() => {
+    if (typeof window === "undefined") return defaultOpen;
+    const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY);
+    if (stored === "true") return true;
+    if (stored === "false") return false;
+    return defaultOpen;
+  });
   const open = openProp ?? _open;
   const setOpen = React.useCallback(
     (value) => {
@@ -394,7 +399,10 @@ function SidebarProvider({
       } else {
         _setOpen(openState);
       }
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      try {
+        localStorage.setItem(SIDEBAR_STORAGE_KEY, String(openState));
+      } catch {
+      }
     },
     [setOpenProp, open]
   );
@@ -1005,7 +1013,7 @@ function AppSidebar({ config }) {
   const userImage = session?.user?.image || "";
   const initials = getUserInitials(userName, userEmail);
   return /* @__PURE__ */ jsxs5(Sidebar, { collapsible: "icon", children: [
-    /* @__PURE__ */ jsx12(SidebarHeader, { children: /* @__PURE__ */ jsx12(SidebarMenu, { children: /* @__PURE__ */ jsx12(SidebarMenuItem, { children: /* @__PURE__ */ jsx12(SidebarMenuButton, { size: "lg", asChild: true, children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx12(SidebarHeader, { children: /* @__PURE__ */ jsx12(SidebarMenu, { children: /* @__PURE__ */ jsx12(SidebarMenuItem, { children: /* @__PURE__ */ jsx12(SidebarMenuButton, { size: "lg", asChild: true, children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0", children: [
       /* @__PURE__ */ jsx12("div", { className: "shrink-0", children: config.appIcon }),
       /* @__PURE__ */ jsx12("span", { className: "font-semibold truncate group-data-[collapsible=icon]:hidden", children: config.appName }),
       config.appBadge && /* @__PURE__ */ jsx12(Badge, { variant: "destructive", className: "group-data-[collapsible=icon]:hidden", children: config.appBadge })
@@ -1054,8 +1062,9 @@ function AppSidebar({ config }) {
 }
 
 // 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";
@@ -1095,6 +1104,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",
@@ -1125,6 +1149,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";
@@ -1162,14 +1208,30 @@ import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function AppHeader({ config }) {
   const pathname = usePathname2();
   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" }),
     /* @__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, {})
   ] });
 }
@@ -1192,7 +1254,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";
@@ -1224,6 +1286,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;
@@ -1254,73 +1317,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(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__ */ 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
@@ -1883,7 +1983,7 @@ 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";
@@ -2572,7 +2672,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)
@@ -2589,7 +2689,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(
@@ -2627,7 +2727,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" }),