@nordmanai/nif 0.1.0 → 0.2.0

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

@@ -0,0 +1,43 @@
+import { DayPicker, type ChevronProps, type DayPickerProps } from 'react-day-picker';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+function NmCalendarChevron({ orientation = 'left' }: ChevronProps) {
+  return <NmIcon id="chevron" className={`nm-calendar__chevron nm-calendar__chevron--${orientation}`} />;
+}
+
+/** react-day-picker, in the shadcn Calendar composition, drawn entirely by NIF tokens. Single, multiple or range. */
+export function NmCalendar({ className, showOutsideDays = true, ...props }: DayPickerProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={nmClass('nm-calendar', className)}
+      classNames={{
+        root: 'nm-calendar__root',
+        months: 'nm-calendar__months',
+        month: 'nm-calendar__month',
+        nav: 'nm-calendar__nav',
+        button_previous: 'nm-calendar__nav-button',
+        button_next: 'nm-calendar__nav-button',
+        month_caption: 'nm-calendar__caption',
+        caption_label: 'nm-calendar__caption-label',
+        month_grid: 'nm-calendar__grid',
+        weekdays: 'nm-calendar__weekdays',
+        weekday: 'nm-calendar__weekday',
+        week: 'nm-calendar__week',
+        day: 'nm-calendar__day',
+        day_button: 'nm-calendar__day-button',
+        selected: 'nm-calendar__day--selected',
+        today: 'nm-calendar__day--today',
+        outside: 'nm-calendar__day--outside',
+        disabled: 'nm-calendar__day--disabled',
+        hidden: 'nm-calendar__day--hidden',
+        range_start: 'nm-calendar__day--range-start',
+        range_middle: 'nm-calendar__day--range-middle',
+        range_end: 'nm-calendar__day--range-end',
+      }}
+      components={{ Chevron: NmCalendarChevron }}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,130 @@
+  .nm-card {
+    --nm-card-pad: var(--nm-space-16);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    min-width: 0;
+    padding: var(--nm-card-pad);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    text-decoration: none;
+    transition:
+      border-color 0.15s,
+      background 0.15s;
+  }
+
+  /* The small card is the compact one: 12px padding and the control radius. */
+  .nm-card[data-size='sm'] {
+    --nm-card-pad: var(--nm-space-12);
+    gap: var(--nm-space-8);
+    border-radius: var(--nm-control-r);
+  }
+
+  .nm-card[data-variant='outline'] {
+    background: transparent;
+  }
+
+  .nm-card[data-variant='muted'] {
+    border-color: transparent;
+    background: var(--nm-panel);
+  }
+
+  .nm-card[data-interactive] {
+    cursor: pointer;
+  }
+
+  .nm-card[data-interactive]:hover:not([data-disabled]) {
+    border-color: var(--nm-stroke);
+    background: var(--nm-inset);
+  }
+
+  .nm-card[data-interactive]:focus-visible {
+    border-color: var(--nm-fg);
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-card[data-selected] {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-card[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .nm-card__header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: start;
+    gap: var(--nm-space-2) var(--nm-space-12);
+  }
+
+  .nm-card__title {
+    grid-column: 1;
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-leading-snug);
+  }
+
+  .nm-card__description {
+    grid-column: 1;
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+    line-height: var(--nm-leading-normal);
+  }
+
+  .nm-card__action {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    align-self: start;
+    justify-self: end;
+  }
+
+  .nm-card__content {
+    color: var(--nm-fg-muted);
+    line-height: var(--nm-leading-normal);
+  }
+
+  .nm-card__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-card__media {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    display: flex;
+    align-items: flex-start;
+    padding-top: var(--nm-space-2);
+    color: var(--nm-fg-subtle);
+  }
+
+  /* With media, the header has three columns and the text moves to the middle one. */
+  .nm-card__header:has(.nm-card__media) {
+    grid-template-columns: auto 1fr auto;
+  }
+
+  .nm-card__header:has(.nm-card__media) > .nm-card__title,
+  .nm-card__header:has(.nm-card__media) > .nm-card__description {
+    grid-column: 2;
+  }
+
+  .nm-card__header:has(.nm-card__media) > .nm-card__action {
+    grid-column: 3;
+  }
+
+  .nm-card:has(.nm-card__media) > .nm-card__footer {
+    padding-left: calc(var(--nm-icon-button) + var(--nm-space-12));
+  }
+
+  .nm-card__header[data-align='center'] > .nm-card__media,
+  .nm-card__header[data-align='center'] > .nm-card__action {
+    align-self: center;
+    padding-top: 0;
+  }

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

@@ -0,0 +1,83 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export const NM_CARD_VARIANTS = ['default', 'outline', 'muted'] as const;
+export const NM_CARD_SIZES = ['default', 'sm'] as const;
+export type NmCardVariant = (typeof NM_CARD_VARIANTS)[number];
+export type NmCardSize = (typeof NM_CARD_SIZES)[number];
+
+type CardOptions = {
+  variant?: NmCardVariant;
+  size?: NmCardSize;
+  /** The card is the person's current choice. */
+  selected?: boolean;
+  /** The card cannot be used. */
+  disabled?: boolean;
+};
+
+/**
+ * A surface that groups related content. The shadcn Card composition, styled by NIF tokens.
+ * Give it an `href` and it becomes a link, with hover and focus states.
+ */
+export function NmCard({
+  className,
+  variant = 'default',
+  size = 'default',
+  selected,
+  disabled,
+  href,
+  ...props
+}: Omit<ComponentProps<'div'>, 'onClick'> & CardOptions & { href?: string; onClick?: ComponentProps<'a'>['onClick'] }) {
+  const common = {
+    'data-slot': 'card',
+    'data-variant': variant,
+    'data-size': size,
+    'data-selected': selected ? '' : undefined,
+    'data-disabled': disabled ? '' : undefined,
+    'data-interactive': href != null || props.onClick != null ? '' : undefined,
+    className: nmClass('nm-card', className),
+  } as const;
+  if (href != null) {
+    return (
+      <a
+        {...common}
+        href={disabled ? undefined : href}
+        aria-current={selected ? 'true' : undefined}
+        aria-disabled={disabled ? true : undefined}
+        {...(props as ComponentProps<'a'>)}
+      />
+    );
+  }
+  return <div {...common} {...(props as ComponentProps<'div'>)} />;
+}
+
+/** `align="center"` centres a leading icon and a trailing action against the text, as in a row of apps. */
+export function NmCardHeader({ className, align = 'start', ...props }: ComponentProps<'div'> & { align?: 'start' | 'center' }) {
+  return <div data-slot="card-header" data-align={align} className={nmClass('nm-card__header', className)} {...props} />;
+}
+
+export function NmCardTitle({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="card-title" className={nmClass('nm-card__title', className)} {...props} />;
+}
+
+export function NmCardDescription({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="card-description" className={nmClass('nm-card__description', className)} {...props} />;
+}
+
+/** Sits at the end of the header, beside the title. */
+export function NmCardAction({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="card-action" className={nmClass('nm-card__action', className)} {...props} />;
+}
+
+export function NmCardContent({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="card-content" className={nmClass('nm-card__content', className)} {...props} />;
+}
+
+export function NmCardFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="card-footer" className={nmClass('nm-card__footer', className)} {...props} />;
+}
+
+/** A leading icon or image in the header. The title, description and footer line up beside it. */
+export function NmCardMedia({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="card-media" className={nmClass('nm-card__media', className)} {...props} />;
+}

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

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import { NM_CHATBOX_ICON_SRC, type NmChatboxIconId } from '../../config/nm-chatbox-icons.ts';
+import { hasNmLucide, NmLucide } from '../nm-icon/nm-lucide.tsx';
+
+export const NM_CHATBOX_LUCIDE_MAP: Record<NmChatboxIconId, string> = {
+  paperclip: 'plus',
+  settings: 'settings',
+  globe: 'globe',
+  spreadsheet: 'spreadsheet',
+  pointer: 'mouse-pointer',
+  mic: 'mic',
+  'mic-off': 'mic-off',
+  'audio-lines': 'audio-lines',
+  send: 'send',
+  stop: 'stop',
+  loader: 'loader',
+  x: 'x',
+  check: 'check',
+  integration: 'cable',
+  app: 'app',
+  steer: 'workflow',
+  queue: 'ellipsis',
+  'interrupt-steer': 'pause',
+  'interrupt-send': 'monitor',
+};
+
+export function NmChatboxIcon({
+  id,
+  className,
+}: {
+  id: NmChatboxIconId;
+  className?: string;
+}): ReactNode {
+  const lucideId = NM_CHATBOX_LUCIDE_MAP[id];
+  if (lucideId != null && hasNmLucide(lucideId)) {
+    return <NmLucide id={lucideId} className={className ?? 'nm-icon'} />;
+  }
+  return <img className={className ?? 'nm-icon'} src={NM_CHATBOX_ICON_SRC[id]} alt="" />;
+}