@logickernel/frame 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +46 -3
  2. package/dist/index.d.mts +57 -45
  3. package/dist/index.d.ts +57 -45
  4. package/dist/index.js +53 -21
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +53 -2
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -44,15 +44,16 @@ npm install next next-auth
44
44
 
45
45
  This library uses shadcn/ui components that must be available in your application. You need to have the following components installed and accessible via the `@/components/ui/*` path alias:
46
46
 
47
- - `@/components/ui/sidebar`
48
47
  - `@/components/ui/avatar`
49
48
  - `@/components/ui/dropdown-menu`
50
49
  - `@/components/ui/collapsible`
51
50
 
52
- To install these components, use shadcn/ui:
51
+ **Important:** Do NOT install the `sidebar` component from shadcn/ui. The library provides all sidebar components (`SidebarProvider`, `Sidebar`, `SidebarTrigger`, `SidebarInset`, etc.) that share the same React Context. Import them from `@logickernel/frame` instead.
52
+
53
+ To install the required components, use shadcn/ui:
53
54
 
54
55
  ```bash
55
- npx shadcn@latest add sidebar avatar dropdown-menu collapsible
56
+ npx shadcn@latest add avatar dropdown-menu collapsible
56
57
  ```
57
58
 
58
59
  Make sure your `tsconfig.json` has the path alias configured:
@@ -129,6 +130,48 @@ export default function Layout({ children }: { children: React.ReactNode }) {
129
130
  }
