@greatapps/greatauth-ui 0.3.13 → 0.3.14

package/package.json

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

package/src/components/app-header.tsx

@@ -4,7 +4,7 @@ import { Fragment, useMemo } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import type { AppShellConfig } from "../types";
-import { SidebarTrigger } from "./ui/sidebar";
+import { SidebarTrigger, useSidebar } from "./ui/sidebar";
 import { Separator } from "./ui/separator";
 import {
   Breadcrumb,
@@ -23,6 +23,7 @@ interface AppHeaderProps {
 
 export function AppHeader({ config }: AppHeaderProps) {
   const pathname = usePathname();
+  const { state } = useSidebar();
   const segments = pathname.split("/").filter(Boolean);
 
   const breadcrumbs = useMemo(() => {
@@ -43,6 +44,12 @@ export function AppHeader({ config }: AppHeaderProps) {
   return (
     <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
       <SidebarTrigger className="-ml-1" />
+      {state === "collapsed" && config.appIcon && (
+        <>
+          <Separator orientation="vertical" className="!h-4" />
+          <div className="shrink-0 text-sidebar-foreground">{config.appIcon}</div>
+        </>
+      )}
       <Separator orientation="vertical" className="mr-2 !h-4" />
 
       <Breadcrumb className="flex-1">

package/src/components/app-sidebar.tsx

@@ -2,7 +2,7 @@
 
 import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
-import { ChevronUp, ChevronRight, LogOut } from "lucide-react";
+import { ChevronsUpDown, ChevronRight, LogOut } from "lucide-react";
 import { useSession } from "../auth";
 import type { AppShellConfig, MenuGroup, MenuItem } from "../types";
 import { signOut } from "../auth";
@@ -17,6 +17,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarRail,
 } from "./ui/sidebar";
 import {
   Collapsible,
@@ -49,15 +50,20 @@ function getUserInitials(name: string, email: string): string {
 }
 
 function SimpleMenuItem({ item, pathname }: { item: MenuItem; pathname: string }) {
-  const isActive = pathname.startsWith(item.href);
+  const isActive = item.isActive ?? pathname.startsWith(item.href);
   const Icon = item.icon;
 
   return (
     <SidebarMenuItem>
       <SidebarMenuButton asChild isActive={isActive} tooltip={item.label}>
-        <Link href={item.href} onClick={item.onClick}>
+        <Link href={item.href} onClick={item.onClick} aria-current={isActive ? "page" : undefined}>
           <Icon className="size-4" />
           <span>{item.label}</span>
+          {item.badge != null && (
+            <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">
+              {item.badge}
+            </span>
+          )}
         </Link>
       </SidebarMenuButton>
     </SidebarMenuItem>
@@ -66,22 +72,33 @@ function SimpleMenuItem({ item, pathname }: { item: MenuItem; pathname: string }
 
 function CollapsibleMenuItem({ item, pathname }: { item: MenuItem; pathname: string }) {
   const Icon = item.icon;
-  const isChildActive = item.children?.some((child) => pathname.startsWith(child.href)) ?? false;
+  const isParentActive = pathname.startsWith(item.href);
+  const isChildActive = item.children?.some((child) =>
+    child.isActive !== undefined ? child.isActive : pathname.startsWith(child.href)
+  ) ?? false;
 
   return (
-    <Collapsible defaultOpen={isChildActive} className="group/collapsible">
+    <Collapsible defaultOpen={isParentActive || isChildActive} className="group/collapsible">
       <SidebarMenuItem>
-        <CollapsibleTrigger asChild>
-          <SidebarMenuButton tooltip={item.label}>
+        <SidebarMenuButton asChild isActive={isParentActive} tooltip={item.label}>
+          <Link href={item.href} onClick={item.onClick}>
             <Icon className="size-4" />
             <span>{item.label}</span>
-            <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-          </SidebarMenuButton>
+          </Link>
+        </SidebarMenuButton>
+        <CollapsibleTrigger asChild>
+          <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"
+          >
+            <ChevronRight className="size-3.5 shrink-0 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </button>
         </CollapsibleTrigger>
         <CollapsibleContent>
           <SidebarMenu className="ml-4 border-l pl-2">
             {item.children?.map((child) => (
-              <SimpleMenuItem key={child.href} item={child} pathname={pathname} />
+              <SimpleMenuItem key={child.href + child.label} item={child} pathname={pathname} />
             ))}
           </SidebarMenu>
         </CollapsibleContent>
@@ -156,7 +173,7 @@ export function AppSidebar({ config }: AppSidebarProps) {
                     <span className="truncate font-semibold">{userName}</span>
                     <span className="truncate text-xs text-muted-foreground">{userEmail}</span>
                   </div>
-                  <ChevronUp className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
+                  <ChevronsUpDown className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
@@ -182,6 +199,7 @@ export function AppSidebar({ config }: AppSidebarProps) {
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarFooter>
+      <SidebarRail />
     </Sidebar>
   );
 }

package/src/components/ui/collapsible.tsx

@@ -3,6 +3,8 @@
 import * as React from "react"
 import { Collapsible as CollapsiblePrimitive } from "radix-ui"
 
+import { cn } from "../../lib/utils"
+
 function Collapsible({
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
@@ -21,11 +23,16 @@ function CollapsibleTrigger({
 }
 
 function CollapsibleContent({
+  className,
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
   return (
     <CollapsiblePrimitive.CollapsibleContent
       data-slot="collapsible-content"
+      className={cn(
+        "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+        className
+      )}
       {...props}
     />
   )

package/src/components/ui/sidebar.tsx

@@ -27,7 +27,7 @@ import {
 const SIDEBAR_STORAGE_KEY = "sidebar_state"
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_WIDTH_ICON = "3.5rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContextProps = {

package/src/theme.css

@@ -51,6 +51,8 @@
   --radius-2xl: calc(var(--radius) + 8px);
   --radius-3xl: calc(var(--radius) + 12px);
   --radius-4xl: calc(var(--radius) + 16px);
+  --animate-collapsible-down: collapsible-down 200ms ease-out;
+  --animate-collapsible-up: collapsible-up 150ms ease-out;
 }
 
 :root {
@@ -62,35 +64,35 @@
   --popover-foreground: oklch(0.141 0.005 285.823);
   --primary: oklch(0.21 0.006 285.885);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
+  --secondary: oklch(0.955 0.004 285);
   --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.50 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
+  --muted: oklch(0.965 0.002 286);
+  --muted-foreground: oklch(0.45 0.02 285);
+  --accent: oklch(0.945 0.012 270);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
   --success: oklch(0.527 0.154 150.069);
-  --border: oklch(0.92 0.004 286.32);
+  --border: oklch(0.91 0.005 286);
   --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.588 0.158 241.966);
+  --ring: oklch(0.55 0.06 275);
   --chart-1: oklch(0.588 0.158 241.966);
   --chart-2: oklch(0.637 0.179 163.223);
   --chart-3: oklch(0.553 0.195 255.065);
   --chart-4: oklch(0.705 0.213 47.604);
   --chart-5: oklch(0.637 0.237 25.331);
   --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
+  --sidebar: oklch(0.975 0.003 285);
   --sidebar-foreground: oklch(0.141 0.005 285.823);
   --sidebar-primary: oklch(0.21 0.006 285.885);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --sidebar-accent: oklch(0.935 0.018 270);
+  --sidebar-accent-foreground: oklch(0.15 0.010 270);
+  --sidebar-border: oklch(0.90 0.008 280);
+  --sidebar-ring: oklch(0.60 0.05 275);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
+  --background: oklch(0.145 0.006 285);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.21 0.006 285.885);
   --card-foreground: oklch(0.985 0 0);
@@ -98,30 +100,30 @@
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.92 0.004 286.32);
   --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
+  --secondary: oklch(0.25 0.008 285);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
+  --muted: oklch(0.23 0.006 286);
+  --muted-foreground: oklch(0.65 0.015 286);
+  --accent: oklch(0.28 0.018 270);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --success: oklch(0.696 0.17 162.48);
-  --border: oklch(1 0 0 / 10%);
+  --border: oklch(1 0 0 / 12%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
+  --ring: oklch(0.50 0.04 275);
   --chart-1: oklch(0.688 0.158 241.966);
   --chart-2: oklch(0.737 0.179 163.223);
   --chart-3: oklch(0.653 0.195 255.065);
   --chart-4: oklch(0.765 0.183 47.604);
   --chart-5: oklch(0.717 0.217 25.331);
-  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar: oklch(0.185 0.008 280);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary: oklch(0.70 0.04 275);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --sidebar-accent: oklch(0.30 0.025 270);
+  --sidebar-accent-foreground: oklch(0.95 0.005 270);
+  --sidebar-border: oklch(1 0 0 / 14%);
+  --sidebar-ring: oklch(0.55 0.04 275);
 }
 
 @layer base {
@@ -136,6 +138,29 @@
   }
 }
 
+/* Collapsible animation */
+@keyframes collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
 /* View Transition — dark/light mode circle reveal */
 ::view-transition-old(root),
 ::view-transition-new(root) {

package/src/types/index.ts

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