najm-kit 2.1.8 → 2.1.9

package/dist/index.d.ts

@@ -489,6 +489,10 @@ interface NPageHeaderProps {
     top?: ReactNode;
     /** Must match the paired NSidebar breakpoint so its hamburger has reserved space. */
     mobileBreakpoint?: NPageHeaderBreakpoint;
+    /** Renders the mobile sidebar trigger inside the header's leading column. */
+    onSidebarOpen?: () => void;
+    sidebarTriggerLabel?: string;
+    sidebarTriggerClassName?: string;
     search?: InputHTMLAttributes<HTMLInputElement> & {
         placeholder?: string;
         ref?: Ref<HTMLInputElement>;
@@ -516,7 +520,7 @@ declare function NPageHeaderTop({ children, className }: PageHeaderSlotProps): r
 declare namespace NPageHeaderTop {
     var displayName: string;
 }
-declare function NPageHeader({ icon: Icon, title, subtitle, actions, compactActions, filters, top, mobileBreakpoint, search, children, className, headerClassName, card, bordered, }: NPageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function NPageHeader({ icon: Icon, title, subtitle, actions, compactActions, filters, top, mobileBreakpoint, onSidebarOpen, sidebarTriggerLabel, sidebarTriggerClassName, search, children, className, headerClassName, card, bordered, }: NPageHeaderProps): react_jsx_runtime.JSX.Element;
 
 type DialogActionMode = "auto" | "dialog" | "content";
 type DialogVariant = "default" | "window";
@@ -3236,6 +3240,11 @@ interface SidebarProps {
     className?: string;
     classNames?: NAppShellClassNames;
     mobileBreakpoint?: 'sm' | 'md' | 'lg';
+    /**
+     * Automatically use the collapsed desktop rail within one Tailwind
+     * breakpoint band. For example, `lg` collapses from 1024px through 1279px.
+     */
+    autoCollapseAt?: 'sm' | 'md' | 'lg' | 'xl';
     mobileOpen?: boolean;
     defaultMobileOpen?: boolean;
     onMobileOpenChange?: (open: boolean) => void;
@@ -3245,6 +3254,10 @@ interface SidebarProps {
     collapseLabel?: string;
     expandLabel?: string;
     hamburgerClassName?: string;
+    /**
+     * Opts into the legacy fixed standalone trigger. Prefer controlling
+     * `mobileOpen` from an NPageHeader via its `onSidebarOpen` prop.
+     */
     showHamburgerButton?: boolean;
     logoIcon?: ComponentType<{
         className?: string;
@@ -3349,7 +3362,7 @@ declare function NSidebarFooter({ children, onSettings, settingsLabel, onLogout,
 
 declare function NSidebarMobile({ open, onOpen, onClose, mobileBreakpoint, width, hamburgerLabel, closeLabel, hamburgerClassName, showHamburgerButton, children, bordered, }: NSidebarMobileProps): react_jsx_runtime.JSX.Element;
 
-declare function NSidebar({ logo, navItems, activePath, isActive, onNavigate, linkComponent, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, showCollapseButton, collapseButtonPosition, showSectionLabels, showSectionIcons, showSectionSeparators, bordered, footer, className, classNames, mobileBreakpoint, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, closeOnNavigate, hamburgerLabel, closeLabel, collapseLabel, expandLabel, hamburgerClassName, showHamburgerButton, logoIcon, logoTitle, logoSubtitle, onLogoClick, onSettings, settingsLabel, onLogout, logoutLabel, widths, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function NSidebar({ logo, navItems, activePath, isActive, onNavigate, linkComponent, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, showCollapseButton, collapseButtonPosition, showSectionLabels, showSectionIcons, showSectionSeparators, bordered, footer, className, classNames, mobileBreakpoint, autoCollapseAt, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, closeOnNavigate, hamburgerLabel, closeLabel, collapseLabel, expandLabel, hamburgerClassName, showHamburgerButton, logoIcon, logoTitle, logoSubtitle, onLogoClick, onSettings, settingsLabel, onLogout, logoutLabel, widths, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 declare function NSidebarItem({ item, activePath, isActive, onNavigate, linkComponent: LinkComponent, collapsed, depth, classNames, }: SidebarItemProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.mjs

@@ -3,7 +3,7 @@ import React__default, { createContext, useContext, useCallback, useEffect, useS
 import { Slot } from '@radix-ui/react-slot';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
-import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, X, XIcon, Search, ChevronRightIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, CheckSquare, FilePlus, FolderPlus, Trash2, Share2, Move, ClipboardPaste, Copy, Scissors, Pencil, Download, Eye, ArrowUpDown, Loader2, ChevronUp, Folder, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, UploadCloud, CheckCircle2, AlertCircle, Star, Globe, Clock, Upload, Plus, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Merge, PanelLeftOpen, PanelLeftClose, Menu, LogOut, Image, ArrowUp, ArrowDown, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, X, XIcon, Menu, Search, ChevronRightIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, CheckSquare, FilePlus, FolderPlus, Trash2, Share2, Move, ClipboardPaste, Copy, Scissors, Pencil, Download, Eye, ArrowUpDown, Loader2, ChevronUp, Folder, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, UploadCloud, CheckCircle2, AlertCircle, Star, Globe, Clock, Upload, Plus, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -2002,21 +2002,24 @@ var responsiveClasses = {
     identity: "sm:col-start-auto sm:row-start-auto sm:justify-self-auto",
     controls: "sm:col-start-auto sm:row-start-auto sm:justify-self-auto",
     fullActions: "sm:flex",
-    compactActions: "sm:hidden"
+    compactActions: "sm:hidden",
+    sidebarTrigger: "sm:hidden"
   },
   md: {
     main: "md:flex md:justify-between md:px-5",
     identity: "md:col-start-auto md:row-start-auto md:justify-self-auto",
     controls: "md:col-start-auto md:row-start-auto md:justify-self-auto",
     fullActions: "md:flex",
-    compactActions: "md:hidden"
+    compactActions: "md:hidden",
+    sidebarTrigger: "md:hidden"
   },
   lg: {
     main: "lg:flex lg:justify-between lg:px-5",
     identity: "lg:col-start-auto lg:row-start-auto lg:justify-self-auto",
     controls: "lg:col-start-auto lg:row-start-auto lg:justify-self-auto",
     fullActions: "lg:flex",
-    compactActions: "lg:hidden"
+    compactActions: "lg:hidden",
+    sidebarTrigger: "lg:hidden"
   }
 };
 function NPageHeader({
@@ -2028,6 +2031,9 @@ function NPageHeader({
   filters,
   top,
   mobileBreakpoint = "md",
+  onSidebarOpen,
+  sidebarTriggerLabel = "Open sidebar",
+  sidebarTriggerClassName,
   search,
   children,
   className,
@@ -2081,6 +2087,23 @@ function NPageHeader({
               headerClassName
             ),
             children: [
+              onSidebarOpen && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: onSidebarOpen,
+                  "aria-label": sidebarTriggerLabel,
+                  "data-slot": "page-header-sidebar-trigger",
+                  className: cn(
+                    "col-start-1 row-start-1 justify-self-start",
+                    breakpointClasses.sidebarTrigger,
+                    sidebarTriggerClassName
+                  ),
+                  children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+                }
+              ),
               /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -11000,6 +11023,27 @@ function buildGroups(items) {
   }
   return groups;
 }
+var autoCollapseQueries = {
+  sm: "(min-width: 640px) and (max-width: 767.98px)",
+  md: "(min-width: 768px) and (max-width: 1023.98px)",
+  lg: "(min-width: 1024px) and (max-width: 1279.98px)",
+  xl: "(min-width: 1280px) and (max-width: 1535.98px)"
+};
+function useAutoCollapsed(breakpoint) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (!breakpoint || typeof window === "undefined") {
+      setMatches(false);
+      return;
+    }
+    const mediaQuery = window.matchMedia(autoCollapseQueries[breakpoint]);
+    const update = () => setMatches(mediaQuery.matches);
+    update();
+    mediaQuery.addEventListener?.("change", update);
+    return () => mediaQuery.removeEventListener?.("change", update);
+  }, [breakpoint]);
+  return matches;
+}
 function NSidebar({
   logo,
   navItems = [],
@@ -11020,6 +11064,7 @@ function NSidebar({
   className,
   classNames,
   mobileBreakpoint = "md",
+  autoCollapseAt,
   mobileOpen: mobileOpenProp,
   defaultMobileOpen = false,
   onMobileOpenChange,
@@ -11029,7 +11074,7 @@ function NSidebar({
   collapseLabel = "Collapse",
   expandLabel = "Expand",
   hamburgerClassName,
-  showHamburgerButton = true,
+  showHamburgerButton = false,
   logoIcon,
   logoTitle,
   logoSubtitle,
@@ -11046,6 +11091,8 @@ function NSidebar({
   const isControlled = mobileOpenProp !== void 0;
   const mobileOpen = isControlled ? mobileOpenProp : _mobileOpen;
   const collapsed = collapsedProp ?? _collapsed;
+  const autoCollapsed = useAutoCollapsed(autoCollapseAt);
+  const desktopCollapsed = collapsed || autoCollapsed;
   const setMobileOpen = (open) => {
     if (!isControlled) _setMobileOpen(open);
     onMobileOpenChange?.(open);
@@ -11106,21 +11153,23 @@ function NSidebar({
   const mobileWidth = widths?.mobile ?? expandedWidth;
   const railVar = typeof collapsedWidth === "number" ? `${collapsedWidth}px` : collapsedWidth;
   const sidebarEdgeWidth = bordered === false ? "0px" : recipe?.borderWidth ?? "var(--border-width, 1px)";
-  const showEdgeCollapse = showCollapseButton && collapseButtonPosition === "edge";
-  const showRailCollapse = showCollapseButton && collapseButtonPosition === "rail";
+  const showEdgeCollapse = showCollapseButton && collapseButtonPosition === "edge" && !autoCollapsed;
+  const showRailCollapse = showCollapseButton && collapseButtonPosition === "rail" && !autoCollapsed;
   const effectiveShowSectionLabels = showSectionLabels ?? recipe?.showSectionLabels ?? true;
   const effectiveShowSectionSeparators = showSectionSeparators ?? recipe?.showSectionSeparators ?? false;
   const contentSlot = recipe?.slots?.content;
   const contentStyle = contentSlot?.paddingTop ? { paddingTop: contentSlot.paddingTop } : void 0;
-  const defaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed }) : null;
-  const headerContent = logo ?? defaultLogoContent;
+  const desktopDefaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed: desktopCollapsed }) : null;
+  const mobileDefaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed: false }) : null;
+  const desktopHeaderContent = logo ?? desktopDefaultLogoContent;
+  const mobileHeaderContent = logo ?? mobileDefaultLogoContent;
   const contentProps = {
     groups,
     activePath,
     isActive,
     onNavigate: handleNavigate,
     linkComponent,
-    collapsed,
+    collapsed: desktopCollapsed,
     showSectionLabels: effectiveShowSectionLabels,
     showSectionIcons,
     showSectionSeparators: effectiveShowSectionSeparators,
@@ -11133,22 +11182,22 @@ function NSidebar({
     settingsLabel,
     onLogout,
     logoutLabel,
-    showCollapseButton: showCollapseButton && collapseButtonPosition === "footer",
-    collapsed,
+    showCollapseButton: showCollapseButton && collapseButtonPosition === "footer" && !autoCollapsed,
+    collapsed: desktopCollapsed,
     onToggleCollapsed: handleToggleCollapsed,
     collapseLabel,
     expandLabel,
     classNames
   };
   const sidebarInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    headerContent && /* @__PURE__ */ jsx(NSidebarHeader, { collapsed, classNames, children: headerContent }),
+    desktopHeaderContent && /* @__PURE__ */ jsx(NSidebarHeader, { collapsed: desktopCollapsed, classNames, children: desktopHeaderContent }),
     /* @__PURE__ */ jsx(NSidebarContent, { ...contentProps }),
     /* @__PURE__ */ jsx(NSidebarFooter, { ...footerProps })
   ] });
   const mobileInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    headerContent && /* @__PURE__ */ jsx(NSidebarHeader, { collapsed, classNames, children: headerContent }),
-    /* @__PURE__ */ jsx(NSidebarContent, { ...contentProps }),
-    /* @__PURE__ */ jsx(NSidebarFooter, { ...footerProps, isMobile: true })
+    mobileHeaderContent && /* @__PURE__ */ jsx(NSidebarHeader, { collapsed: false, classNames, children: mobileHeaderContent }),
+    /* @__PURE__ */ jsx(NSidebarContent, { ...contentProps, collapsed: false }),
+    /* @__PURE__ */ jsx(NSidebarFooter, { ...footerProps, collapsed: false, isMobile: true })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -11171,6 +11220,8 @@ function NSidebar({
       "aside",
       {
         "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
+        "data-collapsed": desktopCollapsed ? "true" : "false",
+        "data-auto-collapsed": autoCollapsed ? "true" : void 0,
         className: cn(
           "relative z-10 flex flex-col h-full bg-sidebar text-sidebar-foreground transition-all duration-200",
           desktopClass,
@@ -11179,7 +11230,7 @@ function NSidebar({
           className
         ),
         style: {
-          width: collapsed ? collapsedWidth : expandedWidth,
+          width: desktopCollapsed ? collapsedWidth : expandedWidth,
           ["--rail"]: railVar,
           ["--sidebar-edge-width"]: sidebarEdgeWidth,
           ...bordered !== false && recipe?.borderWidth ? { borderRightWidth: recipe.borderWidth } : {}
@@ -11190,8 +11241,8 @@ function NSidebar({
             "button",
             {
               type: "button",
-              "aria-label": collapsed ? expandLabel : collapseLabel,
-              title: collapsed ? expandLabel : collapseLabel,
+              "aria-label": desktopCollapsed ? expandLabel : collapseLabel,
+              title: desktopCollapsed ? expandLabel : collapseLabel,
               "data-dragging": railDragging ? "true" : void 0,
               onPointerDown: handleRailPointerDown,
               onClick: handleRailClick,
@@ -11210,7 +11261,7 @@ function NSidebar({
               "aria-label": collapsed ? expandLabel : collapseLabel,
               title: collapsed ? expandLabel : collapseLabel,
               className: "absolute right-0 top-7 z-20 flex size-6 -translate-y-1/2 translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-              children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
+              children: desktopCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
             }
           )
         ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",