@nordmanai/nif 0.2.17 → 0.2.19

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

@@ -29,6 +29,12 @@ type SidebarContextValue = {
     peekOut: () => void;
     collapsible: NmSidebarCollapsible;
     setCollapsible: (mode: NmSidebarCollapsible) => void;
+    /** The width the user resized the sidebar to, in px. Null until resized: the sidebar then takes its token width. */
+    width: number | null;
+    /** Sets the resized width, or null to go back to the token width. Clamped by the min and max tokens in the CSS. */
+    setWidth: (width: number | null) => void;
+    resizing: boolean;
+    setResizing: (resizing: boolean) => 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. */
@@ -46,12 +52,18 @@ export type NmSidebarProviderProps = ComponentProps<'div'> & {
     peek?: boolean;
     /** `fill` takes the room it is given. `sm` and `lg` are fixed heights, for a sidebar shown inside a page. */
     height?: 'fill' | 'sm' | 'lg';
+    /** The resized width in px, when the app holds it. */
+    width?: number | null;
+    /** The starting resized width in px. Leave out for the token width. */
+    defaultWidth?: number;
+    /** Called while the sidebar is resized, with the new width, or null on reset. Store it to remember the width. */
+    onWidthChange?: (width: number | null) => void;
 };
 /**
  * Holds the open state and hands it to every part inside. Wrap the sidebar and the main area in it.
  * The shadcn Sidebar composition, built from NIF primitives and styled by NIF tokens.
  */
-export declare function NmSidebarProvider({ defaultOpen, open: openProp, onOpenChange, shortcut, peek: peekEnabled, height, className, style, children, ...props }: NmSidebarProviderProps): ReactNode;
+export declare function NmSidebarProvider({ defaultOpen, open: openProp, onOpenChange, shortcut, peek: peekEnabled, height, width: widthProp, defaultWidth, onWidthChange, className, style, children, ...props }: NmSidebarProviderProps): ReactNode;
 export type NmSidebarProps = ComponentProps<'div'> & {
     side?: NmSidebarSide;
     variant?: NmSidebarVariant;
@@ -129,6 +141,18 @@ export declare function NmSidebarMenuActions({ className, showOnHover, ...props
 }): 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;
+/** The product name at the top of the sidebar. Static: it has a row's geometry so it lines up with the rows below, but no hover or press. */
+export declare function NmSidebarBrand({ className, ...props }: ComponentProps<'div'>): ReactNode;
+export type NmSidebarResizerProps = Omit<ComponentProps<'div'>, 'role' | 'onKeyDown' | 'onDoubleClick' | 'onPointerDown'> & {
+    /** The accessible name. */
+    label?: string;
+};
+/**
+ * The edge of the sidebar you drag to resize it. Put it inside `NmSidebar`. The width stays between the
+ * `--nm-width-sidebar-min` and `--nm-width-sidebar-max` tokens. Arrow keys resize, Home and End jump to the
+ * bounds, a double click or Enter goes back to the default width. Only shown while the sidebar is open.
+ */
+export declare function NmSidebarResizer({ className, label, ...props }: NmSidebarResizerProps): 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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "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.16",
+  "version": "0.2.18",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",

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

@@ -1,6 +1,7 @@
   /* The provider holds the sidebar and the main area side by side. */
   .nm-sidebar-provider {
-    --nm-sidebar-width: var(--nm-width-sidebar);
+    /* The token width, or the width the user dragged to, always between the min and max tokens. */
+    --nm-sidebar-width: clamp(var(--nm-width-sidebar-min), var(--nm-sidebar-resized, var(--nm-width-sidebar)), var(--nm-width-sidebar-max));
     --nm-sidebar-width-icon: var(--nm-width-sidebar-icon);
     /* The sidebar shares the page's background; only its divider separates it. Floating and inset variants keep their raised card. */
     --nm-sidebar-bg: var(--nm-canvas);
@@ -50,15 +51,56 @@
     order: 1;
   }
   .nm-sidebar[data-variant='sidebar'][data-side='left'] {
-    border-inline-end: var(--nm-rule) solid var(--nm-border-divider);
+    border-inline-end: var(--nm-rule) solid var(--nm-border-strong);
   }
   .nm-sidebar[data-variant='sidebar'][data-side='right'] {
-    border-inline-start: var(--nm-rule) solid var(--nm-border-divider);
+    border-inline-start: var(--nm-rule) solid var(--nm-border-strong);
   }
   .nm-sidebar[data-collapsible='offcanvas'] {
     width: 0;
     border-width: 0;
   }
+  /* The drag edge: a strip along the sidebar's end, over its border, with a line that shows on hover, focus and drag. */
+  .nm-sidebar__resizer {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: 1;
+    width: var(--nm-space-8);
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
+  .nm-sidebar[data-side='right'] .nm-sidebar__resizer {
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+  }
+  .nm-sidebar__resizer::after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: calc(var(--nm-rule) * 2);
+    background: transparent;
+    transition: background-color var(--reveal) var(--ease);
+  }
+  .nm-sidebar[data-side='right'] .nm-sidebar__resizer::after {
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+  }
+  .nm-sidebar__resizer:hover::after,
+  .nm-sidebar__resizer:focus-visible::after,
+  .nm-sidebar-provider[data-resizing] .nm-sidebar__resizer::after {
+    background: var(--nm-accent);
+  }
+  /* While dragging, the width follows the pointer with no easing and nothing gets selected. */
+  .nm-sidebar-provider[data-resizing] {
+    cursor: col-resize;
+    user-select: none;
+  }
+  .nm-sidebar-provider[data-resizing] .nm-sidebar {
+    transition: none;
+  }
   .nm-sidebar[data-collapsible='icon'],
   .nm-sidebar[data-collapsible='toggle'] {
     width: var(--nm-sidebar-width-icon);
@@ -177,18 +219,37 @@
   .nm-sidebar-provider > .nm-sidebar__trigger--anchored {
     position: absolute;
     top: var(--nm-space-12);
-    inset-inline-start: var(--nm-space-12);
+    /* Its icon sits where a row's icon sits: the group padding, the row border, then the row's icon padding. */
+    inset-inline-start: calc(var(--nm-space-8) + var(--nm-rule));
     z-index: calc(var(--nm-rail-z) + 1);
   }
   /* The header leaves the anchored toggle's room and lines its first row up with it. */
   .nm-sidebar-provider:has(> .nm-sidebar__trigger--anchored) .nm-sidebar__header {
     padding-block-start: var(--nm-space-12);
-    padding-inline-start: calc(var(--nm-space-12) + var(--nm-icon-control) + var(--nm-space-8));
+    /* The first row's text starts where a row's text starts: after the icon column. */
+    padding-inline-start: calc(var(--nm-space-8) + var(--nm-icon-button) + var(--nm-space-8));
     min-height: calc(var(--nm-space-12) + var(--nm-icon-control) + var(--nm-space-8));
   }
-  .nm-sidebar-provider:has(> .nm-sidebar__trigger--anchored) .nm-sidebar__header > .nm-sidebar__menu > .nm-sidebar__menu-item:first-child > .nm-sidebar__menu-button {
+  .nm-sidebar-provider:has(> .nm-sidebar__trigger--anchored) .nm-sidebar__header > .nm-sidebar__menu > .nm-sidebar__menu-item:first-child > .nm-sidebar__menu-button,
+  .nm-sidebar-provider:has(> .nm-sidebar__trigger--anchored) .nm-sidebar__header > .nm-sidebar__brand {
     min-height: var(--nm-icon-control);
   }
+  /* The product name: a row's geometry and type, semibold, with nothing to hover or press. */
+  .nm-sidebar__brand {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--control-h);
+    padding: 0 var(--nm-icon-pad);
+    border: var(--nm-rule) solid transparent;
+    color: var(--nm-fg);
+    font: inherit;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-semibold);
+    white-space: nowrap;
+  }
   /* Holds the anchored toggle's place in a bar while the sidebar is closed. */
   .nm-sidebar__trigger-space {
     display: inline-block;

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

@@ -8,6 +8,8 @@ import {
   useState,
   type ComponentProps,
   type CSSProperties,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
   type ReactElement,
   type ReactNode,
 } from 'react';
@@ -56,6 +58,12 @@ type SidebarContextValue = {
   peekOut: () => void;
   collapsible: NmSidebarCollapsible;
   setCollapsible: (mode: NmSidebarCollapsible) => void;
+  /** The width the user resized the sidebar to, in px. Null until resized: the sidebar then takes its token width. */
+  width: number | null;
+  /** Sets the resized width, or null to go back to the token width. Clamped by the min and max tokens in the CSS. */
+  setWidth: (width: number | null) => void;
+  resizing: boolean;
+  setResizing: (resizing: boolean) => void;
 };
 
 const SidebarContext = createContext<SidebarContextValue | null>(null);
@@ -103,8 +111,13 @@ export type NmSidebarProviderProps = ComponentProps<'div'> & {
   peek?: boolean;
   /** `fill` takes the room it is given. `sm` and `lg` are fixed heights, for a sidebar shown inside a page. */
   height?: 'fill' | 'sm' | 'lg';
+  /** The resized width in px, when the app holds it. */
+  width?: number | null;
+  /** The starting resized width in px. Leave out for the token width. */
+  defaultWidth?: number;
+  /** Called while the sidebar is resized, with the new width, or null on reset. Store it to remember the width. */
+  onWidthChange?: (width: number | null) => void;
 };
-
 /**
  * Holds the open state and hands it to every part inside. Wrap the sidebar and the main area in it.
  * The shadcn Sidebar composition, built from NIF primitives and styled by NIF tokens.
@@ -116,6 +129,9 @@ export function NmSidebarProvider({
   shortcut = true,
   peek: peekEnabled = true,
   height = 'fill',
+  width: widthProp,
+  defaultWidth,
+  onWidthChange,
   className,
   style,
   children,
@@ -125,6 +141,18 @@ export function NmSidebarProvider({
   const [openMobile, setOpenMobile] = useState(false);
   const [openState, setOpenState] = useState(defaultOpen);
   const [peek, setPeek] = useState(false);
+  const [widthState, setWidthState] = useState<number | null>(defaultWidth ?? null);
+  const [resizing, setResizing] = useState(false);
+  const width = widthProp === undefined ? widthState : widthProp;
+  const setWidth = useCallback(
+    (next: number | null) => {
+      onWidthChange?.(next);
+      if (widthProp === undefined) {
+        setWidthState(next);
+      }
+    },
+    [onWidthChange, widthProp],
+  );
   const [collapsible, setCollapsible] = useState<NmSidebarCollapsible>('offcanvas');
   const leaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pointer = useRef<{ x: number; y: number } | null>(null);
@@ -215,12 +243,19 @@ export function NmSidebarProvider({
 
   const state: NmSidebarState = open ? 'expanded' : 'collapsed';
   const value = useMemo<SidebarContextValue>(
-    () => ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar, peek: peek && !open, peekIn, peekOut, collapsible, setCollapsible }),
-    [state, open, setOpen, openMobile, isMobile, toggleSidebar, peek, peekIn, peekOut, collapsible],
+    () => ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar, peek: peek && !open, peekIn, peekOut, collapsible, setCollapsible, width, setWidth, resizing, setResizing }),
+    [state, open, setOpen, openMobile, isMobile, toggleSidebar, peek, peekIn, peekOut, collapsible, width, setWidth, resizing],
   );
   return (
     <SidebarContext.Provider value={value}>
-      <div data-slot="sidebar-wrapper" data-height={height} className={nmClass('nm-sidebar-provider', className)} style={style} {...props}>
+      <div
+        data-slot="sidebar-wrapper"
+        data-height={height}
+        data-resizing={resizing ? '' : undefined}
+        className={nmClass('nm-sidebar-provider', className)}
+        style={width == null ? style : ({ ...style, ['--nm-sidebar-resized' as string]: `${width}px` } as CSSProperties)}
+        {...props}
+      >
         {children}
       </div>
     </SidebarContext.Provider>
@@ -503,6 +538,136 @@ export function NmSidebarMenuActions({ className, showOnHover = false, ...props
 export function NmSidebarBar({ className, ...props }: ComponentProps<'div'>): ReactNode {
   return <div data-slot="sidebar-bar" className={nmClass('nm-sidebar__bar', className)} {...props} />;
 }
+/** The product name at the top of the sidebar. Static: it has a row's geometry so it lines up with the rows below, but no hover or press. */
+export function NmSidebarBrand({ className, ...props }: ComponentProps<'div'>): ReactNode {
+  return <div data-slot="sidebar-brand" className={nmClass('nm-sidebar__brand', className)} {...props} />;
+}
+export type NmSidebarResizerProps = Omit<ComponentProps<'div'>, 'role' | 'onKeyDown' | 'onDoubleClick' | 'onPointerDown'> & {
+  /** The accessible name. */
+  label?: string;
+};
+/** A token length in px. The sidebar bounds are plain rem tokens. */
+function tokenPx(value: string): number {
+  const amount = parseFloat(value);
+  return value.trim().endsWith('rem') ? amount * parseFloat(getComputedStyle(document.documentElement).fontSize) : amount;
+}
+function clampWidth(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+/**
+ * The edge of the sidebar you drag to resize it. Put it inside `NmSidebar`. The width stays between the
+ * `--nm-width-sidebar-min` and `--nm-width-sidebar-max` tokens. Arrow keys resize, Home and End jump to the
+ * bounds, a double click or Enter goes back to the default width. Only shown while the sidebar is open.
+ */
+export function NmSidebarResizer({ className, label = 'Resize sidebar', ...props }: NmSidebarResizerProps): ReactNode {
+  const { open, isMobile, setWidth, setResizing } = useSidebar();
+  const ref = useRef<HTMLDivElement>(null);
+  const [range, setRange] = useState({ min: 0, max: 0, now: 0 });
+  const measure = useCallback(() => {
+    const element = ref.current;
+    const host = element?.closest<HTMLElement>('.nm-sidebar-provider');
+    const sidebar = element?.closest<HTMLElement>('.nm-sidebar');
+    if (!element || !host || !sidebar) {
+      return null;
+    }
+    const style = getComputedStyle(host);
+    return {
+      host,
+      sidebar,
+      min: tokenPx(style.getPropertyValue('--nm-width-sidebar-min')),
+      max: tokenPx(style.getPropertyValue('--nm-width-sidebar-max')),
+      now: sidebar.getBoundingClientRect().width,
+      sign: (sidebar.getAttribute('data-side') === 'right') !== (style.direction === 'rtl') ? -1 : 1,
+    };
+  }, []);
+  useEffect(() => {
+    const info = measure();
+    if (!info) {
+      return undefined;
+    }
+    const update = () => {
+      const next = measure();
+      if (next) {
+        setRange((prev) => (prev.min === next.min && prev.max === next.max && prev.now === next.now ? prev : { min: next.min, max: next.max, now: next.now }));
+      }
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(info.sidebar);
+    return () => observer.disconnect();
+  }, [open, isMobile, measure]);
+  useEffect(() => () => setResizing(false), [setResizing]);
+  if (!open || isMobile) {
+    return null;
+  }
+  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) {
+      return;
+    }
+    const info = measure();
+    if (!info) {
+      return;
+    }
+    event.preventDefault();
+    const target = event.currentTarget;
+    const startX = event.clientX;
+    const startWidth = info.now;
+    target.setPointerCapture(event.pointerId);
+    target.focus();
+    setResizing(true);
+    const move = (moveEvent: PointerEvent) => {
+      setWidth(clampWidth(startWidth + info.sign * (moveEvent.clientX - startX), info.min, info.max));
+    };
+    const end = () => {
+      setResizing(false);
+      target.removeEventListener('pointermove', move);
+      target.removeEventListener('pointerup', end);
+      target.removeEventListener('pointercancel', end);
+    };
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', end);
+    target.addEventListener('pointercancel', end);
+  };
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    const info = measure();
+    if (!info) {
+      return;
+    }
+    const step = (info.max - info.min) / 10;
+    const grow = event.key === 'ArrowRight' ? info.sign : event.key === 'ArrowLeft' ? -info.sign : 0;
+    if (grow !== 0) {
+      event.preventDefault();
+      setWidth(clampWidth(info.now + grow * step, info.min, info.max));
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      setWidth(info.min);
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      setWidth(info.max);
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      setWidth(null);
+    }
+  };
+  return (
+    <div
+      ref={ref}
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={label}
+      aria-valuemin={Math.round(range.min)}
+      aria-valuemax={Math.round(range.max)}
+      aria-valuenow={Math.round(range.now)}
+      tabIndex={0}
+      data-slot="sidebar-resizer"
+      className={nmClass('nm-sidebar__resizer', className)}
+      onPointerDown={onPointerDown}
+      onKeyDown={onKeyDown}
+      onDoubleClick={() => setWidth(null)}
+      {...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} />;

package/registry/ui/styles/tokens.css

@@ -209,6 +209,8 @@
   --nm-width-panel-max: 80%;
   /* The sidebar beside the main area: open, on a phone, and collapsed to icons (a square row inside the group padding). */
   --nm-width-sidebar: 16rem;
+  --nm-width-sidebar-min: 13rem;
+  --nm-width-sidebar-max: 28rem;
   --nm-width-sidebar-mobile: 18rem;
   /* A drawer over the page from an edge. */
   --nm-width-drawer: 20rem;