@nordmanai/nif 0.2.10 → 0.2.12

package/dist/ui/components/nm-form-field/nm-form-field.d.ts

@@ -4,11 +4,21 @@ export declare function NmFieldSet({ className, ...props }: ComponentProps<'fiel
 export declare function NmFieldLegend({ className, variant, ...props }: ComponentProps<'legend'> & {
     variant?: 'legend' | 'label';
 }): import("react").JSX.Element;
-export declare function NmFieldGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export declare function NmFormField({ className, orientation, invalid, disabled, ...props }: ComponentProps<'div'> & {
+export type NmFieldGroupColumns = 1 | 2 | 3;
+/**
+ * A group stacks by default. With columns, it lays fields out in a grid of up to two or three
+ * columns, falling back to fewer when the container is narrow so long pages stay short on wide
+ * screens without getting cramped on small ones. A child with span="full" takes the whole row.
+ */
+export declare function NmFieldGroup({ className, columns, ...props }: ComponentProps<'div'> & {
+    columns?: NmFieldGroupColumns;
+}): import("react").JSX.Element;
+export declare function NmFormField({ className, orientation, invalid, disabled, span, ...props }: ComponentProps<'div'> & {
     orientation?: 'vertical' | 'horizontal';
     invalid?: boolean;
     disabled?: boolean;
+    /** Inside a multi-column group: take the whole row. */
+    span?: 'full';
 }): import("react").JSX.Element;
 export declare function NmFieldContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 export declare function NmFieldLabel({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;

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.10",
+  "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.10",
+  "version": "0.2.12",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",

package/registry/ui/components/nm-form-field/nm-form-field.css

@@ -27,6 +27,28 @@
     gap: var(--nm-space-24);
     width: 100%;
   }
+  /* Columns: a cell is never narrower than --nm-width-field-min, so the count drops as the
+     container narrows and reaches one column on small screens. */
+  .nm-field-group[data-columns] {
+    display: grid;
+    gap: var(--nm-space-24) var(--nm-space-16);
+    align-items: start;
+  }
+  .nm-field-group[data-columns='2'] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, max(var(--nm-width-field-min), calc(var(--nm-field-col-2) - var(--nm-space-16)))), 1fr)
+    );
+  }
+  .nm-field-group[data-columns='3'] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, max(var(--nm-width-field-min), calc(var(--nm-field-col-3) - var(--nm-space-16)))), 1fr)
+    );
+  }
+  .nm-field-group[data-columns] > [data-span='full'] {
+    grid-column: 1 / -1;
+  }
 
   .nm-form-field {
     display: flex;

package/registry/ui/components/nm-form-field/nm-form-field.tsx

@@ -11,8 +11,25 @@ export function NmFieldLegend({ className, variant = 'legend', ...props }: Compo
   return <legend data-slot="field-legend" data-variant={variant} className={nmClass('nm-field-legend', className)} {...props} />;
 }
 
-export function NmFieldGroup({ className, ...props }: ComponentProps<'div'>) {
-  return <div data-slot="field-group" className={nmClass('nm-field-group', className)} {...props} />;
+export type NmFieldGroupColumns = 1 | 2 | 3;
+/**
+ * A group stacks by default. With columns, it lays fields out in a grid of up to two or three
+ * columns, falling back to fewer when the container is narrow so long pages stay short on wide
+ * screens without getting cramped on small ones. A child with span="full" takes the whole row.
+ */
+export function NmFieldGroup({
+  className,
+  columns = 1,
+  ...props
+}: ComponentProps<'div'> & { columns?: NmFieldGroupColumns }) {
+  return (
+    <div
+      data-slot="field-group"
+      data-columns={columns > 1 ? columns : undefined}
+      className={nmClass('nm-field-group', className)}
+      {...props}
+    />
+  );
 }
 
 export function NmFormField({
@@ -20,13 +37,21 @@ export function NmFormField({
   orientation = 'vertical',
   invalid,
   disabled,
+  span,
   ...props
-}: ComponentProps<'div'> & { orientation?: 'vertical' | 'horizontal'; invalid?: boolean; disabled?: boolean }) {
+}: ComponentProps<'div'> & {
+  orientation?: 'vertical' | 'horizontal';
+  invalid?: boolean;
+  disabled?: boolean;
+  /** Inside a multi-column group: take the whole row. */
+  span?: 'full';
+}) {
   return (
     <div
       data-slot="field"
       role="group"
       data-orientation={orientation}
+      data-span={span}
       data-invalid={invalid ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       className={nmClass('nm-form-field', className)}

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,

package/registry/ui/styles/tokens.css

@@ -274,6 +274,10 @@
   --nm-width-popup: 18rem;
   --nm-width-tooltip: 20rem;
   --nm-width-form: 28rem;
+  /* Field grids: the narrowest a field cell may be, and the share of the row per column. */
+  --nm-width-field-min: 14rem;
+  --nm-field-col-2: 50%;
+  --nm-field-col-3: 33.333%;
   --nm-code-gutter: 3ch;
   --nm-width-date: 11rem;
   --nm-width-dialog: 40rem;