@nordmanai/nif 0.1.0 → 0.2.0

package/registry/ui/components/nm-bar-overflow/use-bar-overflow.ts

@@ -0,0 +1,92 @@
+import { useCallback, useLayoutEffect, useRef, useState, type RefObject } from 'react';
+import {
+  BAR_OVERFLOW_MODES,
+  resolveBarOverflow,
+  type BarOverflowMode,
+} from '../../lib/bar-overflow.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-bar-overflow');
+
+export function useBarOverflow(
+  rootRef: RefObject<HTMLElement | null>,
+  rowRef: RefObject<HTMLElement | null>,
+): {
+  mode: BarOverflowMode;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+} {
+  const [mode, setMode] = useState<BarOverflowMode>(BAR_OVERFLOW_MODES.inline);
+  const [open, setOpenState] = useState(false);
+  const openRef = useRef(false);
+  const neededRef = useRef(0);
+  const modeRef = useRef<BarOverflowMode>(BAR_OVERFLOW_MODES.inline);
+
+  const apply = useCallback(() => {
+    const root = rootRef.current;
+    const row = rowRef.current;
+    if (root == null || row == null) {
+      return;
+    }
+    if (!openRef.current && row.scrollWidth > 0) {
+      neededRef.current = row.scrollWidth;
+    }
+    const next = resolveBarOverflow({
+      availableWidth: root.clientWidth,
+      neededWidth: neededRef.current,
+    });
+    if (modeRef.current !== next) {
+      logger.debug('measure', next, {
+        available: Math.round(root.clientWidth),
+        needed: Math.round(neededRef.current),
+      });
+      modeRef.current = next;
+      setMode(next);
+    }
+    if (next === BAR_OVERFLOW_MODES.inline && openRef.current) {
+      openRef.current = false;
+      setOpenState(false);
+    }
+  }, [rootRef, rowRef]);
+
+  useLayoutEffect(() => {
+    apply();
+    const root = rootRef.current;
+    const row = rowRef.current;
+    const observer = new ResizeObserver(() => {
+      apply();
+    });
+    if (root != null) {
+      observer.observe(root);
+    }
+    if (row != null) {
+      observer.observe(row);
+    }
+    window.addEventListener('resize', apply);
+    let cancelled = false;
+    if (document.fonts != null) {
+      void document.fonts.ready.then(() => {
+        if (!cancelled) {
+          apply();
+        }
+      });
+    }
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+      window.removeEventListener('resize', apply);
+    };
+  }, [apply, rootRef, rowRef]);
+
+  useLayoutEffect(() => {
+    apply();
+  }, [apply, open]);
+
+  const setOpen = useCallback((next: boolean) => {
+    openRef.current = next;
+    setOpenState(next);
+    logger.debug('toggle', next ? 'open' : 'close');
+  }, []);
+
+  return { mode, open, setOpen };
+}

package/registry/ui/components/nm-brand-logo/nm-brand-logo.css

@@ -0,0 +1,20 @@
+  .nm-brand-logo {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--nm-icon);
+    height: var(--nm-icon);
+    color: var(--nm-fg);
+  }
+
+  .nm-brand-logo > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* A mono logo has no colour of its own. It is filled with the text colour. */
+  .nm-brand-logo[data-mono] > svg {
+    fill: currentColor;
+  }

package/registry/ui/components/nm-brand-logo/nm-brand-logo.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/**
+ * A brand logo from its SVG source, such as the strings in @thesvg/icons. The markup must come from a trusted
+ * package, never from user input. It is drawn at the icon size, and a mono logo (`mono`) takes the text colour, so it reads on any theme.
+ */
+export function NmBrandLogo({ svg, label, mono, className, ...props }: Omit<ComponentProps<'span'>, 'children'> & { svg: string; label?: string; mono?: boolean }) {
+  return (
+    <span
+      data-slot="brand-logo"
+      data-mono={mono ? '' : undefined}
+      role={label ? 'img' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      className={nmClass('nm-brand-logo', className)}
+      dangerouslySetInnerHTML={{ __html: svg }}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,57 @@
+  .nm-breadcrumb {
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+  }
+
+  .nm-breadcrumb__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nm-space-8);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    color: var(--nm-fg-muted);
+  }
+
+  .nm-breadcrumb__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-6);
+  }
+
+  .nm-breadcrumb__link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .nm-breadcrumb__link:hover {
+    color: var(--nm-fg);
+  }
+
+  .nm-breadcrumb__link:focus-visible {
+    border-radius: var(--nm-radius-sm);
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-breadcrumb__page {
+    color: var(--nm-fg);
+  }
+
+  .nm-breadcrumb__separator {
+    display: inline-flex;
+    color: var(--nm-fg-subtle);
+    transform: rotate(-90deg);
+  }
+
+  .nm-breadcrumb__separator .nm-icon,
+  .nm-breadcrumb__ellipsis .nm-icon {
+    width: var(--nm-icon-sm);
+    height: var(--nm-icon-sm);
+  }
+
+  .nm-breadcrumb__ellipsis {
+    display: inline-flex;
+    align-items: center;
+  }

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

@@ -0,0 +1,42 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+/** The path to the current page. The shadcn Breadcrumb composition, styled by NIF tokens. */
+export function NmBreadcrumb({ className, ...props }: ComponentProps<'nav'>) {
+  return <nav aria-label="Breadcrumb" data-slot="breadcrumb" className={nmClass('nm-breadcrumb', className)} {...props} />;
+}
+
+export function NmBreadcrumbList({ className, ...props }: ComponentProps<'ol'>) {
+  return <ol data-slot="breadcrumb-list" className={nmClass('nm-breadcrumb__list', className)} {...props} />;
+}
+
+export function NmBreadcrumbItem({ className, ...props }: ComponentProps<'li'>) {
+  return <li data-slot="breadcrumb-item" className={nmClass('nm-breadcrumb__item', className)} {...props} />;
+}
+
+export function NmBreadcrumbLink({ className, ...props }: ComponentProps<'a'>) {
+  return <a data-slot="breadcrumb-link" className={nmClass('nm-breadcrumb__link', className)} {...props} />;
+}
+
+/** The current page. It is not a link. */
+export function NmBreadcrumbPage({ className, ...props }: ComponentProps<'span'>) {
+  return <span aria-current="page" data-slot="breadcrumb-page" className={nmClass('nm-breadcrumb__page', className)} {...props} />;
+}
+
+export function NmBreadcrumbSeparator({ className, children, ...props }: ComponentProps<'li'>) {
+  return (
+    <li role="presentation" aria-hidden="true" data-slot="breadcrumb-separator" className={nmClass('nm-breadcrumb__separator', className)} {...props}>
+      {children ?? <NmIcon id="chevron" />}
+    </li>
+  );
+}
+
+/** Stands for the levels left out. Put it in a dropdown menu trigger to let people reach them. */
+export function NmBreadcrumbEllipsis({ className, ...props }: ComponentProps<'span'>) {
+  return (
+    <span role="presentation" aria-hidden="true" data-slot="breadcrumb-ellipsis" className={nmClass('nm-breadcrumb__ellipsis', className)} {...props}>
+      <NmIcon id="ellipsis" />
+    </span>
+  );
+}

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

@@ -0,0 +1,110 @@
+  .nm-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--control-gap);
+    box-sizing: border-box;
+    height: var(--control-h);
+    padding: 0 var(--control-px);
+    border: var(--nm-rule) solid transparent;
+    border-radius: var(--nm-control-r);
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    font-weight: var(--control-fw);
+    line-height: var(--nm-leading-none);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      background 0.15s,
+      border-color 0.15s,
+      opacity 0.15s;
+  }
+
+  .nm-button--chip {
+    height: var(--control-h-sm);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-button--large {
+    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%;
+  }
+
+  .nm-button--filled {
+    border-color: var(--nm-fg);
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+  }
+
+  .nm-button--outline {
+    border-color: var(--nm-line-strong);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+  }
+
+  .nm-button--muted {
+    border-color: transparent;
+    background: var(--nm-panel);
+    color: var(--nm-stroke);
+  }
+
+  .nm-button--panel {
+    border-color: var(--nm-line-strong);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-button--danger {
+    border-color: transparent;
+    background: rgb(var(--nm-destructive-rgb) / 16%);
+    color: rgb(var(--nm-destructive-rgb));
+  }
+
+  .nm-button--filled:hover:not(:disabled),
+  .nm-button--danger:hover:not(:disabled) {
+    opacity: var(--btn-hover);
+  }
+
+  .nm-button--outline:hover:not(:disabled),
+  .nm-button--panel:hover:not(:disabled) {
+    background: var(--nm-panel);
+  }
+
+  .nm-button:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+
+  .nm-button:disabled {
+    opacity: var(--nm-soon-opacity);
+    cursor: default;
+  }
+
+  .nm-button:has(.nm-button__icon):not(:has(.nm-button__label)) {
+    width: var(--control-h);
+    padding: 0;
+  }
+
+  .nm-button__icon {
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+

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

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_BUTTON_CLASSES,
+  NM_BUTTON_SIZES,
+  NM_BUTTON_TONES,
+  type NmButtonSize,
+  type NmButtonTone,
+} from '../../config/nm-button.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+const logger = createLogger('interface-nm-button');
+
+export type NmButtonProps = {
+  label: string;
+  tone: NmButtonTone;
+  size?: NmButtonSize;
+  block?: boolean;
+  type?: 'button' | 'submit';
+  disabled?: boolean;
+  pressed?: boolean;
+  icon?: NmIconId;
+  /** Shows the icon alone, in a square. The label is still its accessible name. */
+  iconOnly?: boolean;
+  testId?: string;
+  onClick?: () => void;
+};
+
+export function NmButton(props: NmButtonProps): ReactNode {
+  const size = props.size ?? NM_BUTTON_SIZES.default;
+  const className = [
+    NM_BUTTON_CLASSES.root,
+    NM_BUTTON_CLASSES[props.tone],
+    NM_BUTTON_CLASSES[size],
+    props.block ? NM_BUTTON_CLASSES.block : null,
+    props.iconOnly ? NM_BUTTON_CLASSES.icon : null,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  logger.debug('render', props.label, { tone: props.tone, size });
+  return (
+    <button
+      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}
+    >
+      {props.icon ? <NmIcon id={props.icon} className="nm-button__icon" /> : null}
+      {props.iconOnly ? null : <span className="nm-button__label">{props.label}</span>}
+    </button>
+  );
+}
+
+export { NM_BUTTON_SIZES, NM_BUTTON_TONES };

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

@@ -0,0 +1,87 @@
+  .nm-button-group {
+    display: inline-flex;
+    align-items: stretch;
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  .nm-button-group[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* Groups inside a group sit apart. */
+  .nm-button-group:has(> .nm-button-group) {
+    gap: var(--nm-space-8);
+  }
+
+  .nm-button-group > :not(.nm-button-group, .nm-button-group__separator) {
+    position: relative;
+  }
+
+  .nm-button-group > :not(.nm-button-group, .nm-button-group__separator):hover,
+  .nm-button-group > :not(.nm-button-group, .nm-button-group__separator):focus-within {
+    z-index: 1;
+  }
+
+  /* Neighbours share a border, and only the outer corners stay round. */
+  .nm-button-group[data-orientation='horizontal'] > :not(.nm-button-group, .nm-button-group__separator):not(:first-child) {
+    margin-inline-start: calc(var(--nm-rule) * -1);
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  .nm-button-group[data-orientation='horizontal'] > :not(.nm-button-group, .nm-button-group__separator):not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .nm-button-group[data-orientation='vertical'] > :not(.nm-button-group, .nm-button-group__separator):not(:first-child) {
+    margin-block-start: calc(var(--nm-rule) * -1);
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  .nm-button-group[data-orientation='vertical'] > :not(.nm-button-group, .nm-button-group__separator):not(:last-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .nm-button-group > .nm-button-group__separator + * {
+    margin-inline-start: 0;
+    margin-block-start: 0;
+  }
+
+  .nm-button-group > :is(.nm-input, .nm-input-group, .nm-combobox__group) {
+    flex: 1;
+    min-width: var(--nm-width-popup-sm);
+  }
+
+  .nm-button-group__separator {
+    flex-shrink: 0;
+    align-self: stretch;
+    background: var(--nm-line-strong);
+  }
+
+  .nm-button-group__separator[data-orientation='vertical'] {
+    width: var(--nm-rule);
+  }
+
+  .nm-button-group__separator[data-orientation='horizontal'] {
+    height: var(--nm-rule);
+  }
+
+  .nm-button-group__text {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    min-height: var(--control-h);
+    padding: 0 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-muted);
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    white-space: nowrap;
+  }

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

@@ -0,0 +1,32 @@
+import { cloneElement, type ComponentProps, type ReactElement } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmSeparator } from '../nm-separator/nm-separator.tsx';
+
+/**
+ * Joins buttons, and the controls that sit beside them, into one bar. Neighbours share a border and only the outer
+ * corners stay round. Nest groups to set sets of buttons apart. The shadcn Button Group composition, styled by NIF tokens.
+ */
+export function NmButtonGroup({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: ComponentProps<'div'> & { orientation?: 'horizontal' | 'vertical' }) {
+  return <div role="group" data-slot="button-group" data-orientation={orientation} className={nmClass('nm-button-group', className)} {...props} />;
+}
+
+/** A line between buttons that have no border of their own. Outline buttons do not need one. */
+export function NmButtonGroupSeparator({ className, orientation = 'vertical', ...props }: ComponentProps<typeof NmSeparator>) {
+  return <NmSeparator data-slot="button-group-separator" orientation={orientation} className={nmClass('nm-button-group__separator', className as string)} {...props} />;
+}
+
+/** Text in the bar, set like a button. Give `render` an element, such as a Label, to draw the text with it. */
+export function NmButtonGroupText({ className, render, children, ...props }: ComponentProps<'div'> & { render?: ReactElement<{ className?: string }> }) {
+  const classes = nmClass('nm-button-group__text', className);
+  return render ? (
+    cloneElement(render, { className: nmClass(classes, render.props.className), ...props } as object, children)
+  ) : (
+    <div data-slot="button-group-text" className={classes} {...props}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,178 @@
+  .nm-calendar__root {
+    position: relative;
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    color: var(--nm-fg);
+  }
+
+  .nm-calendar__months {
+    display: flex;
+    gap: var(--nm-space-16);
+  }
+
+  .nm-calendar__month {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-calendar__nav {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--control-h);
+    pointer-events: none;
+  }
+
+  .nm-calendar__nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--control-h);
+    height: var(--control-h);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg-muted);
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  .nm-calendar__nav-button:hover:not(:disabled),
+  .nm-calendar__nav-button:focus-visible {
+    background: var(--nm-inset);
+    color: var(--nm-fg);
+    outline: none;
+  }
+
+  .nm-calendar__nav-button:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  .nm-calendar__chevron--left {
+    transform: rotate(90deg);
+  }
+
+  .nm-calendar__chevron--right {
+    transform: rotate(-90deg);
+  }
+
+  .nm-calendar__chevron--up {
+    transform: rotate(180deg);
+  }
+
+  .nm-calendar__caption {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--control-h);
+  }
+
+  .nm-calendar__caption-label {
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-calendar__grid {
+    border-collapse: collapse;
+  }
+
+  .nm-calendar__weekdays,
+  .nm-calendar__week {
+    height: var(--control-h);
+  }
+
+  .nm-calendar__weekday {
+    width: var(--control-h);
+    height: var(--control-h);
+    padding: 0;
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-regular);
+    text-align: center;
+  }
+
+  .nm-calendar__day {
+    width: var(--control-h);
+    height: var(--control-h);
+    padding: 0;
+    text-align: center;
+  }
+
+  .nm-calendar__day-button {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: var(--nm-rule) solid transparent;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .nm-calendar__day-button:hover {
+    background: var(--nm-inset);
+  }
+
+  .nm-calendar__day-button:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: calc(var(--nm-space-2) * -1);
+  }
+
+  .nm-calendar__day--today .nm-calendar__day-button {
+    border-color: var(--nm-stroke);
+  }
+
+  .nm-calendar__day--outside .nm-calendar__day-button {
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-calendar__day--disabled .nm-calendar__day-button {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  .nm-calendar__day--hidden {
+    visibility: hidden;
+  }
+
+  .nm-calendar__day--selected .nm-calendar__day-button {
+    border-color: var(--nm-fg);
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-calendar__day--range-middle {
+    background: var(--nm-panel);
+  }
+
+  .nm-calendar__day--range-middle .nm-calendar__day-button {
+    border-color: transparent;
+    background: transparent;
+    color: var(--nm-fg);
+    font-weight: var(--nm-weight-regular);
+  }
+
+  .nm-calendar__day--range-start,
+  .nm-calendar__day--range-end {
+    background: var(--nm-panel);
+  }
+
+  .nm-calendar__day--range-start {
+    border-radius: var(--nm-control-r) 0 0 var(--nm-control-r);
+  }
+
+  .nm-calendar__day--range-end {
+    border-radius: 0 var(--nm-control-r) var(--nm-control-r) 0;
+  }
+
+  .nm-calendar__day--range-start.nm-calendar__day--range-end {
+    border-radius: var(--nm-control-r);
+  }