130
131
  ```
131
132
 
133
+ ### Using SidebarProvider and Sidebar Components
134
+
135
+ **Important:** Always import sidebar components (`SidebarProvider`, `SidebarTrigger`, `SidebarInset`, etc.) from `@logickernel/frame`, not from your local `@/components/ui/sidebar`. This ensures all components share the same React Context.
136
+
137
+ ```typescript
138
+ import {
139
+ AppSidebar,
140
+ SidebarProvider,
141
+ SidebarTrigger,
142
+ SidebarInset,
143
+ createNextJSAdapter,
144
+ } from "@logickernel/frame"
145
+ import type { User, SidebarData } from "@logickernel/frame"
146
+
147
+ const adapter = createNextJSAdapter()
148
+ const user: User = { name: "John Doe", email: "john@example.com", image: null }
149
+ const data: SidebarData = { /* ... */ }
150
+
151
+ export default function Layout({ children }: { children: React.ReactNode }) {
152
+ return (
153
+ <SidebarProvider>
154
+ <AppSidebar user={user} adapter={adapter} data={data} />
155
+ <SidebarInset>
156
+ <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
157
+ <SidebarTrigger />
158
+ <h1>My App</h1>
159
+ </header>
160
+ <main className="flex flex-1 flex-col gap-4 p-4">{children}</main>
161
+ </SidebarInset>
162
+ </SidebarProvider>
163
+ )
164
+ }
165
+ ```
166
+
167
+ **Available Sidebar Components:**
168
+ - `SidebarProvider` - Context provider (required wrapper)
169
+ - `SidebarTrigger` - Button to toggle sidebar
170
+ - `SidebarInset` - Main content area that adjusts for sidebar
171
+ - `useSidebar` - Hook for accessing sidebar state (optional, for advanced use cases)
172
+
173
+ **Note:** Other sidebar components (`Sidebar`, `SidebarRail`, `SidebarMenu`, etc.) are internal implementation details used by `AppSidebar` and are not exported. You don't need to import them.
174
+
132
175
  ### API Mode
133
176
 
134
177
  Omit `data` — the component fetches organizations and navigation from the API.
package/dist/index.d.mts CHANGED
@@ -2,9 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React$1 from 'react';
3
3
  import { ComponentType, ReactNode } from 'react';
4
4
  import { LucideIcon } from 'lucide-react';
5
- import * as class_variance_authority_types from 'class-variance-authority/types';
6
- import { VariantProps } from 'class-variance-authority';
7
- import * as TooltipPrimitive from '@radix-ui/react-tooltip';
8
5
 
9
6
  /**
10
7
  * @logickernel/frame library types
@@ -86,8 +83,43 @@ interface FrameworkAdapter {
86
83
  redirect?: boolean;
87
84
  }) => Promise<void>;
88
85
  }
89
-
90
- declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
86
+ /**
87
+ * Props for AppSidebar component
88
+ */
89
+ interface AppSidebarProps$1 {
90
+ user: User;
91
+ /** Optional adapter - if not provided, Next.js defaults will be used */
92
+ adapter?: FrameworkAdapter;
93
+ /** Sidebar data containing organizations and navigation items (props mode) */
94
+ data?: SidebarData;
95
+ /** Current organization ID (optional, can be extracted from pathname) */
96
+ organizationId?: string;
97
+ /** Custom API base URL (API mode only, defaults to "/api") */
98
+ apiBaseUrl?: string;
99
+ }
100
+ /**
101
+ * Props for AppLayout component
102
+ */
103
+ interface AppLayoutProps {
104
+ /** User data for sidebar */
105
+ user: User;
106
+ /** Optional adapter - if not provided, Next.js defaults will be used */
107
+ adapter?: FrameworkAdapter;
108
+ /** Sidebar data containing organizations and navigation items (props mode) */
109
+ data?: SidebarData;
110
+ /** Current organization ID (optional, can be extracted from pathname) */
111
+ organizationId?: string;
112
+ /** Custom API base URL (API mode only, defaults to "/api" which constructs "/api/navigation/{organizationId}") */
113
+ apiBaseUrl?: string;
114
+ /** Enable API mode - library will fetch navigation from API */
115
+ useApiNavigation?: boolean;
116
+ /** Custom header content (breadcrumbs, actions, etc.) */
117
+ headerContent?: ReactNode;
118
+ /** Show/hide default header (default: true) */
119
+ showHeader?: boolean;
120
+ /** Children to render in the main content area */
121
+ children: ReactNode;
122
+ }
91
123
 
92
124
  type SidebarContext = {
93
125
  state: "expanded" | "collapsed";
@@ -111,46 +143,7 @@ declare const Sidebar: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttri
111
143
  collapsible?: "offcanvas" | "icon" | "none";
112
144
  }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
113
145
  declare const SidebarTrigger: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
114
- declare const SidebarRail: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
115
146
  declare const SidebarInset: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
116
- declare const SidebarInput: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
117
- declare const SidebarHeader: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
118
- declare const SidebarFooter: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
119
- declare const SidebarSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & React$1.RefAttributes<HTMLHRElement>>;
120
- declare const SidebarContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
121
- declare const SidebarGroup: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
122
- declare const SidebarGroupLabel: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
123
- asChild?: boolean;
124
- }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
125
- declare const SidebarGroupAction: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
126
- asChild?: boolean;
127
- }, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
128
- declare const SidebarGroupContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
129
- declare const SidebarMenu: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
130
- declare const SidebarMenuItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
131
- declare const SidebarMenuButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
132
- asChild?: boolean;
133
- isActive?: boolean;
134
- tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
135
- } & VariantProps<(props?: ({
136
- variant?: "default" | "outline" | null | undefined;
137
- size?: "default" | "sm" | "lg" | null | undefined;
138
- } & class_variance_authority_types.ClassProp) | undefined) => string>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
139
- declare const SidebarMenuAction: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
140
- asChild?: boolean;
141
- showOnHover?: boolean;
142
- }, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
143
- declare const SidebarMenuBadge: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
144
- declare const SidebarMenuSkeleton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
145
- showIcon?: boolean;
146
- }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
147
- declare const SidebarMenuSub: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
148
- declare const SidebarMenuSubItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
149
- declare const SidebarMenuSubButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLAnchorElement> & React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
150
- asChild?: boolean;
151
- size?: "sm" | "md";
152
- isActive?: boolean;
153
- }, "ref"> & React$1.RefAttributes<HTMLAnchorElement>>;
154
147
 
155
148
  /**
156
149
  * Props mode: Pass data (organizations + navigationItems)
@@ -169,6 +162,25 @@ interface AppSidebarProps extends React$1.ComponentProps<typeof Sidebar> {
169
162
  }
170
163
  declare function AppSidebar({ user, adapter: externalAdapter, data, organizationId, apiBaseUrl, ...props }: AppSidebarProps): react_jsx_runtime.JSX.Element;
171
164
 
165
+ /**
166
+ * High-level layout component that handles the entire sidebar + content layout structure.
167
+ *
168
+ * This component wraps AppSidebar and SidebarInset in SidebarProvider and provides
169
+ * a default header with sidebar trigger. It handles all layout concerns internally.
170
+ *
171
+ * @example
172
+ * ```tsx
173
+ * <AppLayout
174
+ * user={user}
175
+ * useApiNavigation={true}
176
+ * headerContent={<Breadcrumb>...</Breadcrumb>}
177
+ * >
178
+ * {children}
179
+ * </AppLayout>
180
+ * ```
181
+ */
182
+ declare function AppLayout({ user, adapter, data, organizationId, apiBaseUrl, useApiNavigation, headerContent, showHeader, children, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
183
+
172
184
  interface NavMainProps {
173
185
  items: NavigationItem[];
174
186
  adapter: FrameworkAdapter;
@@ -233,4 +245,4 @@ declare function getIconComponent(icon?: string | LucideIcon): LucideIcon | unde
233
245
  */
234
246
  declare function createNextJSAdapter(): FrameworkAdapter;
235
247
 
236
- export { AppSidebar, type FrameworkAdapter, type LinkProps, NavMain, NavUser, type NavigationConfig, type NavigationItem, type Organization, type Router, Sidebar, SidebarContent, type SidebarData, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, TeamSwitcher, type User, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };
248
+ export { AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps$1 as AppSidebarProps, type FrameworkAdapter, type LinkProps, NavMain, NavUser, type NavigationConfig, type NavigationItem, type Organization, type Router, type SidebarData, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, type User, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };
package/dist/index.d.ts CHANGED
@@ -2,9 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React$1 from 'react';
3
3
  import { ComponentType, ReactNode } from 'react';
4
4
  import { LucideIcon } from 'lucide-react';
5
- import * as class_variance_authority_types from 'class-variance-authority/types';
6
- import { VariantProps } from 'class-variance-authority';
7
- import * as TooltipPrimitive from '@radix-ui/react-tooltip';
8
5
 
9
6
  /**
10
7
  * @logickernel/frame library types
@@ -86,8 +83,43 @@ interface FrameworkAdapter {
86
83
  redirect?: boolean;
87
84
  }) => Promise<void>;
88
85
  }
89
-
90
- declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
86
+ /**
87
+ * Props for AppSidebar component
88
+ */
89
+ interface AppSidebarProps$1 {
90
+ user: User;
91
+ /** Optional adapter - if not provided, Next.js defaults will be used */
92
+ adapter?: FrameworkAdapter;
93
+ /** Sidebar data containing organizations and navigation items (props mode) */
94
+ data?: SidebarData;
95
+ /** Current organization ID (optional, can be extracted from pathname) */
96
+ organizationId?: string;
97
+ /** Custom API base URL (API mode only, defaults to "/api") */
98
+ apiBaseUrl?: string;
99
+ }
100
+ /**
101
+ * Props for AppLayout component
102
+ */
103
+ interface AppLayoutProps {
104
+ /** User data for sidebar */
105
+ user: User;
106
+ /** Optional adapter - if not provided, Next.js defaults will be used */
107
+ adapter?: FrameworkAdapter;
108
+ /** Sidebar data containing organizations and navigation items (props mode) */
109
+ data?: SidebarData;
110
+ /** Current organization ID (optional, can be extracted from pathname) */
111
+ organizationId?: string;
112
+ /** Custom API base URL (API mode only, defaults to "/api" which constructs "/api/navigation/{organizationId}") */
113
+ apiBaseUrl?: string;
114
+ /** Enable API mode - library will fetch navigation from API */
115
+ useApiNavigation?: boolean;
116
+ /** Custom header content (breadcrumbs, actions, etc.) */
117
+ headerContent?: ReactNode;
118
+ /** Show/hide default header (default: true) */
119
+ showHeader?: boolean;
120
+ /** Children to render in the main content area */
121
+ children: ReactNode;
122
+ }
91
123
 
92
124
  type SidebarContext = {
93
125
  state: "expanded" | "collapsed";
@@ -111,46 +143,7 @@ declare const Sidebar: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttri
111
143
  collapsible?: "offcanvas" | "icon" | "none";
112
144
  }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
113
145
  declare const SidebarTrigger: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
114
- declare const SidebarRail: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
115
146
  declare const SidebarInset: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
116
- declare const SidebarInput: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
117
- declare const SidebarHeader: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
118
- declare const SidebarFooter: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
119
- declare const SidebarSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & React$1.RefAttributes<HTMLHRElement>>;
120
- declare const SidebarContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
121
- declare const SidebarGroup: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
122
- declare const SidebarGroupLabel: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
123
- asChild?: boolean;
124
- }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
125
- declare const SidebarGroupAction: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
126
- asChild?: boolean;
127
- }, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
128
- declare const SidebarGroupContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
129
- declare const SidebarMenu: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
130
- declare const SidebarMenuItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
131
- declare const SidebarMenuButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
132
- asChild?: boolean;
133
- isActive?: boolean;
134
- tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
135
- } & VariantProps<(props?: ({
136
- variant?: "default" | "outline" | null | undefined;
137
- size?: "default" | "sm" | "lg" | null | undefined;
138
- } & class_variance_authority_types.ClassProp) | undefined) => string>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
139
- declare const SidebarMenuAction: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
140
- asChild?: boolean;
141
- showOnHover?: boolean;
142
- }, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
143
- declare const SidebarMenuBadge: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
144
- declare const SidebarMenuSkeleton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
145
- showIcon?: boolean;
146
- }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
147
- declare const SidebarMenuSub: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
148
- declare const SidebarMenuSubItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
149
- declare const SidebarMenuSubButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLAnchorElement> & React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
150
- asChild?: boolean;
151
- size?: "sm" | "md";
152
- isActive?: boolean;
153
- }, "ref"> & React$1.RefAttributes<HTMLAnchorElement>>;
154
147
 
155
148
  /**
156
149
  * Props mode: Pass data (organizations + navigationItems)
@@ -169,6 +162,25 @@ interface AppSidebarProps extends React$1.ComponentProps<typeof Sidebar> {
169
162
  }
170
163
  declare function AppSidebar({ user, adapter: externalAdapter, data, organizationId, apiBaseUrl, ...props }: AppSidebarProps): react_jsx_runtime.JSX.Element;
171
164
 
165
+ /**
166
+ * High-level layout component that handles the entire sidebar + content layout structure.
167
+ *
168
+ * This component wraps AppSidebar and SidebarInset in SidebarProvider and provides
169
+ * a default header with sidebar trigger. It handles all layout concerns internally.
170
+ *
171
+ * @example
172
+ * ```tsx
173
+ * <AppLayout
174
+ * user={user}
175
+ * useApiNavigation={true}
176
+ * headerContent={<Breadcrumb>...</Breadcrumb>}
177
+ * >
178
+ * {children}
179
+ * </AppLayout>
180
+ * ```
181
+ */
182
+ declare function AppLayout({ user, adapter, data, organizationId, apiBaseUrl, useApiNavigation, headerContent, showHeader, children, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
183
+
172
184
  interface NavMainProps {
173
185
  items: NavigationItem[];
174
186
  adapter: FrameworkAdapter;
@@ -233,4 +245,4 @@ declare function getIconComponent(icon?: string | LucideIcon): LucideIcon | unde
233
245
  */
234
246
  declare function createNextJSAdapter(): FrameworkAdapter;
235
247
 
236
- export { AppSidebar, type FrameworkAdapter, type LinkProps, NavMain, NavUser, type NavigationConfig, type NavigationItem, type Organization, type Router, Sidebar, SidebarContent, type SidebarData, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, TeamSwitcher, type User, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };
248
+ export { AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps$1 as AppSidebarProps, type FrameworkAdapter, type LinkProps, NavMain, NavUser, type NavigationConfig, type NavigationItem, type Organization, type Router, type SidebarData, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, type User, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };
package/dist/index.js CHANGED
@@ -71,6 +71,7 @@ var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
71
71
  var SIDEBAR_WIDTH = "16rem";
72
72
  var SIDEBAR_WIDTH_MOBILE = "18rem";
73
73
  var SIDEBAR_WIDTH_ICON = "3rem";
74
+ var SIDEBAR_TRANSITION_DURATION = "200ms";
74
75
  var SIDEBAR_KEYBOARD_SHORTCUT = "b";
75
76
  var SidebarContext = React2__namespace.createContext(null);
76
77
  function useSidebar() {
@@ -149,6 +150,7 @@ var SidebarProvider = React2__namespace.forwardRef(
149
150
  style: {
150
151
  "--sidebar-width": SIDEBAR_WIDTH,
151
152
  "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
153
+ "--sidebar-transition-duration": SIDEBAR_TRANSITION_DURATION,
152
154
  ...style
153
155
  },
154
156
  className: cn(
@@ -312,16 +314,29 @@ var SidebarRail = React2__namespace.forwardRef(({ className, ...props }, ref) =>
312
314
  );
313
315
  });
314
316
  SidebarRail.displayName = "SidebarRail";
315
- var SidebarInset = React2__namespace.forwardRef(({ className, ...props }, ref) => {
317
+ var SidebarInset = React2__namespace.forwardRef(({ className, style, ...props }, ref) => {
318
+ const { state, isMobile } = useSidebar();
316
319
  return /* @__PURE__ */ jsxRuntime.jsx(
317
320
  "main",
318
321
  {
319
322
  ref,
320
323
  className: cn(
321
324
  "relative flex min-h-svh flex-1 flex-col bg-background",
325
+ // Auto-adjust margin based on sidebar state using CSS variables
326
+ // Transition duration uses CSS variable for consistency
327
+ "transition-[margin-left] ease-linear",
328
+ // On mobile, no margin needed (sidebar is overlay)
329
+ // On desktop, margin-left based on sidebar state
330
+ !isMobile && state === "expanded" && "md:ml-[var(--sidebar-width)]",
331
+ !isMobile && state === "collapsed" && "md:ml-[var(--sidebar-width-icon)]",
332
+ // Keep peer-based styles for inset variant
322
333
  "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",
323
334
  className
324
335
  ),
336
+ style: {
337
+ transitionDuration: "var(--sidebar-transition-duration, 200ms)",
338
+ ...style
339
+ },
325
340
  ...props
326
341
  }
327
342
  );
@@ -1244,6 +1259,42 @@ function AppSidebar({
1244
1259
  /* @__PURE__ */ jsxRuntime.jsx(SidebarRail, {})
1245
1260
  ] });
1246
1261
  }
1262
+ function AppLayout({
1263
+ user,
1264
+ adapter,
1265
+ data,
1266
+ organizationId,
1267
+ apiBaseUrl,
1268
+ useApiNavigation,
1269
+ headerContent,
1270
+ showHeader = true,
1271
+ children
1272
+ }) {
1273
+ const isApiMode = useApiNavigation === true;
1274
+ const navigationApiBaseUrl = apiBaseUrl;
1275
+ return /* @__PURE__ */ jsxRuntime.jsxs(SidebarProvider, { children: [
1276
+ /* @__PURE__ */ jsxRuntime.jsx(
1277
+ AppSidebar,
1278
+ {
1279
+ user,
1280
+ adapter,
1281
+ data: isApiMode ? void 0 : data,
1282
+ organizationId,
1283
+ apiBaseUrl: navigationApiBaseUrl
1284
+ }
1285
+ ),
1286
+ /* @__PURE__ */ jsxRuntime.jsxs(SidebarInset, { children: [
1287
+ showHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-16 shrink-0 items-center gap-2 border-b px-4", children: [
1288
+ /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, {}),
1289
+ headerContent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1290
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-border" }),
1291
+ headerContent
1292
+ ] })
1293
+ ] }),
1294
+ /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex flex-1 flex-col gap-4 p-4 md:p-6", children })
1295
+ ] })
1296
+ ] });
1297
+ }
1247
1298
  function createNextJSAdapter() {
1248
1299
  const NextJSLink2 = ({ href, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href, className, children });
1249
1300
  return {
@@ -1260,31 +1311,12 @@ function createNextJSAdapter() {
1260
1311
  };
1261
1312
  }
1262
1313
 
1314
+ exports.AppLayout = AppLayout;
1263
1315
  exports.AppSidebar = AppSidebar;
1264
1316
  exports.NavMain = NavMain;
1265
1317
  exports.NavUser = NavUser;
1266
- exports.Sidebar = Sidebar;
1267
- exports.SidebarContent = SidebarContent;
1268
- exports.SidebarFooter = SidebarFooter;
1269
- exports.SidebarGroup = SidebarGroup;
1270
- exports.SidebarGroupAction = SidebarGroupAction;
1271
- exports.SidebarGroupContent = SidebarGroupContent;
1272
- exports.SidebarGroupLabel = SidebarGroupLabel;
1273
- exports.SidebarHeader = SidebarHeader;
1274
- exports.SidebarInput = SidebarInput;
1275
1318
  exports.SidebarInset = SidebarInset;
1276
- exports.SidebarMenu = SidebarMenu;
1277
- exports.SidebarMenuAction = SidebarMenuAction;
1278
- exports.SidebarMenuBadge = SidebarMenuBadge;
1279
- exports.SidebarMenuButton = SidebarMenuButton;
1280
- exports.SidebarMenuItem = SidebarMenuItem;
1281
- exports.SidebarMenuSkeleton = SidebarMenuSkeleton;
1282
- exports.SidebarMenuSub = SidebarMenuSub;
1283
- exports.SidebarMenuSubButton = SidebarMenuSubButton;
1284
- exports.SidebarMenuSubItem = SidebarMenuSubItem;
1285
1319
  exports.SidebarProvider = SidebarProvider;
1286
- exports.SidebarRail = SidebarRail;
1287
- exports.SidebarSeparator = SidebarSeparator;
1288
1320
  exports.SidebarTrigger = SidebarTrigger;
1289
1321
  exports.TeamSwitcher = TeamSwitcher;
1290
1322
  exports.createNextJSAdapter = createNextJSAdapter;