@nordmanai/nif 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import { NM_ICONS, type NmIconId, type NmIconSpec } from '../../config/nm-icons.ts';
+import { hasNmLucide, NmLucide } from './nm-lucide.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-icon');
+
+export type NmIconProps = {
+  id: NmIconId;
+  className?: string;
+};
+
+function iconStrokes(path: string | readonly string[] | undefined): string[] {
+  if (path == null) {
+    return [];
+  }
+  if (typeof path === 'string') {
+    return [path];
+  }
+  return [...path];
+}
+
+export function NmIcon(props: NmIconProps): ReactNode {
+  if (hasNmLucide(props.id)) {
+    logger.debug('render', props.id);
+    return <NmLucide id={props.id} className={props.className} />;
+  }
+  const spec: NmIconSpec | undefined = NM_ICONS[props.id as keyof typeof NM_ICONS];
+  if (!spec) {
+    logger.warn('render', 'unknown icon', { id: props.id });
+    return null;
+  }
+  const strokes = iconStrokes(spec.path);
+  logger.debug('render', props.id);
+  return (
+    <svg
+      className={props.className == null ? 'nm-icon' : `nm-icon ${props.className}`}
+      data-icon={props.id}
+      viewBox={spec.viewBox}
+      fill="none"
+      aria-hidden="true"
+      focusable="false"
+    >
+      {spec.fill ? <path d={spec.fill} fill="currentColor" /> : null}
+      {strokes.map((d) => (
+        <path
+          key={d}
+          d={d}
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+      {spec.circles?.map((circle) => (
+        <circle
+          key={`${circle.cx}-${circle.cy}`}
+          cx={circle.cx}
+          cy={circle.cy}
+          r={circle.r}
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </svg>
+  );
+}

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

@@ -0,0 +1,180 @@
+import {
+  AppWindowMac,
+  ArrowLeft,
+  ArrowRight,
+  PanelLeft,
+  Rows2,
+  ArrowUp,
+  AudioLines,
+  Bot,
+  Box,
+  Brain,
+  Building,
+  Cable,
+  Calendar,
+  Check,
+  CircleCheck,
+  Clock,
+  Gauge,
+  Minus,
+  ChevronDown,
+  Code,
+  Copy,
+  Ellipsis,
+  File,
+  FileCode2,
+  FileText,
+  Server,
+  SquareDashedBottomCode,
+  SquareDashedMousePointer,
+  Folder,
+  Github,
+  Globe,
+  HardDrive,
+  Headphones,
+  Image,
+  ImagePlus,
+  LayoutGrid,
+  LibraryBig,
+  ListFilter,
+  LoaderCircle,
+  Mail,
+  Maximize2,
+  Menu,
+  RotateCcw,
+  MessageCircle,
+  MessageCircleDashed,
+  Mic,
+  MicOff,
+  MonitorStop,
+  Moon,
+  Music,
+  PanelRight,
+  Pause,
+  Play,
+  Plus,
+  Presentation,
+  Save,
+  Scan,
+  Search,
+  Settings,
+  Settings2,
+  Slack,
+  Square,
+  Sun,
+  Terminal,
+  TvMinimalPlay,
+  Upload,
+  UserRound,
+  UsersRound,
+  Workflow,
+  Wrench,
+  X,
+  type LucideIcon,
+} from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+
+export const NM_LUCIDE_FILLED_IDS = new Set<string>(['stop']);
+
+const LUCIDE: Partial<
+  Record<NmIconId | 'square-dashed-bottom-code' | 'layout-grid' | 'stop' | 'scan' | 'pause', LucideIcon>
+> = {
+  plus: Plus,
+  expand: Maximize2,
+  scan: Scan,
+  reload: RotateCcw,
+  user: UserRound,
+  paperclip: Plus,
+  settings: Settings,
+  mic: Mic,
+  'mic-off': MicOff,
+  'audio-lines': AudioLines,
+  send: ArrowUp,
+  stop: Square,
+  chevron: ChevronDown,
+  check: Check,
+  'circle-check': CircleCheck,
+  code: Code,
+  'file-code': FileCode2,
+  console: FileCode2,
+  'mouse-pointer': SquareDashedMousePointer,
+  copy: Copy,
+  globe: Globe,
+  chat: MessageCircle,
+  'chat-dashed': MessageCircleDashed,
+  folder: Folder,
+  bot: Bot,
+  app: AppWindowMac,
+  layers: Box,
+  users: UsersRound,
+  building: Building,
+  'file-text': FileText,
+  wrench: Wrench,
+  file: File,
+  brain: Brain,
+  library: LibraryBig,
+  'layout-grid': LayoutGrid,
+  panel: PanelRight,
+  pause: Pause,
+  play: Play,
+  workflow: Workflow,
+  ellipsis: Ellipsis,
+  spreadsheet: MonitorStop,
+  'square-dashed-bottom-code': SquareDashedBottomCode,
+  cable: Cable,
+  menu: Menu,
+  loader: LoaderCircle,
+  monitor: MonitorStop,
+  server: Server,
+  filter: ListFilter,
+  sliders: Settings2,
+  upload: Upload,
+  image: Image,
+  'image-plus': ImagePlus,
+  music: Music,
+  headphones: Headphones,
+  video: TvMinimalPlay,
+  search: Search,
+  presentation: Presentation,
+  terminal: Terminal,
+  x: X,
+  save: Save,
+  mail: Mail,
+  calendar: Calendar,
+  clock: Clock,
+  gauge: Gauge,
+  minus: Minus,
+  'hard-drive': HardDrive,
+  slack: Slack,
+  github: Github,
+  sun: Sun,
+  moon: Moon,
+  'arrow-left': ArrowLeft,
+  'arrow-right': ArrowRight,
+  'panel-left': PanelLeft,
+  rows: Rows2,
+};
+
+export function hasNmLucide(id: string): boolean {
+  return id in LUCIDE;
+}
+
+export function NmLucide({ id, className }: { id: string; className?: string }): ReactNode {
+  const Icon = LUCIDE[id as NmIconId | 'square-dashed-bottom-code' | 'layout-grid' | 'stop'];
+  if (Icon == null) {
+    return null;
+  }
+  const filled = NM_LUCIDE_FILLED_IDS.has(id);
+  const baseClass = filled ? 'nm-icon nm-icon--filled' : 'nm-icon';
+  const iconClass = className == null ? baseClass : `${baseClass} ${className}`;
+  return (
+    <Icon
+      className={iconClass}
+      data-icon={id}
+      strokeWidth={filled ? undefined : 2}
+      aria-hidden
+      focusable="false"
+    />
+  );
+}

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

@@ -0,0 +1,56 @@
+import type { MouseEvent as ReactMouseEvent, ReactNode, Ref } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import { NordmanIconButton } from '../nordman-icon-button/nordman-icon-button.tsx';
+import { NM_ICON_BUTTON_TONES } from '../../config/nm-icon-button.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-icon-border');
+
+export type NmIconBorderProps = {
+  label: string;
+  icon?: NmIconId;
+  imageSrc?: string;
+  pressed?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  ariaDisabled?: boolean;
+  busy?: boolean;
+  expanded?: boolean;
+  popup?: 'listbox';
+  controls?: string;
+  buttonRef?: Ref<HTMLButtonElement>;
+  className?: string;
+  children?: ReactNode;
+  testId?: string;
+  onClick?: (event: ReactMouseEvent<HTMLButtonElement>) => void;
+};
+
+export function NmIconBorder(props: NmIconBorderProps): ReactNode {
+  logger.debug('render', props.label, {
+    icon: props.icon,
+    pressed: props.pressed === true,
+    disabled: props.disabled === true,
+  });
+  return (
+    <NordmanIconButton
+      ref={props.buttonRef}
+      label={props.label}
+      glyph={props.icon}
+      imageSrc={props.imageSrc}
+      tone={NM_ICON_BUTTON_TONES.subtle}
+      pressed={props.pressed}
+      checked={props.checked}
+      disabled={props.disabled}
+      ariaDisabled={props.ariaDisabled}
+      busy={props.busy}
+      expanded={props.expanded}
+      popup={props.popup}
+      controls={props.controls}
+      className={props.className}
+      testId={props.testId}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </NordmanIconButton>
+  );
+}

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

@@ -0,0 +1,75 @@
+  .nm-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--nm-field-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);
+    color-scheme: inherit;
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-leading-ui);
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  .nm-input::placeholder {
+    color: var(--nm-fg-subtle);
+    opacity: 1;
+  }
+
+  .nm-input:hover:not(:disabled) {
+    border-color: var(--nm-stroke);
+  }
+
+  .nm-input:focus-visible {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-input:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .nm-input[aria-invalid='true'],
+  .nm-input[data-invalid] {
+    border-color: var(--nm-destructive);
+  }
+
+  .nm-input[type='file'] {
+    padding: 0 var(--control-px) 0 0;
+    line-height: var(--nm-field-h);
+  }
+
+  .nm-input[type='file']::file-selector-button {
+    height: 100%;
+    margin-right: var(--control-px);
+    padding: 0 var(--control-px);
+    border: 0;
+    border-right: var(--nm-rule) solid var(--nm-line-strong);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .nm-input[type='date'],
+  .nm-input[type='time'],
+  .nm-input[type='datetime-local'],
+  .nm-input[type='month'],
+  .nm-input[type='week'] {
+    min-width: var(--nm-width-date);
+  }
+
+  .nm-input::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.6;
+  }
+
+  .nm-input::-webkit-calendar-picker-indicator:hover {
+    opacity: 1;
+  }

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

@@ -0,0 +1,7 @@
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** Base UI Input, in the shadcn composition. Text, email, password, number, search, tel, url, date, time and more. */
+export function NmInput({ className, type, ...props }: InputPrimitive.Props & { type?: string }) {
+  return <InputPrimitive data-slot="input" type={type} className={nmClass('nm-input', className as string)} {...props} />;
+}

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

@@ -0,0 +1,66 @@
+  .nm-input-group {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--nm-field-h);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-r);
+    background: var(--nm-raised);
+    transition: border-color 0.15s;
+  }
+
+  .nm-input-group:hover {
+    border-color: var(--nm-stroke);
+  }
+
+  .nm-input-group:focus-within {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-input-group:has([aria-invalid='true']) {
+    border-color: var(--nm-destructive);
+  }
+
+  .nm-input-group__addon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-8);
+    padding: 0 var(--control-px);
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-input-group__addon[data-align='inline-start'] {
+    order: -1;
+    padding-right: 0;
+  }
+
+  .nm-input-group__addon[data-align='inline-end'] {
+    order: 1;
+    padding-left: 0;
+  }
+
+  .nm-input-group__text {
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    white-space: nowrap;
+  }
+
+  .nm-input-group__control {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0 var(--control-px);
+    border: 0;
+    background: transparent;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    outline: none;
+  }
+
+  .nm-input-group__control::placeholder {
+    color: var(--nm-fg-subtle);
+    opacity: 1;
+  }

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

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** An input with something attached: an icon, a unit, a button. The group draws the frame. */
+export function NmInputGroup({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="input-group" role="group" className={nmClass('nm-input-group', className)} {...props} />;
+}
+
+export function NmInputGroupAddon({ className, align = 'inline-start', ...props }: ComponentProps<'div'> & { align?: 'inline-start' | 'inline-end' }) {
+  return <div data-slot="input-group-addon" data-align={align} className={nmClass('nm-input-group__addon', className)} {...props} />;
+}
+
+export function NmInputGroupText({ className, ...props }: ComponentProps<'span'>) {
+  return <span className={nmClass('nm-input-group__text', className)} {...props} />;
+}
+
+export function NmInputGroupInput({ className, ...props }: InputPrimitive.Props) {
+  return <InputPrimitive data-slot="input-group-control" className={nmClass('nm-input-group__control', className as string)} {...props} />;
+}

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

@@ -0,0 +1,11 @@
+  .nm-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-leading-snug);
+    user-select: none;
+  }

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

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

package/registry/ui/components/nm-list-item/nm-list-item.css

@@ -0,0 +1,177 @@
+.nm-list-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--nm-space-8);
+  height: var(--nm-list-row);
+  min-height: var(--nm-list-row);
+  max-height: var(--nm-list-row);
+  padding: var(--nm-space-12) var(--nm-row-inline);
+  border-radius: var(--nm-field-radius);
+  background: var(--nm-raised);
+  color: var(--nm-stroke);
+  font-family: var(--nm-font);
+  font-size: var(--nm-type-ui);
+  font-weight: var(--nm-weight-medium);
+  line-height: var(--nm-leading-ui);
+  letter-spacing: var(--nm-track);
+}
+
+.nm-list-item--marked {
+  padding-block: var(--nm-space-6);
+  color: var(--nm-fg);
+}
+
+.nm-list-item--icon {
+  color: var(--nm-fg-subtle);
+}
+
+.nm-list-item--face {
+  height: auto;
+  min-height: calc(var(--nm-list-face) + var(--nm-space-12) * 2);
+  max-height: none;
+  padding: var(--nm-space-12) var(--nm-row-inline);
+  background: transparent;
+  color: var(--nm-fg);
+}
+
+.nm-list-item--face .nm-list-item__lead {
+  width: var(--nm-list-face);
+  height: var(--nm-list-face);
+  overflow: hidden;
+  border-radius: calc(var(--nm-list-face) / 2);
+}
+
+.nm-list-item--face .nm-list-item__lead svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.nm-list-item--face > span > .nm-icon,
+.nm-list-item__rest .nm-icon {
+  color: var(--nm-fg-subtle);
+}
+
+.nm-list-item__rest .nm-icon {
+  display: block;
+  box-sizing: content-box;
+  width: var(--nm-icon-button);
+  height: var(--nm-icon-button);
+  padding: var(--nm-icon-pad);
+}
+
+.nm-list-item__identity {
+  display: flex;
+  align-items: center;
+  gap: var(--nm-space-8);
+  min-width: 0;
+}
+
+.nm-list-item__lead {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: var(--nm-icon-button);
+  height: var(--nm-icon-button);
+  background: transparent;
+}
+
+.nm-list-item__lead > *,
+.nm-list-item:not(.nm-list-item--face) .nm-list-item__lead svg {
+  display: block;
+  width: var(--nm-icon-button);
+  height: var(--nm-icon-button);
+}
+
+.nm-list-item__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nm-list-item__open {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.nm-list-item__detail {
+  color: var(--nm-line);
+  white-space: nowrap;
+}
+
+.nm-list-item__action {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.nm-list-item > span > .nm-icon {
+  display: block;
+  box-sizing: content-box;
+  width: var(--nm-icon-button);
+  height: var(--nm-icon-button);
+  padding: var(--nm-icon-pad);
+  color: var(--nm-stroke);
+}
+
+.nm-list-item__menu {
+  display: inline-flex;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--nm-fg);
+  cursor: pointer;
+}
+
+.nm-list-item__menu .nm-icon {
+  display: block;
+  box-sizing: content-box;
+  width: var(--nm-icon-button);
+  height: var(--nm-icon-button);
+  padding: var(--nm-icon-pad);
+}
+
+.nm-list-item__menu .nm-dropdown .nm-icon {
+  padding: 0;
+}
+
+.nm-list-item:hover,
+.nm-list-item:focus-within {
+  padding-block: var(--nm-space-6);
+  background: var(--nm-inset);
+  color: var(--nm-fg);
+}
+
+.nm-list-item:has(.nm-list-item__action):hover,
+.nm-list-item:has(.nm-list-item__action):focus-within {
+  padding-block: var(--nm-space-12);
+}
+
+.nm-list-item--face:hover,
+.nm-list-item--face:focus-within {
+  padding: var(--nm-space-12) var(--nm-row-inline);
+  background: var(--nm-inset);
+}
+
+.nm-list-item:hover .nm-list-item__detail,
+.nm-list-item:focus-within .nm-list-item__detail,
+.nm-list-item:hover .nm-list-item__rest,
+.nm-list-item:focus-within .nm-list-item__rest {
+  display: none;
+}
+
+
+.nm-list-item:has(.nm-list-item__action, .nm-list-item__menu, .nm-list-item__rest) {
+  padding-right: var(--nm-row-inline-end);
+}