@logickernel/frame 0.5.0 → 0.7.0

package/dist/index.mjs

@@ -43,6 +43,7 @@ var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_TRANSITION_DURATION = "200ms";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
 var SidebarContext = React2.createContext(null);
 function useSidebar() {
@@ -121,6 +122,7 @@ var SidebarProvider = React2.forwardRef(
         style: {
           "--sidebar-width": SIDEBAR_WIDTH,
           "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+          "--sidebar-transition-duration": SIDEBAR_TRANSITION_DURATION,
           ...style
         },
         className: cn(
@@ -284,16 +286,28 @@ var SidebarRail = React2.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React2.forwardRef(({ className, ...props }, ref) => {
+var SidebarInset = React2.forwardRef(({ className, style, ...props }, ref) => {
+  const { state, isMobile } = useSidebar();
   return /* @__PURE__ */ jsx(
     "main",
     {
       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",
+        // 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
         "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
       ),
+      style,
       ...props
     }
   );
@@ -1216,6 +1230,42 @@ function AppSidebar({
     /* @__PURE__ */ jsx(SidebarRail, {})
   ] });
 }
+function AppLayout({
+  user,
+  adapter,
+  data,
+  organizationId,
+  apiBaseUrl,
+  useApiNavigation,
+  headerContent,
+  showHeader = true,
+  children
+}) {
+  const isApiMode = useApiNavigation === true;
+  const navigationApiBaseUrl = apiBaseUrl;
+  return /* @__PURE__ */ jsxs(SidebarProvider, { children: [
+    /* @__PURE__ */ jsx(
+      AppSidebar,
+      {
+        user,
+        adapter,
+        data: isApiMode ? void 0 : data,
+        organizationId,
+        apiBaseUrl: navigationApiBaseUrl
+      }
+    ),
+    /* @__PURE__ */ jsxs(SidebarInset, { children: [
+      showHeader && /* @__PURE__ */ jsxs("header", { className: "flex h-16 shrink-0 items-center gap-2 border-b px-4", children: [
+        /* @__PURE__ */ jsx(SidebarTrigger, {}),
+        headerContent && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border" }),
+          headerContent
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("main", { className: "flex flex-1 flex-col gap-4 p-4 md:p-6", children })
+    ] })
+  ] });
+}
 function createNextJSAdapter() {
   const NextJSLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx(Link, { href, className, children });
   return {
@@ -1232,6 +1282,6 @@ function createNextJSAdapter() {
   };
 }
 
-export { AppSidebar, NavMain, NavUser, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };
+export { AppLayout, AppSidebar, NavMain, NavUser, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map