@nordmanai/nif 0.2.11 → 0.2.12

package/dist/ui/components/nm-sidebar/nm-sidebar.d.ts

@@ -30,6 +30,8 @@ type SidebarContextValue = {
     setCollapsible: (mode: NmSidebarCollapsible) => void;
 };
 /** The sidebar's state: expanded or collapsed, peeking, on a desktop or a phone, and the function that toggles it. */
+/** The sidebar context when there is one. For a part that lives in a bar shared by pages with and without a sidebar. */
+export declare function useOptionalSidebar(): SidebarContextValue | null;
 export declare function useSidebar(): SidebarContextValue;
 export type NmSidebarProviderProps = ComponentProps<'div'> & {
     defaultOpen?: boolean;
@@ -73,7 +75,9 @@ export declare function NmSidebarRail({ className, label, ...props }: ComponentP
     label?: string;
 }): ReactNode;
 /** The main area beside the sidebar. With the inset variant it is the raised card. */
-export declare function NmSidebarInset({ className, ...props }: ComponentProps<'main'>): ReactNode;
+export declare function NmSidebarInset({ className, render, ref, ...props }: ComponentProps<'main'> & {
+    render?: RenderProp;
+}): ReactNode;
 /** A search field in the sidebar. The NIF Input. */
 export declare function NmSidebarInput({ className, ...props }: ComponentProps<typeof NmInput>): ReactNode;
 /** Sticky at the top: a brand, a title or a workspace switcher, and the toggle when the sidebar collapses to it. */
@@ -122,10 +126,12 @@ export declare function NmSidebarMenuSkeleton({ className, showIcon, ...props }:
 /** Rows under a row, indented by a line. */
 export declare function NmSidebarMenuSub({ className, ...props }: ComponentProps<'ul'>): ReactNode;
 export declare function NmSidebarMenuSubItem({ className, ...props }: ComponentProps<'li'>): ReactNode;
-export declare function NmSidebarMenuSubButton({ render, size, isActive, className, ref, ...props }: ComponentProps<'a'> & {
+export declare function NmSidebarMenuSubButton({ render, size, isActive, disabled, className, ref, ...props }: ComponentProps<'a'> & {
     render?: RenderProp;
     size?: Exclude<NmSidebarButtonSize, 'lg'>;
     isActive?: boolean;
+    /** Not available. A link gets aria-disabled; a rendered button gets disabled. */
+    disabled?: boolean;
 }): ReactNode;
 /** A chevron at the end of a row. In a collapsible row it points right and turns down when the row is open. With `menu` it points down, for a row that opens a menu. */
 export declare function NmSidebarChevron({ className, menu, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "Nordman Interface Framework: the one UI and UX system for every Nordman product. Base UI, in the shadcn composition, styled by NIF tokens.",
   "type": "module",
   "sideEffects": [

package/registry/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.11",
+  "version": "0.2.12",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",

package/registry/ui/components/nm-sidebar/nm-sidebar.css

@@ -80,7 +80,8 @@
      The column keeps its collapsed width in the flow, and the inner panel floats out over the page. */
   .nm-sidebar[data-peek] {
     overflow: visible;
-    z-index: 1;
+    /* Over the main area and its top bar, under menus. */
+    z-index: var(--nm-rail-z);
   }
   .nm-sidebar[data-mode='offcanvas'][data-peek] {
     width: 0;

package/registry/ui/components/nm-sidebar/nm-sidebar.tsx

@@ -63,6 +63,10 @@ const SidebarContext = createContext<SidebarContextValue | null>(null);
 const PEEK_KEEPS = '[data-slot="sidebar"], [data-slot="sidebar-trigger"], [data-slot="tooltip-content"], [role="menu"], [role="dialog"]';
 
 /** The sidebar's state: expanded or collapsed, peeking, on a desktop or a phone, and the function that toggles it. */
+/** The sidebar context when there is one. For a part that lives in a bar shared by pages with and without a sidebar. */
+export function useOptionalSidebar(): SidebarContextValue | null {
+  return useContext(SidebarContext);
+}
 export function useSidebar(): SidebarContextValue {
   const context = useContext(SidebarContext);
   if (!context) {
@@ -345,8 +349,13 @@ export function NmSidebarRail({ className, label = 'Toggle sidebar', ...props }:
 }
 
 /** The main area beside the sidebar. With the inset variant it is the raised card. */
-export function NmSidebarInset({ className, ...props }: ComponentProps<'main'>): ReactNode {
-  return <main data-slot="sidebar-inset" className={nmClass('nm-sidebar__inset', className)} {...props} />;
+export function NmSidebarInset({ className, render, ref, ...props }: ComponentProps<'main'> & { render?: RenderProp }): ReactNode {
+  return useRender({
+    render,
+    ref,
+    defaultTagName: 'main',
+    props: { 'data-slot': 'sidebar-inset', className: nmClass('nm-sidebar__inset', className), ...props },
+  });
 }
 
 /** A search field in the sidebar. The NIF Input. */
@@ -507,10 +516,17 @@ export function NmSidebarMenuSubButton({
   render,
   size = 'default',
   isActive = false,
+  disabled = false,
   className,
   ref,
   ...props
-}: ComponentProps<'a'> & { render?: RenderProp; size?: Exclude<NmSidebarButtonSize, 'lg'>; isActive?: boolean }): ReactNode {
+}: ComponentProps<'a'> & {
+  render?: RenderProp;
+  size?: Exclude<NmSidebarButtonSize, 'lg'>;
+  isActive?: boolean;
+  /** Not available. A link gets aria-disabled; a rendered button gets disabled. */
+  disabled?: boolean;
+}): ReactNode {
   return useRender({
     render,
     ref,
@@ -519,6 +535,9 @@ export function NmSidebarMenuSubButton({
       'data-slot': 'sidebar-menu-sub-button',
       'data-size': size,
       'data-active': isActive ? '' : undefined,
+      'data-disabled': disabled ? '' : undefined,
+      'aria-disabled': disabled ? true : undefined,
+      disabled: disabled ? true : undefined,
       'aria-current': isActive ? 'page' : undefined,
       className: nmClass('nm-sidebar__menu-sub-button', className),
       ...props,