@j3m-quantum/ui 2.1.1 → 2.1.5

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 (9) hide show
  1. package/dist/cli/index.js +56 -26
  2. package/dist/cli/postinstall.js +22 -15
  3. package/dist/index.cjs +6376 -4548
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +361 -8
  6. package/dist/index.d.ts +361 -8
  7. package/dist/index.js +6375 -4565
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/cli/index.js CHANGED
@@ -217,12 +217,27 @@ Map, MapTileLayer, MapMarker, MapPopup, MapTooltip, MapZoomControl
217
217
  - Don't add custom CSS tokens - the package provides everything
218
218
  - Don't use arbitrary color values like bg-[#F58446] - use bg-primary
219
219
 
220
- ## Complete Dashboard Example
220
+ ## Complete Dashboard Example (Header on Top)
221
+
222
+ The recommended layout places the header at the top spanning full width,
223
+ with the sidebar positioned below it:
224
+
225
+ \`\`\`
226
+ \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
227
+ \u2502 SiteHeader \u2502 \u2190 Full width, sticky
228
+ \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
229
+ \u2502 \u2502 \u2502
230
+ \u2502 Sidebar \u2502 SidebarInset \u2502
231
+ \u2502 \u2502 (content) \u2502
232
+ \u2502 \u2502 \u2502
233
+ \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
234
+ \`\`\`
221
235
 
222
236
  \`\`\`tsx
223
237
  import {
224
238
  SidebarProvider, Sidebar, SidebarContent, SidebarFooter, SidebarInset, SidebarRail,
225
- SiteHeader, SidebarTrigger, NavMain, NavUser, NavSecondary, type NavItem
239
+ SiteHeader, SidebarTrigger, NavMain, NavUser, NavSecondary,
240
+ SIDEBAR_BELOW_HEADER_CLASS, type NavItem
226
241
  } from '@j3m-quantum/ui'
227
242
  import { Home, Settings, LifeBuoy, Send } from 'lucide-react'
228
243
 
@@ -233,36 +248,51 @@ const navItems: NavItem[] = [
233
248
 
234
249
  function App() {
235
250
  return (
236
- <div className="j3m-app-bg min-h-screen">
237
- <SidebarProvider>
238
- <Sidebar collapsible="icon">
239
- <SidebarContent>
240
- <NavMain items={navItems} />
241
- </SidebarContent>
242
- <SidebarFooter>
243
- <NavSecondary items={[
244
- { title: "Support", url: "#", icon: LifeBuoy },
245
- { title: "Feedback", url: "#", icon: Send },
246
- ]} />
247
- <NavUser user={{ name: "John Doe", email: "john@example.com", avatar: "" }} />
248
- </SidebarFooter>
249
- <SidebarRail />
250
- </Sidebar>
251
- <SidebarInset>
252
- <SiteHeader
253
- trigger={<SidebarTrigger />}
254
- breadcrumbs={[{ label: "Dashboard" }]}
255
- />
256
- <main className="p-4">
257
- {/* Your content here */}
258
- </main>
259
- </SidebarInset>
251
+ <div
252
+ className="j3m-app-bg min-h-screen"
253
+ style={{ "--header-height": "3.5rem" } as React.CSSProperties}
254
+ >
255
+ <SidebarProvider className="flex flex-col min-h-screen">
256
+ {/* Header FIRST - spans full width */}
257
+ <SiteHeader
258
+ trigger={<SidebarTrigger />}
259
+ breadcrumbs={[{ label: "Dashboard" }]}
260
+ />
261
+
262
+ {/* Sidebar + Content below header */}
263
+ <div className="flex flex-1">
264
+ <Sidebar collapsible="icon" className={SIDEBAR_BELOW_HEADER_CLASS}>
265
+ <SidebarContent>
266
+ <NavMain items={navItems} />
267
+ </SidebarContent>
268
+ <SidebarFooter>
269
+ <NavSecondary items={[
270
+ { title: "Support", url: "#", icon: LifeBuoy },
271
+ { title: "Feedback", url: "#", icon: Send },
272
+ ]} />
273
+ <NavUser user={{ name: "John Doe", email: "john@example.com", avatar: "" }} />
274
+ </SidebarFooter>
275
+ <SidebarRail />
276
+ </Sidebar>
277
+ <SidebarInset>
278
+ <main className="p-4">
279
+ {/* Your content here */}
280
+ </main>
281
+ </SidebarInset>
282
+ </div>
260
283
  </SidebarProvider>
261
284
  </div>
262
285
  )
263
286
  }
264
287
  \`\`\`
265
288
 
289
+ Key points:
290
+ - Set \`--header-height: 3.5rem\` on the wrapper div
291
+ - \`SidebarProvider\` needs \`className="flex flex-col min-h-screen"\`
292
+ - \`SiteHeader\` comes FIRST (before the sidebar)
293
+ - Wrap Sidebar + SidebarInset in \`<div className="flex flex-1">\`
294
+ - Add \`SIDEBAR_BELOW_HEADER_CLASS\` to Sidebar (or use: \`className="top-[var(--header-height)] h-[calc(100svh-var(--header-height))]!"\`)
295
+
266
296
  ## Recommended Prompts for AI
267
297
 
268
298
  **Good prompts:**
package/dist/cli/postinstall.js CHANGED
@@ -7,27 +7,34 @@ if (!isCI) {
7
7
  \u2502 \u{1F3A8} @j3m-quantum/ui installed successfully! \u2502
8
8
  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
9
9
 
10
- \u{1F4E6} Quick Start - Dashboard Layout:
10
+ \u{1F4E6} Quick Start - Dashboard Layout (Header on Top):
11
11
  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
12
12
  import {
13
13
  SidebarProvider, Sidebar, SidebarContent, SidebarFooter, SidebarInset,
14
- SiteHeader, SidebarTrigger, NavMain, NavUser, type NavItem
14
+ SiteHeader, SidebarTrigger, NavMain, NavUser, SIDEBAR_BELOW_HEADER_CLASS
15
15
  } from '@j3m-quantum/ui'
16
16
 
17
- <SidebarProvider>
18
- <Sidebar collapsible="icon">
19
- <SidebarContent>
20
- <NavMain items={[{ title: "Home", url: "/", icon: Home, isActive: true }]} />
21
- </SidebarContent>
22
- <SidebarFooter>
23
- <NavUser user={{ name: "User", email: "user@example.com", avatar: "" }} />
24
- </SidebarFooter>
25
- </Sidebar>
26
- <SidebarInset>
17
+ <div className="j3m-app-bg min-h-screen" style={{ "--header-height": "3.5rem" }}>
18
+ <SidebarProvider className="flex flex-col min-h-screen">
19
+ {/* Header FIRST - spans full width */}
27
20
  <SiteHeader trigger={<SidebarTrigger />} breadcrumbs={[{ label: "Home" }]} />
28
- <main className="p-4">{/* content */}</main>
29
- </SidebarInset>
30
- </SidebarProvider>
21
+
22
+ {/* Sidebar + Content below header */}
23
+ <div className="flex flex-1">
24
+ <Sidebar collapsible="icon" className={SIDEBAR_BELOW_HEADER_CLASS}>
25
+ <SidebarContent>
26
+ <NavMain items={[{ title: "Home", url: "/", icon: Home, isActive: true }]} />
27
+ </SidebarContent>
28
+ <SidebarFooter>
29
+ <NavUser user={{ name: "User", email: "user@example.com", avatar: "" }} />
30
+ </SidebarFooter>
31
+ </Sidebar>
32
+ <SidebarInset>
33
+ <main className="p-4">{/* content */}</main>
34
+ </SidebarInset>
35
+ </div>
36
+ </SidebarProvider>
37
+ </div>
31
38
  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
32
39
 
33
40
  \u26A1 IMPORTANT: Run this to set up AI assistance: