@nordmanai/nif 0.1.0 → 0.2.0

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

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { NM_TABS_CLASSES, type NmTabItem } from '../../config/nm-tabs.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-tabs');
+
+export type NmTabsProps = {
+  label: string;
+  items: readonly NmTabItem[];
+  value: string;
+  onChange: (id: string) => void;
+};
+
+export function NmTabs(props: NmTabsProps): ReactNode {
+  logger.debug('render', props.label, { value: props.value });
+  return (
+    <div className={NM_TABS_CLASSES.root} role="tablist" aria-label={props.label}>
+      {props.items.map((item) => (
+        <button
+          key={item.id}
+          className={NM_TABS_CLASSES.item}
+          type="button"
+          role="tab"
+          aria-selected={item.id === props.value}
+          onClick={() => props.onChange(item.id)}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+  .nm-textarea {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    min-height: calc(var(--control-h) * 2.5);
+    padding: var(--field-area-py) var(--control-px);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-r);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-leading-normal);
+    outline: none;
+    resize: vertical;
+    field-sizing: content;
+    transition: border-color 0.15s;
+  }
+
+  .nm-textarea::placeholder {
+    color: var(--nm-fg-subtle);
+    opacity: 1;
+  }
+
+  .nm-textarea:hover:not(:disabled) {
+    border-color: var(--nm-stroke);
+  }
+
+  .nm-textarea:focus-visible {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .nm-textarea[aria-invalid='true'] {
+    border-color: var(--nm-destructive);
+  }

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

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export function NmTextarea({ className, ...props }: ComponentProps<'textarea'>) {
+  return <textarea data-slot="textarea" className={nmClass('nm-textarea', className)} {...props} />;
+}

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

@@ -0,0 +1,55 @@
+  .nm-toggle-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--control-gap);
+    box-sizing: border-box;
+    height: var(--control-h);
+    min-width: var(--control-h);
+    padding: 0 var(--control-px);
+    border: var(--nm-rule) solid transparent;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    font-weight: var(--control-fw);
+    cursor: pointer;
+    transition:
+      background 0.15s,
+      color 0.15s;
+  }
+
+  .nm-toggle-button[data-size='sm'] {
+    height: var(--control-h-sm);
+    min-width: var(--control-h-sm);
+  }
+
+  .nm-toggle-button[data-size='lg'] {
+    height: var(--control-h-lg);
+    min-width: var(--control-h-lg);
+  }
+
+  .nm-toggle-button[data-variant='outline'] {
+    border-color: var(--nm-line-strong);
+  }
+
+  .nm-toggle-button:hover:not([data-disabled]) {
+    background: var(--nm-inset);
+    color: var(--nm-fg);
+  }
+
+  .nm-toggle-button[data-pressed] {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-toggle-button:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-toggle-button[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }

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

@@ -0,0 +1,16 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export const NM_TOGGLE_VARIANTS = ['default', 'outline'] as const;
+export const NM_TOGGLE_SIZES = ['sm', 'default', 'lg'] as const;
+export type NmToggleVariant = (typeof NM_TOGGLE_VARIANTS)[number];
+export type NmToggleSize = (typeof NM_TOGGLE_SIZES)[number];
+
+export function NmToggle({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: TogglePrimitive.Props & { variant?: NmToggleVariant; size?: NmToggleSize }) {
+  return <TogglePrimitive data-slot="toggle" data-variant={variant} data-size={size} className={nmClass('nm-toggle-button', className as string)} {...props} />;
+}

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

@@ -0,0 +1,42 @@
+  .nm-toolbar {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    width: 100%;
+    min-width: 0;
+    padding: var(--nm-space-12);
+    background: var(--nm-canvas);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+  }
+
+  .nm-toolbar__group {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-toolbar__spacer {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .nm-toolbar__separator {
+    flex-shrink: 0;
+    align-self: stretch;
+    width: var(--nm-rule);
+    background: var(--nm-divider);
+  }
+
+  .nm-toolbar__input {
+    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

@@ -0,0 +1,54 @@
+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 { nmIconButtonClassName, type NmIconButtonTone } from '../../config/nm-icon-button.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+/** Base UI Toolbar, in the shadcn composition, styled by NIF tokens. One tab stop, arrow keys move between controls. */
+export function NmToolbar({ className, ...props }: ToolbarPrimitive.Root.Props) {
+  return <ToolbarPrimitive.Root data-slot="toolbar" className={nmClass('nm-toolbar', className as string)} {...props} />;
+}
+
+export function NmToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props) {
+  return <ToolbarPrimitive.Group data-slot="toolbar-group" className={nmClass('nm-toolbar__group', className as string)} {...props} />;
+}
+
+/** A vertical line between groups, such as between two panes. It follows the Contrast setting. */
+export function NmToolbarSeparator({ className, ...props }: ToolbarPrimitive.Separator.Props) {
+  return <ToolbarPrimitive.Separator data-slot="toolbar-separator" className={nmClass('nm-toolbar__separator', className as string)} {...props} />;
+}
+
+/** Takes the free space, pushing what follows to the end. */
+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. */
+export function NmToolbarButton({
+  icon,
+  label,
+  tone = 'quiet',
+  pressed,
+  className,
+  children,
+  ...props
+}: Omit<ToolbarPrimitive.Button.Props, 'children'> & { icon?: NmIconId; label: string; tone?: NmIconButtonTone; pressed?: boolean; children?: ReactNode }) {
+  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)}
+      {...props}
+    >
+      {icon ? <NmIcon id={icon} /> : null}
+      {children}
+    </ToolbarPrimitive.Button>
+  );
+}
+
+/** A field in the bar that takes the free width, such as an address. */
+export function NmToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props) {
+  return <ToolbarPrimitive.Input data-slot="toolbar-input" className={nmClass('nm-input nm-toolbar__input', className as string)} {...props} />;
+}

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

@@ -0,0 +1,37 @@
+  .nm-tooltip__positioner {
+    z-index: var(--nm-menu-z);
+  }
+
+  .nm-tooltip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-6);
+    max-width: var(--nm-width-tooltip);
+    padding: var(--nm-space-6) var(--nm-space-12);
+    border-radius: var(--nm-control-r);
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    transition: opacity 0.12s;
+  }
+
+  .nm-tooltip[data-starting-style],
+  .nm-tooltip[data-ending-style] {
+    opacity: 0;
+  }
+
+  .nm-tooltip__arrow {
+    width: var(--nm-space-8);
+    height: var(--nm-space-8);
+    background: var(--nm-fg);
+    transform: rotate(45deg);
+  }
+
+  .nm-tooltip__arrow[data-side='top'] {
+    bottom: calc(var(--nm-space-4) * -1);
+  }
+
+  .nm-tooltip__arrow[data-side='bottom'] {
+    top: calc(var(--nm-space-4) * -1);
+  }

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

@@ -0,0 +1,35 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export function NmTooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+}
+
+export function NmTooltip(props: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+export function NmTooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+export function NmTooltipContent({
+  className,
+  side = 'top',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className="nm-tooltip__positioner">
+        <TooltipPrimitive.Popup data-slot="tooltip-content" className={nmClass('nm-tooltip', className as string)} {...props}>
+          {children}
+          <TooltipPrimitive.Arrow className="nm-tooltip__arrow" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}

package/registry/ui/components/nm-top-bar/nm-top-bar.css

@@ -0,0 +1,29 @@
+.nm-header {
+  position: relative;
+  z-index: var(--nm-header-z, 10);
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--nm-space-8);
+  width: 100%;
+  min-width: 0;
+  padding: var(--nm-space-12);
+  background: var(--nm-canvas);
+  color: var(--nm-fg);
+  font-family: var(--nm-font);
+}
+
+.nm-header__end {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--nm-space-8);
+  margin-inline-start: auto;
+}
+
+@media (max-width: 48rem) {
+  .nm-header__end[data-hidden-narrow='true'] {
+    display: none;
+  }
+}

package/registry/ui/components/nm-top-bar/nm-top-bar.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { NM_TOP_BAR_CLASSES } from '../../config/nm-top-bar.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-top-bar');
+
+export type NmTopBarProps = {
+  /** Controls on the leading side: mode, title, search, filters. */
+  children: ReactNode;
+  /** Controls on the trailing edge, such as the panel toggle. */
+  end?: ReactNode;
+  /** Narrow-screen control, such as the button that opens the rail. */
+  menu?: ReactNode;
+  endHidden?: boolean;
+};
+
+/** The one page bar. Chat, agents, work, artifacts, and the library pass their controls in. */
+export function NmTopBar(props: NmTopBarProps): ReactNode {
+  logger.debug('render', 'top-bar', { end: props.end != null, menu: props.menu != null });
+  return (
+    <header className={NM_TOP_BAR_CLASSES.root}>
+      {props.menu}
+      {props.children}
+      {props.end != null ? (
+        <div
+          className={NM_TOP_BAR_CLASSES.end}
+          data-hidden-narrow={props.endHidden === true ? 'true' : 'false'}
+        >
+          {props.end}
+        </div>
+      ) : null}
+    </header>
+  );
+}

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

@@ -0,0 +1,119 @@
+  .nm-icon-button {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: var(--nm-icon-pad);
+    border: 0;
+    border-radius: var(--nm-control-radius);
+    background: transparent;
+    color: var(--nm-fg);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .nm-icon-button:hover:not(:disabled):not([aria-disabled='true']),
+  .nm-icon-button:focus-visible:not(:disabled):not([aria-disabled='true']),
+  .nm-icon-button[aria-expanded='true']:not(:disabled):not([aria-disabled='true']),
+  .nm-icon-button[aria-pressed='true']:not(:disabled):not([aria-disabled='true']) {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-icon-button:disabled {
+    opacity: var(--nm-soon-opacity);
+    cursor: default;
+  }
+
+  .nm-icon-button[aria-disabled='true'] {
+    cursor: default;
+  }
+
+  .nm-icon-button--raised {
+    background: var(--nm-raised);
+  }
+
+  .nm-icon-button--quiet {
+    background: transparent;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-icon-button--quiet.nm-icon-button--active:not(:disabled) {
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    box-shadow: inset 0 0 0 var(--nm-rule) var(--nm-line);
+  }
+
+  .nm-icon-button--solid {
+    background: var(--nm-stroke);
+    color: var(--nm-fg);
+  }
+
+  .nm-icon-button--solid:hover:not(:disabled):not([aria-disabled='true']),
+  .nm-icon-button--solid:focus-visible:not(:disabled):not([aria-disabled='true']) {
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+  }
+
+  .nm-icon-button--solid.nm-icon-button--active:not(:disabled) {
+    background: var(--nm-fg);
+    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']) {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-icon-button--invert,
+  .nm-icon-button--invert:hover:not(:disabled):not([aria-disabled='true']),
+  .nm-icon-button--invert:focus-visible:not(:disabled):not([aria-disabled='true']) {
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+  }
+
+  .nm-icon-button--invert:disabled {
+    background: var(--nm-fg-subtle);
+    color: var(--nm-canvas);
+    opacity: 1;
+  }
+
+  .nm-icon-button--invert[data-voice-trigger='true']:disabled {
+    background: var(--nm-accent);
+    color: var(--nm-canvas);
+    cursor: pointer;
+  }
+
+  .nm-icon-button--invert.nm-chatbox__send:not(:disabled),
+  .nm-icon-button--invert.nm-chatbox__send:not(:disabled):hover,
+  .nm-icon-button--invert.nm-chatbox__send:not(:disabled):focus-visible {
+    background: var(--nm-accent);
+    color: var(--nm-canvas);
+  }
+
+  .nm-icon-button--invert.nm-chatbox__send[data-voice-trigger='true']:disabled {
+    background: var(--nm-accent);
+    color: var(--nm-canvas);
+    cursor: pointer;
+  }
+
+  .nm-icon-button__icon,
+  .nm-icon-button .nm-icon,
+  .nm-icon-button > img {
+    display: block;
+    flex-shrink: 0;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }

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

@@ -0,0 +1,185 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_ICON_BUTTON_CLASSES,
+  NM_ICON_BUTTON_TONES,
+  type NmIconButtonTone,
+} from '../../config/nm-icon-button.ts';
+import { NORDMAN_CHROME_ICONS, type NordmanChromeIconId } from '../../config/nordman-chrome.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+const logger = createLogger('interface-nordman-icon-button');
+
+export const NORDMAN_ICON_BUTTON_VARIANTS = {
+  line: NM_ICON_BUTTON_TONES.line,
+  raised: NM_ICON_BUTTON_TONES.raised,
+} as const;
+
+export type NordmanIconButtonVariant =
+  (typeof NORDMAN_ICON_BUTTON_VARIANTS)[keyof typeof NORDMAN_ICON_BUTTON_VARIANTS];
+
+type NordmanIconButtonProps = {
+  label: string;
+  href?: string;
+  tone?: NmIconButtonTone;
+  variant?: NordmanIconButtonVariant;
+  testId?: string;
+  imageSrc?: string;
+  children?: ReactNode;
+  active?: boolean;
+  pressed?: boolean;
+  checked?: boolean;
+  busy?: boolean;
+  expanded?: boolean;
+  popup?: 'listbox';
+  controls?: string;
+  ariaDisabled?: boolean;
+  glyph?: NmIconId;
+  icon?: NordmanChromeIconId;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'>;
+
+function iconButtonTone(
+  tone: NmIconButtonTone | undefined,
+  variant: NordmanIconButtonVariant | undefined,
+): NmIconButtonTone {
+  if (tone != null) {
+    return tone;
+  }
+  if (variant === NORDMAN_ICON_BUTTON_VARIANTS.raised) {
+    return NM_ICON_BUTTON_TONES.raised;
+  }
+  return NM_ICON_BUTTON_TONES.line;
+}
+
+function iconButtonClass(
+  tone: NmIconButtonTone,
+  active: boolean,
+  className: string | undefined,
+): string {
+  return [
+    NM_ICON_BUTTON_CLASSES.root,
+    tone === NM_ICON_BUTTON_TONES.line ? '' : NM_ICON_BUTTON_CLASSES[tone],
+    active ? NM_ICON_BUTTON_CLASSES.active : '',
+    className ?? '',
+  ]
+    .filter((value) => value !== '')
+    .join(' ');
+}
+
+function IconButtonFace(props: {
+  glyph?: NmIconId;
+  icon?: NordmanChromeIconId;
+  imageSrc?: string;
+  children?: ReactNode;
+}): ReactNode {
+  if (props.children != null) {
+    return props.children;
+  }
+  if (props.imageSrc != null) {
+    return <img className={NM_ICON_BUTTON_CLASSES.icon} src={props.imageSrc} alt="" />;
+  }
+  if (props.glyph != null) {
+    return <NmIcon id={props.glyph} className={NM_ICON_BUTTON_CLASSES.icon} />;
+  }
+  if (props.icon != null) {
+    const chrome = NORDMAN_CHROME_ICONS[props.icon];
+    return (
+      <svg
+        className={NM_ICON_BUTTON_CLASSES.icon}
+        viewBox={chrome.viewBox}
+        fill="none"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d={chrome.path} stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  }
+  return null;
+}
+
+function iconButtonPressed(
+  checked: boolean | undefined,
+  pressed: boolean | undefined,
+  active: boolean,
+): boolean | undefined {
+  if (checked != null) {
+    return undefined;
+  }
+  if (pressed != null) {
+    return pressed;
+  }
+  if (active) {
+    return true;
+  }
+  return undefined;
+}
+
+export const NordmanIconButton = forwardRef<HTMLButtonElement, NordmanIconButtonProps>(
+  function NordmanIconButton(props, ref): ReactNode {
+    const {
+      icon,
+      glyph,
+      imageSrc,
+      children,
+      label,
+      href,
+      tone,
+      variant,
+      active = false,
+      pressed,
+      checked,
+      busy,
+      expanded,
+      popup,
+      controls,
+      ariaDisabled,
+      testId,
+      className,
+      type,
+      ...rest
+    } = props;
+    const resolvedTone = iconButtonTone(tone, variant);
+    const buttonClass = iconButtonClass(resolvedTone, active, className);
+    const marked = pressed ?? checked ?? (active ? true : undefined);
+    logger.debug('render', glyph ?? icon ?? label, { href: Boolean(href), tone: resolvedTone });
+    const face = (
+      <IconButtonFace glyph={glyph} icon={icon} imageSrc={imageSrc}>
+        {children}
+      </IconButtonFace>
+    );
+    let dataActive: 'true' | 'false' | undefined;
+    if (marked != null) {
+      dataActive = marked ? 'true' : 'false';
+    }
+    const shared = {
+      className: buttonClass,
+      'aria-label': label,
+      'aria-pressed': iconButtonPressed(checked, pressed, active),
+      'aria-checked': checked,
+      'aria-disabled': ariaDisabled,
+      'aria-busy': busy,
+      ...(expanded == null ? {} : { 'aria-expanded': expanded }),
+      'aria-haspopup': popup,
+      'aria-controls': controls,
+      role: checked != null ? ('radio' as const) : undefined,
+      'data-active': dataActive,
+      'data-testid': testId,
+    };
+    if (href) {
+      return (
+        <a href={href} {...shared}>
+          {face}
+        </a>
+      );
+    }
+    return (
+      <button {...rest} {...shared} ref={ref} type={type ?? 'button'}>
+        {face}
+      </button>
+    );
+  },
+);
+
+export { NM_ICON_BUTTON_TONES };