@nordmanai/nif 0.2.0 → 0.2.2

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ButtonHTMLAttributes } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NM_BUTTON_SIZES, NM_BUTTON_TONES, type NmButtonSize, type NmButtonTone } from '../../config/nm-button.ts';
 export type NmButtonProps = {
@@ -15,5 +15,7 @@ export type NmButtonProps = {
     testId?: string;
     onClick?: () => void;
 };
-export declare function NmButton(props: NmButtonProps): ReactNode;
+/** Any other button attribute, ref and event goes to the button, so a Base UI trigger can render a NmButton. */
+type NmButtonNativeProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof NmButtonProps | 'children' | 'aria-pressed'>;
+export declare const NmButton: import("react").ForwardRefExoticComponent<NmButtonProps & NmButtonNativeProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { NM_BUTTON_SIZES, NM_BUTTON_TONES };

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

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react';
+/** A key or a shortcut, drawn as a key cap. Use it in tooltips, menus and docs. The shadcn Kbd composition. */
+export declare function NmKbd({ className, ...props }: ComponentProps<'kbd'>): import("react").JSX.Element;
+/** Several keys of one shortcut, side by side. */
+export declare function NmKbdGroup({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;

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

@@ -1,6 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react';
 import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
 import type { NmIconId } from '../../config/nm-icons.ts';
+import { type NmButtonTone } from '../../config/nm-button.ts';
 import { type NmIconButtonTone } from '../../config/nm-icon-button.ts';
 /** Base UI Toolbar, in the shadcn composition, styled by NIF tokens. One tab stop, arrow keys move between controls. */
 export declare function NmToolbar({ className, ...props }: ToolbarPrimitive.Root.Props): import("react").JSX.Element;
@@ -9,11 +10,14 @@ export declare function NmToolbarGroup({ className, ...props }: ToolbarPrimitive
 export declare function NmToolbarSeparator({ className, ...props }: ToolbarPrimitive.Separator.Props): import("react").JSX.Element;
 /** Takes the free space, pushing what follows to the end. */
 export declare function NmToolbarSpacer({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-/** An icon button, or a button with text. `label` is its accessible name. */
+/**
+ * An icon button. Give it children and it is a NIF button with text instead, in the tone of your choice.
+ * `label` is its accessible name.
+ */
 export declare function NmToolbarButton({ icon, label, tone, pressed, className, children, ...props }: Omit<ToolbarPrimitive.Button.Props, 'children'> & {
     icon?: NmIconId;
     label: string;
-    tone?: NmIconButtonTone;
+    tone?: NmIconButtonTone | NmButtonTone;
     pressed?: boolean;
     children?: ReactNode;
 }): import("react").JSX.Element;

package/dist/ui/config/nm-icon-button.d.ts

@@ -3,7 +3,6 @@ export declare const NM_ICON_BUTTON_TONES: {
     readonly raised: 'raised';
     readonly quiet: 'quiet';
     readonly solid: 'solid';
-    readonly subtle: 'subtle';
     readonly panel: 'panel';
     readonly invert: 'invert';
 };
@@ -16,7 +15,6 @@ export declare const NM_ICON_BUTTON_CLASSES: {
     readonly raised: 'nm-icon-button--raised';
     readonly quiet: 'nm-icon-button--quiet';
     readonly solid: 'nm-icon-button--solid';
-    readonly subtle: 'nm-icon-button--subtle';
     readonly panel: 'nm-icon-button--panel';
     readonly invert: 'nm-icon-button--invert';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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.0",
+  "version": "0.2.2",
   "versions": {
     "@base-ui/react": "^1.9.0",
     "framer-motion": "^14.9.1",
@@ -90,7 +90,8 @@
     "resize-handle",
     "select",
     "combobox",
-    "button-group"
+    "button-group",
+    "kbd"
   ],
   "items": {
     "ai": {
@@ -823,6 +824,16 @@
       ],
       "uses": []
     },
+    "kbd": {
+      "dir": "nm-kbd",
+      "files": [
+        "components/nm-kbd/nm-kbd.css",
+        "components/nm-kbd/nm-kbd.tsx",
+        "lib/nm-class.ts"
+      ],
+      "libs": [],
+      "uses": []
+    },
     "label": {
       "dir": "nm-label",
       "files": [
@@ -1183,6 +1194,7 @@
         "components/nm-side-panel/nm-side-panel.tsx",
         "components/nm-toolbar/nm-toolbar.css",
         "components/nm-toolbar/nm-toolbar.tsx",
+        "config/nm-button.ts",
         "config/nm-icon-button.ts",
         "config/nm-icons.ts",
         "config/nm-side-panel.ts",
@@ -1320,6 +1332,7 @@
         "components/nm-icon/nm-lucide.tsx",
         "components/nm-toolbar/nm-toolbar.css",
         "components/nm-toolbar/nm-toolbar.tsx",
+        "config/nm-button.ts",
         "config/nm-icon-button.ts",
         "config/nm-icons.ts",
         "kit-logger.ts",

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

@@ -30,20 +30,6 @@
     height: var(--control-h-lg);
   }
 
-  /* An icon alone is a square the height of the button. */
-  .nm-button--icon {
-    width: var(--control-h);
-    padding: 0;
-  }
-
-  .nm-button--icon.nm-button--chip {
-    width: var(--control-h-sm);
-  }
-
-  .nm-button--icon.nm-button--large {
-    width: var(--control-h-lg);
-  }
-
   .nm-button--block {
     width: 100%;
   }
@@ -98,11 +84,21 @@
     cursor: default;
   }
 
+  /* An icon alone is a square the height of the button, in every size. */
+  .nm-button--icon,
   .nm-button:has(.nm-button__icon):not(:has(.nm-button__label)) {
     width: var(--control-h);
     padding: 0;
   }
 
+  :is(.nm-button--icon, .nm-button:has(.nm-button__icon):not(:has(.nm-button__label))).nm-button--chip {
+    width: var(--control-h-sm);
+  }
+
+  :is(.nm-button--icon, .nm-button:has(.nm-button__icon):not(:has(.nm-button__label))).nm-button--large {
+    width: var(--control-h-lg);
+  }
+
   .nm-button__icon {
     width: var(--nm-icon-button);
     height: var(--nm-icon-button);

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import {
   NM_BUTTON_CLASSES,
@@ -27,32 +27,39 @@ export type NmButtonProps = {
   onClick?: () => void;
 };
 
-export function NmButton(props: NmButtonProps): ReactNode {
-  const size = props.size ?? NM_BUTTON_SIZES.default;
+/** Any other button attribute, ref and event goes to the button, so a Base UI trigger can render a NmButton. */
+type NmButtonNativeProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof NmButtonProps | 'children' | 'aria-pressed'>;
+
+export const NmButton = forwardRef<HTMLButtonElement, NmButtonProps & NmButtonNativeProps>(function NmButton(props, ref): ReactNode {
+  const { label, tone, size: sizeProp, block, type, disabled, pressed, icon, iconOnly, testId, onClick, className: extra, ...rest } = props;
+  const size = sizeProp ?? NM_BUTTON_SIZES.default;
   const className = [
     NM_BUTTON_CLASSES.root,
-    NM_BUTTON_CLASSES[props.tone],
+    NM_BUTTON_CLASSES[tone],
     NM_BUTTON_CLASSES[size],
-    props.block ? NM_BUTTON_CLASSES.block : null,
-    props.iconOnly ? NM_BUTTON_CLASSES.icon : null,
+    block ? NM_BUTTON_CLASSES.block : null,
+    iconOnly ? NM_BUTTON_CLASSES.icon : null,
+    extra,
   ]
     .filter(Boolean)
     .join(' ');
-  logger.debug('render', props.label, { tone: props.tone, size });
+  logger.debug('render', label, { tone, size });
   return (
     <button
+      {...rest}
+      ref={ref}
       className={className}
-      type={props.type ?? 'button'}
-      disabled={props.disabled}
-      aria-pressed={props.pressed}
-      aria-label={props.iconOnly ? props.label : undefined}
-      data-testid={props.testId}
-      onClick={props.onClick}
+      type={type ?? 'button'}
+      disabled={disabled}
+      aria-pressed={pressed}
+      aria-label={iconOnly ? label : undefined}
+      data-testid={testId}
+      onClick={onClick}
     >
-      {props.icon ? <NmIcon id={props.icon} className="nm-button__icon" /> : null}
-      {props.iconOnly ? null : <span className="nm-button__label">{props.label}</span>}
+      {icon ? <NmIcon id={icon} className="nm-button__icon" /> : null}
+      {iconOnly ? null : <span className="nm-button__label">{label}</span>}
     </button>
   );
-}
+});
 
 export { NM_BUTTON_SIZES, NM_BUTTON_TONES };

package/registry/ui/components/nm-button-group/nm-button-group.css

@@ -51,6 +51,17 @@
     margin-block-start: 0;
   }
 
+  /* Buttons, text and selects keep their size. Only a field gives way when the bar is narrow. */
+  .nm-button-group > :not(.nm-button-group, .nm-button-group__separator, .nm-input, .nm-input-group, .nm-combobox__group) {
+    flex-shrink: 0;
+  }
+
+  /* A select in a bar is as wide as its choices, not the whole bar. */
+  .nm-button-group > .nm-select__trigger {
+    width: auto;
+    min-width: var(--nm-width-date);
+  }
+
   .nm-button-group > :is(.nm-input, .nm-input-group, .nm-combobox__group) {
     flex: 1;
     min-width: var(--nm-width-popup-sm);

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

@@ -342,7 +342,7 @@ export function NmDropdown(props: NmDropdownProps): ReactNode {
         label={props.label}
         glyph={props.imageSrc == null ? (props.icon ?? 'ellipsis') : undefined}
         imageSrc={props.imageSrc}
-        tone={NM_ICON_BUTTON_TONES.subtle}
+        tone={NM_ICON_BUTTON_TONES.quiet}
         disabled={props.disabled}
         expanded={open}
         popup="listbox"

package/registry/ui/components/nm-icon-border/nm-icon-border.tsx

@@ -37,7 +37,7 @@ export function NmIconBorder(props: NmIconBorderProps): ReactNode {
       label={props.label}
       glyph={props.icon}
       imageSrc={props.imageSrc}
-      tone={NM_ICON_BUTTON_TONES.subtle}
+      tone={NM_ICON_BUTTON_TONES.quiet}
       pressed={props.pressed}
       checked={props.checked}
       disabled={props.disabled}

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

@@ -0,0 +1,23 @@
+  .nm-kbd {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    padding: 0 var(--nm-space-4);
+    border-radius: var(--nm-radius-sm);
+    background: var(--nm-line);
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-leading-none);
+    user-select: none;
+  }
+
+  .nm-kbd__group {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-4);
+  }

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

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** A key or a shortcut, drawn as a key cap. Use it in tooltips, menus and docs. The shadcn Kbd composition. */
+export function NmKbd({ className, ...props }: ComponentProps<'kbd'>) {
+  return <kbd data-slot="kbd" className={nmClass('nm-kbd', className)} {...props} />;
+}
+
+/** Several keys of one shortcut, side by side. */
+export function NmKbdGroup({ className, ...props }: ComponentProps<'span'>) {
+  return <span data-slot="kbd-group" className={nmClass('nm-kbd__group', className)} {...props} />;
+}

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

@@ -52,7 +52,7 @@ export function NmSegmented(props: NmSegmentedProps): ReactNode {
         const selected = item.id === props.active;
         const iconOnly = item.iconOnly === true;
         const className = iconOnly
-          ? `${NM_SEGMENTED_CLASSES.item} ${NM_SEGMENTED_CLASSES.itemIcon} ${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES[NM_ICON_BUTTON_TONES.subtle]}`
+          ? `${NM_SEGMENTED_CLASSES.item} ${NM_SEGMENTED_CLASSES.itemIcon} ${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES[NM_ICON_BUTTON_TONES.quiet]}`
           : NM_SEGMENTED_CLASSES.item;
         return (
           <button

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

@@ -34,9 +34,3 @@
     flex: 1;
     min-width: 0;
   }
-
-  .nm-toolbar__text {
-    width: auto;
-    gap: var(--nm-space-6);
-    padding: 0 var(--nm-space-8);
-  }

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

@@ -2,6 +2,7 @@ import type { ComponentProps, ReactNode } from 'react';
 import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
 import { nmClass } from '../../lib/nm-class.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
+import { NM_BUTTON_TONES, nmButtonClassName, type NmButtonTone } from '../../config/nm-button.ts';
 import { nmIconButtonClassName, type NmIconButtonTone } from '../../config/nm-icon-button.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 
@@ -24,26 +25,31 @@ export function NmToolbarSpacer({ className, ...props }: ComponentProps<'span'>)
   return <span aria-hidden="true" data-slot="toolbar-spacer" className={nmClass('nm-toolbar__spacer', className)} {...props} />;
 }
 
-/** An icon button, or a button with text. `label` is its accessible name. */
+/**
+ * An icon button. Give it children and it is a NIF button with text instead, in the tone of your choice.
+ * `label` is its accessible name.
+ */
 export function NmToolbarButton({
   icon,
   label,
-  tone = 'quiet',
+  tone,
   pressed,
   className,
   children,
   ...props
-}: Omit<ToolbarPrimitive.Button.Props, 'children'> & { icon?: NmIconId; label: string; tone?: NmIconButtonTone; pressed?: boolean; children?: ReactNode }) {
+}: Omit<ToolbarPrimitive.Button.Props, 'children'> & { icon?: NmIconId; label: string; tone?: NmIconButtonTone | NmButtonTone; pressed?: boolean; children?: ReactNode }) {
+  const withText = children != null;
+  const buttonTone = (Object.values(NM_BUTTON_TONES) as string[]).includes(tone ?? '') ? (tone as NmButtonTone) : 'muted';
   return (
     <ToolbarPrimitive.Button
       data-slot="toolbar-button"
       aria-label={label}
       aria-pressed={pressed}
-      className={nmClass(nmIconButtonClassName(tone), children ? 'nm-toolbar__text' : undefined, className as string)}
+      className={nmClass(withText ? nmButtonClassName(buttonTone) : nmIconButtonClassName((tone as NmIconButtonTone | undefined) ?? 'quiet'), className as string)}
       {...props}
     >
-      {icon ? <NmIcon id={icon} /> : null}
-      {children}
+      {icon ? <NmIcon id={icon} className={withText ? 'nm-button__icon' : undefined} /> : null}
+      {withText ? <span className="nm-button__label">{children}</span> : null}
     </ToolbarPrimitive.Button>
   );
 }

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

@@ -3,6 +3,7 @@
   }
 
   .nm-tooltip {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--nm-space-6);
@@ -22,6 +23,7 @@
   }
 
   .nm-tooltip__arrow {
+    position: absolute;
     width: var(--nm-space-8);
     height: var(--nm-space-8);
     background: var(--nm-fg);
@@ -35,3 +37,18 @@
   .nm-tooltip__arrow[data-side='bottom'] {
     top: calc(var(--nm-space-4) * -1);
   }
+
+  /* On the right of its control the arrow points left, so it sits on the left edge. */
+  .nm-tooltip__arrow[data-side='right'] {
+    left: calc(var(--nm-space-4) * -1);
+  }
+
+  .nm-tooltip__arrow[data-side='left'] {
+    right: calc(var(--nm-space-4) * -1);
+  }
+
+  /* A tooltip is inverted, so a key cap inside it is too. */
+  .nm-tooltip .nm-kbd {
+    background: rgb(var(--nm-canvas-rgb) / 0.2);
+    color: var(--nm-canvas);
+  }

package/registry/ui/components/nordman-icon-button/nordman-icon-button.css

@@ -30,8 +30,10 @@
     cursor: default;
   }
 
+  /* Raised sits on a surface of its own with an edge, so it reads on any background. Panel has no edge. */
   .nm-icon-button--raised {
     background: var(--nm-raised);
+    box-shadow: inset 0 0 0 var(--nm-rule) var(--nm-line-strong);
   }
 
   .nm-icon-button--quiet {
@@ -39,6 +41,10 @@
     color: var(--nm-fg-subtle);
   }
 
+  .nm-icon-button--quiet[data-active='true'] {
+    color: var(--nm-fg);
+  }
+
   .nm-icon-button--quiet.nm-icon-button--active:not(:disabled) {
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -61,15 +67,6 @@
     color: var(--nm-canvas);
   }
 
-  .nm-icon-button--subtle {
-    background: transparent;
-    color: var(--nm-fg-subtle);
-  }
-
-  .nm-icon-button--subtle[data-active='true'] {
-    color: var(--nm-fg);
-  }
-
   .nm-icon-button--panel,
   .nm-icon-button--panel:hover:not(:disabled):not([aria-disabled='true']),
   .nm-icon-button--panel:focus-visible:not(:disabled):not([aria-disabled='true']) {

package/registry/ui/config/nm-icon-button.ts

@@ -3,7 +3,6 @@ export const NM_ICON_BUTTON_TONES = {
   raised: 'raised',
   quiet: 'quiet',
   solid: 'solid',
-  subtle: 'subtle',
   panel: 'panel',
   invert: 'invert',
 } as const;
@@ -18,7 +17,6 @@ export const NM_ICON_BUTTON_CLASSES = {
   raised: 'nm-icon-button--raised',
   quiet: 'nm-icon-button--quiet',
   solid: 'nm-icon-button--solid',
-  subtle: 'nm-icon-button--subtle',
   panel: 'nm-icon-button--panel',
   invert: 'nm-icon-button--invert',
 } as const;