@nordmanai/nif 0.1.0 → 0.2.0

package/registry/ui/components/nm-date-picker/nm-date-picker.css

@@ -0,0 +1,140 @@
+  .nm-picker__trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    width: 100%;
+    min-width: var(--nm-width-date);
+    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);
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 0.15s;
+  }
+
+  .nm-picker__trigger[data-empty] {
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-picker__trigger > .nm-icon {
+    flex-shrink: 0;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-picker__trigger:hover:not(:disabled) {
+    border-color: var(--nm-stroke);
+  }
+
+  .nm-picker__trigger:focus-visible,
+  .nm-picker__trigger[data-popup-open] {
+    border-color: var(--nm-fg);
+    outline: none;
+  }
+
+  .nm-picker__trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .nm-picker__trigger[aria-invalid='true'] {
+    border-color: var(--nm-destructive);
+  }
+
+  /* The popup is the popover, sized to its content. */
+  .nm-picker__popup {
+    width: auto;
+    padding: var(--nm-space-12);
+  }
+
+  .nm-picker__popup--row {
+    flex-direction: row;
+    gap: var(--nm-space-16);
+  }
+
+  .nm-picker__time {
+    display: flex;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-picker__column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+    max-height: var(--nm-height-picker);
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  .nm-picker__option {
+    min-width: var(--control-h-lg);
+    height: var(--control-h);
+    padding: 0 var(--nm-space-8);
+    border: 0;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .nm-picker__option:hover {
+    background: var(--nm-inset);
+  }
+
+  .nm-picker__option:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: calc(var(--nm-space-2) * -1);
+  }
+
+  .nm-picker__option[aria-selected='true'],
+  .nm-picker__option[aria-pressed='true'] {
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-picker__months {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-picker__year {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-picker__step {
+    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;
+  }
+
+  .nm-picker__step:hover,
+  .nm-picker__step:focus-visible {
+    background: var(--nm-inset);
+    color: var(--nm-fg);
+    outline: none;
+  }
+
+  .nm-picker__month-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--nm-space-4);
+  }

package/registry/ui/components/nm-date-picker/nm-date-picker.tsx

@@ -0,0 +1,153 @@
+import { useState, type ReactNode } from 'react';
+import type { DateRange } from 'react-day-picker';
+import { NmCalendar } from '../nm-calendar/nm-calendar.tsx';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import { NmPopover, NmPopoverContent, NmPopoverTrigger } from '../nm-popover/nm-popover.tsx';
+
+const dateText = (d: Date) => d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+const pad = (n: number) => String(n).padStart(2, '0');
+
+type TriggerProps = { icon: 'calendar' | 'clock'; text: string | null; placeholder: string; invalid?: boolean; disabled?: boolean; label?: string };
+
+function PickerTrigger(props: TriggerProps): ReactNode {
+  return (
+    <NmPopoverTrigger
+      className="nm-picker__trigger"
+      disabled={props.disabled}
+      aria-invalid={props.invalid ? true : undefined}
+      aria-label={props.label}
+      data-empty={props.text == null ? '' : undefined}
+    >
+      <NmIcon id={props.icon} />
+      <span>{props.text ?? props.placeholder}</span>
+    </NmPopoverTrigger>
+  );
+}
+
+type Common = { placeholder?: string; invalid?: boolean; disabled?: boolean; label?: string; className?: string };
+
+/** A date field. The calendar opens in a popover, so it follows the theme as everything else does. */
+export function NmDatePicker({ value, onValueChange, placeholder = 'Pick a date', ...rest }: Common & { value?: Date; onValueChange?: (date: Date | undefined) => void }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <NmPopover open={open} onOpenChange={setOpen}>
+      <PickerTrigger icon="calendar" text={value ? dateText(value) : null} placeholder={placeholder} {...rest} />
+      <NmPopoverContent className="nm-picker__popup" align="start">
+        <NmCalendar
+          mode="single"
+          selected={value}
+          onSelect={(next) => {
+            onValueChange?.(next);
+            setOpen(false);
+          }}
+          defaultMonth={value}
+        />
+      </NmPopoverContent>
+    </NmPopover>
+  );
+}
+
+export function NmDateRangePicker({ value, onValueChange, placeholder = 'Pick a range', ...rest }: Common & { value?: DateRange; onValueChange?: (range: DateRange | undefined) => void }) {
+  const text = value?.from ? `${dateText(value.from)}${value.to ? ` – ${dateText(value.to)}` : ''}` : null;
+  return (
+    <NmPopover>
+      <PickerTrigger icon="calendar" text={text} placeholder={placeholder} {...rest} />
+      <NmPopoverContent className="nm-picker__popup" align="start">
+        <NmCalendar mode="range" numberOfMonths={2} selected={value} onSelect={onValueChange} defaultMonth={value?.from} />
+      </NmPopoverContent>
+    </NmPopover>
+  );
+}
+
+/** A month field. Value is `YYYY-MM`. */
+export function NmMonthPicker({ value, onValueChange, placeholder = 'Pick a month', ...rest }: Common & { value?: string; onValueChange?: (month: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const now = new Date();
+  const [year, setYear] = useState(value ? Number(value.slice(0, 4)) : now.getFullYear());
+  const selected = value ? { y: Number(value.slice(0, 4)), m: Number(value.slice(5, 7)) } : null;
+  const names = Array.from({ length: 12 }, (_, i) => new Date(2000, i, 1).toLocaleDateString(undefined, { month: 'short' }));
+  const text = selected ? new Date(selected.y, selected.m - 1, 1).toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) : null;
+  return (
+    <NmPopover open={open} onOpenChange={setOpen}>
+      <PickerTrigger icon="calendar" text={text} placeholder={placeholder} {...rest} />
+      <NmPopoverContent className="nm-picker__popup" align="start">
+        <div className="nm-picker__months">
+          <div className="nm-picker__year">
+            <button type="button" className="nm-picker__step" aria-label="Previous year" onClick={() => setYear(year - 1)}><NmIcon id="chevron" className="nm-calendar__chevron--left" /></button>
+            <span>{year}</span>
+            <button type="button" className="nm-picker__step" aria-label="Next year" onClick={() => setYear(year + 1)}><NmIcon id="chevron" className="nm-calendar__chevron--right" /></button>
+          </div>
+          <div className="nm-picker__month-grid">
+            {names.map((name, i) => (
+              <button
+                key={name}
+                type="button"
+                className="nm-picker__option"
+                aria-pressed={selected?.y === year && selected.m === i + 1}
+                onClick={() => {
+                  onValueChange?.(`${year}-${pad(i + 1)}`);
+                  setOpen(false);
+                }}
+              >
+                {name}
+              </button>
+            ))}
+          </div>
+        </div>
+      </NmPopoverContent>
+    </NmPopover>
+  );
+}
+
+function TimeColumns(props: { value: string; onValueChange: (time: string) => void; minuteStep: number }) {
+  const [hour, minute] = props.value ? props.value.split(':').map(Number) : [undefined, undefined];
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: Math.ceil(60 / props.minuteStep) }, (_, i) => i * props.minuteStep);
+  return (
+    <div className="nm-picker__time">
+      <div className="nm-picker__column" role="listbox" aria-label="Hour">
+        {hours.map((h) => (
+          <button key={h} type="button" role="option" aria-selected={h === hour} className="nm-picker__option" onClick={() => props.onValueChange(`${pad(h)}:${pad(minute ?? 0)}`)}>{pad(h)}</button>
+        ))}
+      </div>
+      <div className="nm-picker__column" role="listbox" aria-label="Minute">
+        {minutes.map((m) => (
+          <button key={m} type="button" role="option" aria-selected={m === minute} className="nm-picker__option" onClick={() => props.onValueChange(`${pad(hour ?? 0)}:${pad(m)}`)}>{pad(m)}</button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** A time field in 24 hours. Value is `HH:mm`. */
+export function NmTimePicker({ value, onValueChange, placeholder = 'Pick a time', minuteStep = 5, ...rest }: Common & { value?: string; onValueChange?: (time: string) => void; minuteStep?: number }) {
+  return (
+    <NmPopover>
+      <PickerTrigger icon="clock" text={value || null} placeholder={placeholder} {...rest} />
+      <NmPopoverContent className="nm-picker__popup" align="start">
+        <TimeColumns value={value ?? ''} onValueChange={(t) => onValueChange?.(t)} minuteStep={minuteStep} />
+      </NmPopoverContent>
+    </NmPopover>
+  );
+}
+
+/** A date and a time in one field. */
+export function NmDateTimePicker({ value, onValueChange, placeholder = 'Pick a date and time', minuteStep = 5, ...rest }: Common & { value?: Date; onValueChange?: (date: Date | undefined) => void; minuteStep?: number }) {
+  const time = value ? `${pad(value.getHours())}:${pad(value.getMinutes())}` : '';
+  const withTime = (day: Date, t: string) => {
+    const [h, m] = t ? t.split(':').map(Number) : [0, 0];
+    const next = new Date(day);
+    next.setHours(h, m, 0, 0);
+    return next;
+  };
+  return (
+    <NmPopover>
+      <PickerTrigger icon="calendar" text={value ? `${dateText(value)}, ${time}` : null} placeholder={placeholder} {...rest} />
+      <NmPopoverContent className="nm-picker__popup nm-picker__popup--row" align="start">
+        <NmCalendar mode="single" selected={value} onSelect={(day) => onValueChange?.(day ? withTime(day, time) : undefined)} defaultMonth={value} />
+        <TimeColumns value={time} onValueChange={(t) => onValueChange?.(withTime(value ?? new Date(), t))} minuteStep={minuteStep} />
+      </NmPopoverContent>
+    </NmPopover>
+  );
+}
+

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

@@ -0,0 +1,84 @@
+  .nm-dialog__backdrop {
+    position: fixed;
+    z-index: var(--nm-menu-z);
+    inset: 0;
+    background: rgb(var(--nm-canvas-rgb) / 0.7);
+    transition: opacity 0.15s;
+  }
+
+  .nm-dialog__backdrop[data-starting-style],
+  .nm-dialog__backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  .nm-dialog {
+    position: fixed;
+    z-index: var(--nm-menu-z);
+    top: 20%;
+    left: 50%;
+    box-sizing: border-box;
+    width: min(var(--nm-width-dialog), calc(100% - var(--nm-space-24) * 2));
+    max-height: 70%;
+    overflow: hidden;
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    outline: none;
+    transform: translateX(-50%);
+    transition:
+      opacity 0.15s,
+      transform 0.15s;
+  }
+
+  .nm-dialog[data-starting-style],
+  .nm-dialog[data-ending-style] {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.98);
+  }
+
+  .nm-dialog__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    padding: var(--nm-space-24) var(--nm-space-24) 0;
+  }
+
+  .nm-dialog__title {
+    margin: 0;
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-dialog__description {
+    margin: 0;
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-dialog[data-size='full'] {
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-height: none;
+    border: 0;
+    border-radius: 0;
+    background: var(--nm-canvas);
+    transform: none;
+  }
+
+  .nm-dialog[data-size='full'][data-starting-style],
+  .nm-dialog[data-size='full'][data-ending-style] {
+    transform: none;
+  }
+
+  /* The way out of a full view sits in the corner, over the content. */
+  .nm-dialog__corner {
+    position: absolute;
+    z-index: 1;
+    right: var(--nm-space-12);
+    bottom: var(--nm-space-12);
+  }

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

@@ -0,0 +1,40 @@
+import type { ComponentProps } from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** Base UI Dialog, in the shadcn composition, styled by NIF tokens. */
+export function NmDialog(props: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+export function NmDialogTrigger(props: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+export function NmDialogClose(props: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+/** `size="full"` fills the screen, for a whole view. */
+export function NmDialogContent({ className, children, size = 'default', ...props }: DialogPrimitive.Popup.Props & { size?: 'default' | 'full' }) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop data-slot="dialog-overlay" className="nm-dialog__backdrop" />
+      <DialogPrimitive.Popup data-slot="dialog-content" data-size={size} className={nmClass('nm-dialog', className as string)} {...props}>
+        {children}
+      </DialogPrimitive.Popup>
+    </DialogPrimitive.Portal>
+  );
+}
+
+export function NmDialogHeader({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="dialog-header" className={nmClass('nm-dialog__header', className)} {...props} />;
+}
+
+export function NmDialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return <DialogPrimitive.Title data-slot="dialog-title" className={nmClass('nm-dialog__title', className as string)} {...props} />;
+}
+
+export function NmDialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return <DialogPrimitive.Description data-slot="dialog-description" className={nmClass('nm-dialog__description', className as string)} {...props} />;
+}

package/registry/ui/components/nm-dropdown/nm-dropdown-item.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+
+export type NmDropdownItem = {
+  id: string;
+  label?: string;
+  detail?: string;
+  /** Keyboard hint, such as ⌘K. Display only; the binding lives with the command. */
+  shortcut?: string;
+  icon?: NmIconId;
+  imageSrc?: string;
+  leading?: ReactNode;
+  separator?: boolean;
+  danger?: boolean;
+  disabled?: boolean;
+  checked?: boolean;
+  /** Publish row state. The row stays inactive while busy or live. */
+  mark?: 'idle' | 'busy' | 'live';
+  children?: readonly NmDropdownItem[];
+};
+
+export function isNmDropdownSeparator(item: NmDropdownItem): boolean {
+  return item.separator === true;
+}
+
+export function nmDropdownSeparator(id: string): NmDropdownItem {
+  return { id, separator: true };
+}
+
+export function dropdownBranchPath(
+  items: readonly NmDropdownItem[],
+  id: string,
+  trail: readonly string[] = [],
+): string[] | null {
+  for (const item of items) {
+    if (item.separator === true) {
+      continue;
+    }
+    if (item.id === id) {
+      return [...trail, id];
+    }
+    if (item.children != null) {
+      const nested = dropdownBranchPath(item.children, id, [...trail, item.id]);
+      if (nested != null) {
+        return nested;
+      }
+    }
+  }
+  return null;
+}
+
+/** Hover and click open this branch. They do not close it again. */
+export function openDropdownBranch(items: readonly NmDropdownItem[], id: string): string[] {
+  return dropdownBranchPath(items, id) ?? [id];
+}
+
+/** Opening a branch keeps only that branch and its parents. Closing it keeps the parents. */
+export function nextExpandedBranches(
+  items: readonly NmDropdownItem[],
+  expanded: readonly string[],
+  id: string,
+): string[] {
+  const path = dropdownBranchPath(items, id) ?? [id];
+  if (expanded.includes(id)) {
+    return path.slice(0, -1);
+  }
+  return path;
+}