@logickernel/frame 0.8.0 → 0.8.2

package/dist/index.mjs

@@ -1,11 +1,8 @@
-import * as React2 from 'react';
-import { useState, useEffect } from 'react';
-import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
-import { signOut } from 'next-auth/react';
 import * as LucideIcons from 'lucide-react';
 import { PanelLeft, ChevronRight, Check, Circle, ChevronsUpDown, BadgeCheck, LogOut, GalleryVerticalEnd } from 'lucide-react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as React2 from 'react';
+import { useState, useEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -14,8 +11,11 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { signOut } from 'next-auth/react';
 
-// src/components/AppSidebar.tsx
+// src/components/NavMain.tsx
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
@@ -54,7 +54,10 @@ function useSidebar() {
   return context;
 }
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React2.useState(false);
+  const [isMobile, setIsMobile] = React2.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(max-width: 768px)").matches;
+  });
   React2.useEffect(() => {
     const mql = window.matchMedia("(max-width: 768px)");
     const onChange = () => setIsMobile(mql.matches);
@@ -76,7 +79,19 @@ var SidebarProvider = React2.forwardRef(
   }, ref) => {
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = React2.useState(false);
-    const [_open, _setOpen] = React2.useState(defaultOpen);
+    const getInitialState = React2.useCallback(() => {
+      if (typeof document === "undefined") return defaultOpen;
+      const cookies = document.cookie.split(";");
+      const sidebarCookie = cookies.find(
+        (cookie) => cookie.trim().startsWith(`${SIDEBAR_COOKIE_NAME}=`)
+      );
+      if (sidebarCookie) {
+        const value = sidebarCookie.split("=")[1];
+        return value === "true";
+      }
+      return defaultOpen;
+    }, [defaultOpen]);
+    const [_open, _setOpen] = React2.useState(getInitialState);
     const open = openProp ?? _open;
     const setOpen = React2.useCallback(
       (value) => {
@@ -91,7 +106,11 @@ var SidebarProvider = React2.forwardRef(
       [setOpenProp, open]
     );
     const toggleSidebar = React2.useCallback(() => {
-      return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+      if (isMobile) {
+        setOpenMobile((open2) => !open2);
+      } else {
+        setOpen((open2) => !open2);
+      }
     }, [isMobile, setOpen, setOpenMobile]);
     React2.useEffect(() => {
       const handleKeyDown = (event) => {
@@ -103,6 +122,15 @@ var SidebarProvider = React2.forwardRef(
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
+    React2.useEffect(() => {
+      if (isMobile && openMobile) {
+        const originalStyle = window.getComputedStyle(document.body).overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+          document.body.style.overflow = originalStyle;
+        };
+      }
+    }, [isMobile, openMobile]);
     const state = open ? "expanded" : "collapsed";
     const contextValue = React2.useMemo(
       () => ({
@@ -126,7 +154,7 @@ var SidebarProvider = React2.forwardRef(
           ...style
         },
         className: cn(
-          "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+          "group/sidebar-wrapper flex min-h-svh w-full bg-background has-[[data-variant=inset]]:bg-sidebar",
           className
         ),
         ref,
@@ -162,35 +190,44 @@ var Sidebar = React2.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "fixed inset-0 z-50 bg-black/80",
-            openMobile ? "block" : "hidden"
-          ),
-          onClick: () => setOpenMobile(false),
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-sidebar": "sidebar",
-              "data-mobile": "true",
-              className: cn(
-                "fixed inset-y-0 z-50 flex h-svh w-[--sidebar-width] flex-col bg-sidebar p-2 text-sidebar-foreground",
-                side === "left" ? "left-0 border-r" : "right-0 border-l",
-                className
-              ),
-              style: {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE
-              },
-              onClick: (e) => e.stopPropagation(),
-              ref,
-              ...props,
-              children
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => setOpenMobile(false),
+            "aria-hidden": "true",
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 40,
+              backgroundColor: "rgba(0, 0, 0, 0.8)",
+              opacity: openMobile ? 1 : 0,
+              transition: "opacity 200ms",
+              pointerEvents: openMobile ? "auto" : "none"
             }
-          )
-        }
-      );
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-sidebar": "sidebar",
+            "data-mobile": "true",
+            className: cn(
+              "fixed inset-y-0 z-50 flex h-svh w-[--sidebar-width] flex-col bg-sidebar p-2 text-sidebar-foreground transition-transform duration-200 ease-in-out",
+              side === "left" ? "left-0 border-r" : "right-0 border-l",
+              openMobile ? "translate-x-0" : side === "left" ? "-translate-x-full" : "translate-x-full",
+              className
+            ),
+            style: {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+            },
+            onClick: (e) => e.stopPropagation(),
+            ref,
+            ...props,
+            children
+          }
+        )
+      ] });
     }
     return /* @__PURE__ */ jsxs(
       "div",
@@ -287,23 +324,24 @@ var SidebarRail = React2.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarRail.displayName = "SidebarRail";
 var SidebarInset = React2.forwardRef(({ className, style, ...props }, ref) => {
-  const { state, isMobile } = useSidebar();
   return /* @__PURE__ */ jsx(
-    "main",
+    "div",
     {
       ref,
       className: cn(
         "relative flex min-h-svh flex-1 flex-col bg-background",
-        // Auto-adjust margin based on sidebar state
-        // Transition duration uses CSS variable for consistency
         "transition-[margin-left] duration-200 ease-linear",
+        // Use peer selectors to respond to sidebar state
         // On mobile, no margin needed (sidebar is overlay)
-        // On desktop, margin-left based on sidebar state:
-        // - Expanded: ml-64 (256px / 16rem)
-        // - Collapsed: ml-12 (48px / 3rem)
-        !isMobile && state === "expanded" && "md:ml-64",
-        !isMobile && state === "collapsed" && "md:ml-12",
-        // Keep peer-based styles for inset variant
+        // For default "sidebar" variant, the spacer div already creates space, so no margin needed
+        // Only add margin for floating/inset variants that don't have a spacer
+        "md:peer-data-[variant=floating]:ml-[--sidebar-width]",
+        "md:peer-data-[variant=floating]:peer-data-[collapsible=offcanvas]:ml-0",
+        "md:peer-data-[variant=floating]:peer-data-[collapsible=icon]:ml-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
+        "md:peer-data-[variant=inset]:ml-[--sidebar-width]",
+        "md:peer-data-[variant=inset]:peer-data-[collapsible=offcanvas]:ml-0",
+        "md:peer-data-[variant=inset]:peer-data-[collapsible=icon]:ml-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
+        // Inset variant specific styles
         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className
       ),
@@ -661,7 +699,7 @@ function getIconComponent(icon) {
 }
 function NavMain({ items, adapter }) {
   const pathname = adapter.usePathname();
-  const Link3 = adapter.Link;
+  const Link2 = adapter.Link;
   const groups = [];
   let currentGroup = {
     items: []
@@ -717,7 +755,7 @@ function NavMain({ items, adapter }) {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, { asChild: true, children: /* @__PURE__ */ jsx(Link3, { href: subItem.url, children: /* @__PURE__ */ jsx("span", { children: subItem.title }) }) }) }, subItem.title)) }) })
+              /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, { asChild: true, children: /* @__PURE__ */ jsx(Link2, { href: subItem.url, children: /* @__PURE__ */ jsx("span", { children: subItem.title }) }) }) }, subItem.title)) }) })
             ] })
           },
           item.title
