@greatapps/greatauth-ui 0.3.13 → 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,7 +1098,8 @@ function AppSidebar({ config }) {
           ]
         }
       )
-    ] }) }) }) })
+    ] }) }) }) }),
+    /* @__PURE__ */ jsx12(SidebarRail, {})
   ] });
 }
 
@@ -1204,9 +1246,10 @@ 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 = useMemo2(() => {
     const items = [];
@@ -1223,6 +1266,10 @@ function AppHeader({ config }) {
   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((crumb, i) => {
       const hiddenOnMobile = showEllipsis && i < breadcrumbs.length - 2;
@@ -1237,9 +1284,9 @@ function AppHeader({ config }) {
 }
 
 // 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 }),
@@ -1277,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();
@@ -1405,7 +1452,7 @@ function LoginForm({ config }) {
             type: "submit",
             className: cn("w-full", loading && "cursor-wait"),
             disabled: loading,
-            children: loading ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+            children: loading ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
               /* @__PURE__ */ jsx18(Loader2, { className: "h-4 w-4 animate-spin" }),
               "A entrar..."
             ] }) : "Entrar"
@@ -1990,7 +2037,7 @@ 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
@@ -2020,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" }) })
       ]
     }
   );
@@ -2090,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, {})
     }
   );
 }