@nordmanai/nif 0.2.13 → 0.2.14

package/dist/ui/components/nm-dropdown/nm-dropdown-item.d.ts

@@ -13,6 +13,8 @@ export type NmDropdownItem = {
     danger?: boolean;
     disabled?: boolean;
     checked?: boolean;
+    /** The row that is the current choice in a list of alternatives. Shown by fill, not by a mark; for a toggle use `checked`. */
+    current?: boolean;
     /** Publish row state. The row stays inactive while busy or live. */
     mark?: 'idle' | 'busy' | 'live';
     children?: readonly NmDropdownItem[];

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

@@ -1,6 +1,6 @@
 import { type ReactNode, type Ref } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
-import { NM_DROPDOWN_ALIGN, NM_DROPDOWN_REVEAL, NM_DROPDOWN_TONE, NM_DROPDOWN_TRIGGER } from '../../config/nm-dropdown.ts';
+import { NM_DROPDOWN_ALIGN, NM_DROPDOWN_REVEAL, NM_DROPDOWN_SIDE, NM_DROPDOWN_TONE, NM_DROPDOWN_TRIGGER } from '../../config/nm-dropdown.ts';
 import type { NmDropdownItem } from './nm-dropdown-item';
 export type { NmDropdownItem };
 export type NmDropdownProps = {
@@ -11,6 +11,7 @@ export type NmDropdownProps = {
     trigger?: (typeof NM_DROPDOWN_TRIGGER)[keyof typeof NM_DROPDOWN_TRIGGER];
     tone?: (typeof NM_DROPDOWN_TONE)[keyof typeof NM_DROPDOWN_TONE];
     align?: (typeof NM_DROPDOWN_ALIGN)[keyof typeof NM_DROPDOWN_ALIGN];
+    side?: (typeof NM_DROPDOWN_SIDE)[keyof typeof NM_DROPDOWN_SIDE];
     icon?: NmIconId;
     imageSrc?: string;
     displayLabel?: string;
@@ -22,6 +23,8 @@ export type NmDropdownProps = {
     /** `hover` hides the trigger until the host with `data-nm-menu` is hovered or focused. */
     reveal?: (typeof NM_DROPDOWN_REVEAL)[keyof typeof NM_DROPDOWN_REVEAL];
     open?: boolean;
+    /** Opens when the trigger is hovered, as well as on click. */
+    openOnHover?: boolean;
     triggerClassName?: string;
     triggerRef?: Ref<HTMLButtonElement>;
     onOpenChange?: (open: boolean) => void;

package/dist/ui/components/nm-dropdown-menu/nm-dropdown-menu.d.ts

@@ -2,7 +2,8 @@ import { type ComponentProps } from 'react';
 import { Menu as MenuPrimitive } from '../../lib/nm-motion.ts';
 import type { NmDropdownItem } from '../nm-dropdown/nm-dropdown-item.ts';
 /** Base UI Menu, in the shadcn dropdown-menu composition, styled by NIF tokens. */
-export declare function NmDropdownMenu(props: MenuPrimitive.Root.Props): import("react").JSX.Element;
+export type NmDropdownMenuProps = MenuPrimitive.Root.Props;
+export declare function NmDropdownMenu(props: NmDropdownMenuProps): import("react").JSX.Element;
 export declare function NmDropdownMenuTrigger(props: MenuPrimitive.Trigger.Props): import("react").JSX.Element;
 type PositionProps = Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
 export declare function NmDropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & PositionProps): import("react").JSX.Element;
@@ -29,7 +30,7 @@ export declare function NmDropdownMenuText({ title, description }: {
 export declare function NmDropdownMenuDot({ status }: {
     status?: 'ok' | 'error';
 }): import("react").JSX.Element;
-/** A list of NmDropdownItem as animated menu rows: branches become submenus, `checked` rows keep a mark. */
+/** A list of NmDropdownItem as animated menu rows: branches become submenus, `checked` rows keep a mark, the `current` row (or the `selected` id) is filled. */
 export declare function NmDropdownMenuItems({ items, selected, onSelect, onBranchExpand, }: {
     items: readonly NmDropdownItem[];
     selected?: string | null;

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

@@ -2,6 +2,7 @@ import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { type NmSidebarButtonSize, type NmSidebarButtonVariant, type NmSidebarCollapsible, type NmSidebarSide, type NmSidebarState, type NmSidebarVariant } from '../../config/nm-sidebar.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NmChip } from '../nm-chip/nm-chip.tsx';
+import { type NmDropdownMenuProps } from '../nm-dropdown-menu/nm-dropdown-menu.tsx';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 import { NmInput } from '../nm-input/nm-input.tsx';
 import { NmSeparator } from '../nm-separator/nm-separator.tsx';
@@ -30,6 +31,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. */
+/** Whether the sidebar is in view: open or peeking on a desktop, the drawer open on a phone. */
+export declare function useSidebarVisible(): boolean;
 /** 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;
@@ -112,6 +115,12 @@ export declare function NmSidebarMenuButton({ render, isActive, variant, size, t
 export declare function NmSidebarMenuAction({ className, showOnHover, ...props }: ComponentProps<typeof NmSmallIconButton> & {
     showOnHover?: boolean;
 }): ReactNode;
+/** Several actions at the end of a row, such as new and more. They reveal together when `showOnHover`. */
+export declare function NmSidebarMenuActions({ className, showOnHover, ...props }: ComponentProps<'div'> & {
+    showOnHover?: boolean;
+}): ReactNode;
+/** A row of controls in the header or footer, such as a primary button and an icon button, spaced apart. */
+export declare function NmSidebarBar({ className, ...props }: ComponentProps<'div'>): ReactNode;
 /** A count or a short word at the end of a row. The NIF Chip, small. */
 export declare function NmSidebarMenuBadge({ className, ...props }: ComponentProps<typeof NmChip>): ReactNode;
 /** Two lines in a row, such as a name and a plan in the footer. For a large menu button. */
@@ -137,4 +146,10 @@ export declare function NmSidebarMenuSubButton({ render, size, isActive, disable
 export declare function NmSidebarChevron({ className, menu, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & {
     menu?: boolean;
 }): ReactNode;
+/**
+ * A dropdown menu opened from the sidebar. It closes the moment the sidebar goes out of view
+ * (collapsed, a peek that ended, the drawer closed), so no menu outlives the panel it came from.
+ * While it is open the pointer may rest on it without ending a peek.
+ */
+export declare function NmSidebarDropdownMenu({ open: openProp, onOpenChange, ...props }: NmDropdownMenuProps): import("react").JSX.Element;
 export {};

package/dist/ui/config/nm-dropdown.d.ts

@@ -47,6 +47,13 @@ export declare const NM_DROPDOWN_ALIGN: {
     /** Match the hosting `.nm-rail__row` pill width and left edge. */
     readonly row: 'row';
 };
+/** Which side of the trigger the menu opens on. `right` for a menu that must not cover a side panel's rows. */
+export declare const NM_DROPDOWN_SIDE: {
+    readonly bottom: 'bottom';
+    readonly top: 'top';
+    readonly right: 'right';
+    readonly left: 'left';
+};
 /** Icon menus stay hidden until the host row or field is hovered or focused. */
 export declare const NM_DROPDOWN_REVEAL: {
     readonly hover: 'hover';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "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

@@ -5013,6 +5013,10 @@
         "components/nm-chip/nm-chip.tsx",
         "components/nm-drawer/nm-drawer.css",
         "components/nm-drawer/nm-drawer.tsx",
+        "components/nm-dropdown-menu/nm-dropdown-menu.css",
+        "components/nm-dropdown-menu/nm-dropdown-menu.tsx",
+        "components/nm-dropdown/nm-dropdown-item.ts",
+        "components/nm-dropdown/nm-dropdown.css",
         "components/nm-icon/animated/activity.tsx",
         "components/nm-icon/animated/archive.tsx",
         "components/nm-icon/animated/arrow-down.tsx",
@@ -5178,6 +5182,8 @@
       "uses": [
         "chip",
         "drawer",
+        "dropdown",
+        "dropdown-menu",
         "icon",
         "input",
         "kbd",

package/registry/ui/components/nm-dropdown/nm-dropdown-item.ts

@@ -14,6 +14,8 @@ export type NmDropdownItem = {
   danger?: boolean;
   disabled?: boolean;
   checked?: boolean;
+  /** The row that is the current choice in a list of alternatives. Shown by fill, not by a mark; for a toggle use `checked`. */
+  current?: boolean;
   /** Publish row state. The row stays inactive while busy or live. */
   mark?: 'idle' | 'busy' | 'live';
   children?: readonly NmDropdownItem[];

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

@@ -4,6 +4,7 @@ import {
   NM_DROPDOWN_ALIGN,
   NM_DROPDOWN_CLASSES,
   NM_DROPDOWN_REVEAL,
+  NM_DROPDOWN_SIDE,
   NM_DROPDOWN_TONE,
   NM_DROPDOWN_TRIGGER,
 } from '../../config/nm-dropdown.ts';
@@ -46,6 +47,7 @@ export type NmDropdownProps = {
   trigger?: (typeof NM_DROPDOWN_TRIGGER)[keyof typeof NM_DROPDOWN_TRIGGER];
   tone?: (typeof NM_DROPDOWN_TONE)[keyof typeof NM_DROPDOWN_TONE];
   align?: (typeof NM_DROPDOWN_ALIGN)[keyof typeof NM_DROPDOWN_ALIGN];
+  side?: (typeof NM_DROPDOWN_SIDE)[keyof typeof NM_DROPDOWN_SIDE];
   icon?: NmIconId;
   imageSrc?: string;
   displayLabel?: string;
@@ -57,6 +59,8 @@ export type NmDropdownProps = {
   /** `hover` hides the trigger until the host with `data-nm-menu` is hovered or focused. */
   reveal?: (typeof NM_DROPDOWN_REVEAL)[keyof typeof NM_DROPDOWN_REVEAL];
   open?: boolean;
+  /** Opens when the trigger is hovered, as well as on click. */
+  openOnHover?: boolean;
   triggerClassName?: string;
   triggerRef?: Ref<HTMLButtonElement>;
   onOpenChange?: (open: boolean) => void;
@@ -173,8 +177,8 @@ export function NmDropdown(props: NmDropdownProps): ReactNode {
       data-reveal={props.reveal}
     >
       <NmDropdownMenu open={open} onOpenChange={setOpen}>
-        <NmDropdownMenuTrigger render={triggerElement} />
-        <NmDropdownMenuContent align={props.align === NM_DROPDOWN_ALIGN.end ? 'end' : 'start'}>
+        <NmDropdownMenuTrigger render={triggerElement} openOnHover={props.openOnHover} />
+        <NmDropdownMenuContent align={props.align === NM_DROPDOWN_ALIGN.end ? 'end' : 'start'} side={props.side}>
           <NmDropdownMenuItems
             items={items}
             selected={props.selected}

package/registry/ui/components/nm-dropdown-menu/nm-dropdown-menu.css

@@ -70,6 +70,17 @@
     background: var(--nm-line);
   }
 
+  .nm-menu__item[data-current] {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+  .nm-menu__item[data-current] .nm-icon {
+    color: var(--nm-fg);
+  }
+  .nm-menu__item[data-current]:hover,
+  .nm-menu__item[data-current][data-highlighted] {
+    background: var(--nm-raised);
+  }
   .nm-menu__item[data-disabled] {
     pointer-events: none;
     opacity: 0.5;

package/registry/ui/components/nm-dropdown-menu/nm-dropdown-menu.tsx

@@ -8,7 +8,9 @@ import type { NmDropdownItem } from '../nm-dropdown/nm-dropdown-item.ts';
 const InGroup = createContext(false);
 
 /** Base UI Menu, in the shadcn dropdown-menu composition, styled by NIF tokens. */
-export function NmDropdownMenu(props: MenuPrimitive.Root.Props) {
+export type NmDropdownMenuProps = MenuPrimitive.Root.Props;
+
+export function NmDropdownMenu(props: NmDropdownMenuProps) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
@@ -150,7 +152,7 @@ function itemBody(item: NmDropdownItem) {
   );
 }
 
-/** A list of NmDropdownItem as animated menu rows: branches become submenus, `checked` rows keep a mark. */
+/** A list of NmDropdownItem as animated menu rows: branches become submenus, `checked` rows keep a mark, the `current` row (or the `selected` id) is filled. */
 export function NmDropdownMenuItems({
   items,
   selected,
@@ -178,7 +180,15 @@ export function NmDropdownMenuItems({
             </NmDropdownMenuSub>
           );
         }
-        const checked = item.checked ?? (selected != null ? item.id === selected : undefined);
+        const current = item.current === true || (selected != null && item.id === selected);
+        if (current) {
+          return (
+            <NmDropdownMenuItem key={item.id} data-current="" aria-current="true" disabled={item.disabled} onClick={() => onSelect?.(item.id)}>
+              {itemBody(item)}
+            </NmDropdownMenuItem>
+          );
+        }
+        const checked = item.checked;
         if (checked !== undefined) {
           return (
             <NmDropdownMenuCheckboxItem key={item.id} checked={checked} disabled={item.disabled} onClick={() => onSelect?.(item.id)}>

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

@@ -432,6 +432,41 @@
   .nm-sidebar__menu-item:has(> .nm-sidebar__menu-action) > .nm-sidebar__menu-button {
     padding-inline-end: var(--nm-icon-control);
   }
+  .nm-sidebar__menu-item:has(> .nm-sidebar__menu-actions) > .nm-sidebar__menu-button {
+    padding-inline-end: calc(var(--nm-icon-control) * 2);
+  }
+  /* A group of actions at the end of a row. Its actions sit in flow inside it; the group takes the row's end. */
+  .nm-sidebar__menu-actions {
+    position: absolute;
+    inset-inline-end: var(--nm-space-4);
+    top: calc(50% - (var(--nm-icon-button) + var(--nm-space-6) * 2) / 2);
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-2);
+    transition: opacity var(--reveal) var(--ease);
+  }
+  .nm-sidebar__menu-actions > .nm-sidebar__menu-action,
+  .nm-sidebar__menu-actions .nm-dropdown {
+    position: static;
+  }
+  .nm-sidebar__menu-actions[data-show-on-hover] {
+    opacity: 0;
+  }
+  .nm-sidebar__menu-item:hover > .nm-sidebar__menu-actions[data-show-on-hover],
+  .nm-sidebar__menu-item:focus-within > .nm-sidebar__menu-actions[data-show-on-hover],
+  .nm-sidebar__menu-item:has(> [data-active]) > .nm-sidebar__menu-actions[data-show-on-hover],
+  .nm-sidebar__menu-actions[data-show-on-hover]:has([data-popup-open]),
+  .nm-sidebar__menu-actions[data-show-on-hover]:has([aria-expanded='true']) {
+    opacity: 1;
+  }
+  /* A bar in the header or footer: its controls spread to the ends. */
+  .nm-sidebar__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-4);
+  }
 
   /* The chevron of a row that opens. It points right when closed and down when open. */
   .nm-sidebar__chevron {

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

@@ -26,6 +26,7 @@ import {
 } from '../../config/nm-sidebar.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NmChip } from '../nm-chip/nm-chip.tsx';
+import { NmDropdownMenu, type NmDropdownMenuProps } from '../nm-dropdown-menu/nm-dropdown-menu.tsx';
 import { NmDrawer, NmDrawerContent } from '../nm-drawer/nm-drawer.tsx';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 import { NmInput } from '../nm-input/nm-input.tsx';
@@ -63,6 +64,11 @@ 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. */
+/** Whether the sidebar is in view: open or peeking on a desktop, the drawer open on a phone. */
+export function useSidebarVisible(): boolean {
+  const { open, peek, isMobile, openMobile } = useSidebar();
+  return isMobile ? openMobile : open || peek;
+}
 /** 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);
@@ -477,6 +483,14 @@ export function NmSidebarMenuAction({ className, showOnHover = false, ...props }
   );
 }
 
+/** Several actions at the end of a row, such as new and more. They reveal together when `showOnHover`. */
+export function NmSidebarMenuActions({ className, showOnHover = false, ...props }: ComponentProps<'div'> & { showOnHover?: boolean }): ReactNode {
+  return <div data-slot="sidebar-menu-actions" data-show-on-hover={showOnHover ? '' : undefined} className={nmClass('nm-sidebar__menu-actions', className)} {...props} />;
+}
+/** A row of controls in the header or footer, such as a primary button and an icon button, spaced apart. */
+export function NmSidebarBar({ className, ...props }: ComponentProps<'div'>): ReactNode {
+  return <div data-slot="sidebar-bar" className={nmClass('nm-sidebar__bar', className)} {...props} />;
+}
 /** A count or a short word at the end of a row. The NIF Chip, small. */
 export function NmSidebarMenuBadge({ className, ...props }: ComponentProps<typeof NmChip>): ReactNode {
   return <NmChip data-slot="sidebar-menu-badge" size="sm" className={nmClass('nm-sidebar__menu-badge', className)} {...props} />;
@@ -549,3 +563,27 @@ export function NmSidebarMenuSubButton({
 export function NmSidebarChevron({ className, menu = false, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & { menu?: boolean }): ReactNode {
   return <NmIcon id="chevron" data-menu={menu ? '' : undefined} className={nmClass('nm-sidebar__chevron', className)} {...props} />;
 }
+
+/**
+ * A dropdown menu opened from the sidebar. It closes the moment the sidebar goes out of view
+ * (collapsed, a peek that ended, the drawer closed), so no menu outlives the panel it came from.
+ * While it is open the pointer may rest on it without ending a peek.
+ */
+export function NmSidebarDropdownMenu({ open: openProp, onOpenChange, ...props }: NmDropdownMenuProps) {
+  const visible = useSidebarVisible();
+  const [openState, setOpenState] = useState(false);
+  const open = (openProp ?? openState) && visible;
+  const handleOpenChange = useCallback<NonNullable<NmDropdownMenuProps['onOpenChange']>>(
+    (next, details) => {
+      setOpenState(next);
+      onOpenChange?.(next, details);
+    },
+    [onOpenChange],
+  );
+  useEffect(() => {
+    if (!visible) {
+      setOpenState(false);
+    }
+  }, [visible]);
+  return <NmDropdownMenu open={open} onOpenChange={handleOpenChange} {...props} />;
+}

package/registry/ui/config/nm-dropdown.ts

@@ -51,6 +51,13 @@ export const NM_DROPDOWN_ALIGN = {
   row: 'row',
 } as const;
 
+/** Which side of the trigger the menu opens on. `right` for a menu that must not cover a side panel's rows. */
+export const NM_DROPDOWN_SIDE = {
+  bottom: 'bottom',
+  top: 'top',
+  right: 'right',
+  left: 'left',
+} as const;
 /** Icon menus stay hidden until the host row or field is hovered or focused. */
 export const NM_DROPDOWN_REVEAL = {
   hover: 'hover',