@@ -729,7 +767,7 @@ function NavMain({ items, adapter }) {
           asChild: true,
           tooltip: item.title,
           isActive,
-          children: /* @__PURE__ */ jsxs(Link3, { href: item.url, children: [
+          children: /* @__PURE__ */ jsxs(Link2, { href: item.url, children: [
             item.icon && /* @__PURE__ */ jsx(item.icon, {}),
             /* @__PURE__ */ jsx("span", { children: item.title })
           ] })
@@ -1165,28 +1203,24 @@ function useNavigation({
   }, [organizationId, apiBaseUrl, enabled]);
   return { items, organizations, loading, error };
 }
-var NextJSLink = ({ href, children, className }) => /* @__PURE__ */ jsx(Link, { href, className, children });
 function AppSidebar({
   user,
-  adapter: externalAdapter,
+  adapter,
   data,
   organizationId,
   apiBaseUrl,
   ...props
 }) {
-  const pathname = usePathname();
-  const nextRouter = useRouter();
-  const router = React2.useMemo(() => ({
-    push: (path) => nextRouter.push(path),
-    refresh: () => nextRouter.refresh()
-  }), [nextRouter]);
-  const internalAdapter = React2.useMemo(() => ({
-    usePathname: () => pathname,
-    useRouter: () => router,
-    Link: NextJSLink,
-    signOut
-  }), [pathname, router]);
-  const adapter = externalAdapter ?? internalAdapter;
+  if (!adapter) {
+    throw new Error(
+      "AppSidebar: adapter is required. Please provide a framework adapter. For Next.js, use: const adapter = useNextJSAdapter()"
+    );
+  }
+  if (typeof adapter.usePathname !== "function") {
+    throw new Error(
+      "AppSidebar: Invalid adapter provided. The adapter must have a usePathname function. Make sure you're using the correct adapter for your framework."
+    );
+  }
   const currentPathname = adapter.usePathname();
   const isPropsMode = data !== void 0;
   const pathSegments = currentPathname.split("/");
@@ -1251,26 +1285,48 @@ function AppLayout({
     ),
     /* @__PURE__ */ jsxs(SidebarInset, { children: [
       /* @__PURE__ */ jsx(SidebarTrigger, {}),
-      /* @__PURE__ */ jsx("main", { className: "flex flex-1 flex-col gap-4 p-4 md:p-6", children })
+      children
     ] })
   ] });
 }
-function createNextJSAdapter() {
-  const NextJSLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx(Link, { href, className, children });
-  return {
-    usePathname: usePathname,
-    useRouter: () => {
-      const router = useRouter();
+function useNextJSAdapter() {
+  const pathname = usePathname();
+  const nextRouter = useRouter();
+  const router = React2.useMemo(
+    () => {
+      if (!nextRouter) {
+        throw new Error(
+          "Next.js router is not available. Make sure you're using useNextJSAdapter in a Client Component ('use client') and that Next.js router is properly initialized."
+        );
+      }
       return {
-        push: (path) => router.push(path),
-        refresh: () => router.refresh()
+        push: (path) => nextRouter.push(path),
+        refresh: () => nextRouter.refresh()
       };
     },
-    Link: NextJSLink2,
-    signOut: signOut
-  };
+    [nextRouter]
+  );
+  const NextJSLink = React2.useMemo(
+    () => ({ href, children, className }) => /* @__PURE__ */ jsx(Link, { href, className, children }),
+    []
+  );
+  const adapter = React2.useMemo(
+    () => ({
+      usePathname: () => {
+        if (pathname === void 0 || pathname === null) {
+          return "";
+        }
+        return pathname;
+      },
+      useRouter: () => router,
+      Link: NextJSLink,
+      signOut
+    }),
+    [pathname, router, NextJSLink]
+  );
+  return adapter;
 }
 
-export { AppLayout, AppSidebar, NavMain, NavUser, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };
+export { AppLayout, AppSidebar, NavMain, NavUser, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, getIconComponent, useNavigation, useNextJSAdapter, useSidebar };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map