@logickernel/frame 0.4.0 → 0.5.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 +1 -45
  3. package/dist/index.d.ts +1 -45
  4. package/dist/index.js +0 -20
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +1 -1
  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
@@ -87,8 +84,6 @@ interface FrameworkAdapter {
87
84
  }) => Promise<void>;
88
85
  }
89
86
 
90
- declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
91
-
92
87
  type SidebarContext = {
93
88
  state: "expanded" | "collapsed";
94
89
  open: boolean;
@@ -111,46 +106,7 @@ declare const Sidebar: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttri
111
106
  collapsible?: "offcanvas" | "icon" | "none";
112
107
  }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
113
108
  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
109
  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
110
 
155
111
  /**
156
112
  * Props mode: Pass data (organizations + navigationItems)
@@ -233,4 +189,4 @@ declare function getIconComponent(icon?: string | LucideIcon): LucideIcon | unde
233
189
  */
234
190
  declare function createNextJSAdapter(): FrameworkAdapter;
235
191
 
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 };
192
+ export { AppSidebar, 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
@@ -87,8 +84,6 @@ interface FrameworkAdapter {
87
84
  }) => Promise<void>;
88
85
  }
89
86
 
90
- declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
91
-
92
87
  type SidebarContext = {
93
88
  state: "expanded" | "collapsed";
94
89
  open: boolean;
@@ -111,46 +106,7 @@ declare const Sidebar: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttri
111
106
  collapsible?: "offcanvas" | "icon" | "none";
112
107
  }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
113
108
  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
109
  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
110
 
155
111
  /**
156
112
  * Props mode: Pass data (organizations + navigationItems)
@@ -233,4 +189,4 @@ declare function getIconComponent(icon?: string | LucideIcon): LucideIcon | unde
233
189
  */
234
190
  declare function createNextJSAdapter(): FrameworkAdapter;
235
191
 
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 };
192
+ export { AppSidebar, 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
@@ -1263,28 +1263,8 @@ function createNextJSAdapter() {
1263
1263
  exports.AppSidebar = AppSidebar;
1264
1264
  exports.NavMain = NavMain;
1265
1265
  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
1266
  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
1267
  exports.SidebarProvider = SidebarProvider;
1286
- exports.SidebarRail = SidebarRail;
1287
- exports.SidebarSeparator = SidebarSeparator;
1288
1268
  exports.SidebarTrigger = SidebarTrigger;
1289
1269
  exports.TeamSwitcher = TeamSwitcher;
1290
1270
  exports.createNextJSAdapter = createNextJSAdapter;