@nordmanai/nif 0.1.0 → 0.2.0

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

@@ -0,0 +1,355 @@
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEventHandler,
+  type ReactNode,
+  type Ref,
+} from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_FIELD_CLASSES,
+  NM_FIELD_KINDS,
+  NM_FIELD_LAYOUT,
+  type NmFieldKind,
+  type NmFieldLayout,
+  type NmFieldOption,
+} from '../../config/nm-field.ts';
+import {
+  NM_DROPDOWN_ALIGN,
+  NM_DROPDOWN_REVEAL,
+  NM_DROPDOWN_TRIGGER,
+} from '../../config/nm-dropdown.ts';
+import { NmDropdown, type NmDropdownItem } from '../nm-dropdown/nm-dropdown.tsx';
+import { createLogger } from '../../kit-logger.ts';
+import { NmCombobox, NmComboboxContent, NmComboboxEmpty, NmComboboxInput, NmComboboxItem, NmComboboxList } from '../nm-combobox/nm-combobox.tsx';
+import { NmSelect, NmSelectContent, NmSelectItem, NmSelectTrigger, NmSelectValue } from '../nm-select/nm-select.tsx';
+import { NmColorSwatch } from '../nm-color-picker/nm-color-picker.tsx';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+const logger = createLogger('interface-nm-field');
+
+export type NmFieldProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  kind?: NmFieldKind;
+  layout?: NmFieldLayout;
+  caption?: string;
+  placeholder?: string;
+  icon?: NmIconId;
+  /** Mark shown inside the field, before the value. */
+  leading?: ReactNode;
+  leadingSize?: 'mark' | 'face';
+  /** Keeps the value in the primary text color when the field is read-only. */
+  emphasis?: boolean;
+  trailing?: ReactNode;
+  /** Ellipsis menu. Hidden until the field is hovered or focused. */
+  menuItems?: readonly NmDropdownItem[];
+  menuLabel?: string;
+  onMenuSelect?: (id: string) => void;
+  options?: readonly NmFieldOption[];
+  searchPlaceholder?: string;
+  /** What a searchable select says when nothing matches. */
+  emptyLabel?: string;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  onAdd?: () => void;
+  addLabel?: string;
+  addIcon?: NmIconId;
+  testId?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  name?: string;
+  id?: string;
+  autoComplete?: string;
+  minLength?: number;
+  maxLength?: number;
+  className?: string;
+  inputRef?: Ref<HTMLInputElement>;
+  describedBy?: string;
+  invalid?: boolean;
+  keyShortcuts?: string;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
+  onFocus?: () => void;
+  onBlur?: () => void;
+};
+
+function OptionSwatches(props: { colors?: readonly string[] }): ReactNode {
+  return props.colors?.length ? (
+    <span className="nm-field__swatches">
+      {props.colors.map((color, index) => <NmColorSwatch key={index} color={color} shape="round" />)}
+    </span>
+  ) : null;
+}
+
+export const NmField = forwardRef<HTMLDivElement, NmFieldProps>(
+  function NmField(props, ref): ReactNode {
+    const kind = props.kind ?? NM_FIELD_KINDS.text;
+    const layout = props.layout ?? NM_FIELD_LAYOUT.inline;
+    const generatedId = useId();
+    const controlId = props.id ?? generatedId;
+    const [open, setOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    logger.debug('render', props.label, { kind, layout, icon: props.icon });
+
+    if (layout === NM_FIELD_LAYOUT.stack) {
+      return (
+        <div
+          ref={ref}
+          className={
+            props.className
+              ? `${NM_FIELD_CLASSES.root} ${NM_FIELD_CLASSES.stack} ${props.className}`
+              : `${NM_FIELD_CLASSES.root} ${NM_FIELD_CLASSES.stack}`
+          }
+          data-kind={kind}
+          data-leading={props.leadingSize}
+        >
+          {props.caption ? (
+            <label className={NM_FIELD_CLASSES.caption} htmlFor={controlId}>
+              {props.caption}
+            </label>
+          ) : null}
+          <div className={NM_FIELD_CLASSES.row}>
+            <StackControl
+              {...props}
+              kind={kind}
+              controlId={controlId}
+              open={open}
+              setOpen={setOpen}
+              searchQuery={searchQuery}
+              setSearchQuery={setSearchQuery}
+            />
+            {props.onAdd ? (
+              <button
+                className={NM_FIELD_CLASSES.add}
+                type="button"
+                aria-label={props.addLabel ?? props.label}
+                onClick={props.onAdd}
+              >
+                <NmIcon id={props.addIcon ?? 'plus'} />
+              </button>
+            ) : null}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={
+          props.className ? `${NM_FIELD_CLASSES.root} ${props.className}` : NM_FIELD_CLASSES.root
+        }
+      >
+        {props.icon ? <NmIcon id={props.icon} className={NM_FIELD_CLASSES.icon} /> : null}
+        <input
+          ref={props.inputRef}
+          className={NM_FIELD_CLASSES.control}
+          id={props.id}
+          name={props.name}
+          type={
+            kind === NM_FIELD_KINDS.select || kind === NM_FIELD_KINDS.area
+              ? NM_FIELD_KINDS.text
+              : kind
+          }
+          value={props.value}
+          placeholder={props.placeholder}
+          aria-label={props.label}
+          aria-describedby={props.describedBy}
+          aria-keyshortcuts={props.keyShortcuts}
+          disabled={props.disabled}
+          readOnly={props.readOnly}
+          autoComplete={props.autoComplete}
+          minLength={props.minLength}
+          maxLength={props.maxLength}
+          data-testid={props.testId}
+          onChange={(event) => props.onChange(event.target.value)}
+          onKeyDown={props.onKeyDown}
+          onKeyUp={props.onKeyUp}
+          onFocus={props.onFocus}
+          onBlur={props.onBlur}
+        />
+        {props.trailing != null ? (
+          <div className={NM_FIELD_CLASSES.trail}>{props.trailing}</div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+function StackControl(
+  props: NmFieldProps & {
+    kind: NmFieldKind;
+    controlId: string;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+  },
+): ReactNode {
+  const boxRef = useRef<HTMLDivElement | null>(null);
+  /** The list lines up with the whole box of the field, not with the control inside it. */
+  const [boxEl, setBoxEl] = useState<HTMLDivElement | null>(null);
+  const { open, setOpen, setSearchQuery, onSearchChange } = props;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onPointer = (event: MouseEvent) => {
+      if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
+        setOpen(false);
+        setSearchQuery('');
+        onSearchChange?.('');
+      }
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false);
+        setSearchQuery('');
+        onSearchChange?.('');
+      }
+    };
+    document.addEventListener('mousedown', onPointer);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onPointer);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open, setOpen, setSearchQuery, onSearchChange]);
+
+  const icon = props.icon ?? (props.kind === NM_FIELD_KINDS.search ? 'search' : undefined);
+  const selected = props.options?.find((option) => option.id === props.value);
+  const menu =
+    props.menuItems != null && props.menuItems.length > 0 ? (
+      <NmDropdown
+        label={props.menuLabel ?? props.label}
+        trigger={NM_DROPDOWN_TRIGGER.iconButton}
+        icon="ellipsis"
+        align={NM_DROPDOWN_ALIGN.end}
+        reveal={NM_DROPDOWN_REVEAL.hover}
+        items={props.menuItems}
+        onSelect={(id) => props.onMenuSelect?.(id)}
+      />
+    ) : null;
+  let editor: ReactNode;
+  if (props.kind === NM_FIELD_KINDS.select && props.searchPlaceholder == null) {
+    const options = props.options ?? [];
+    const labelOf = (id: string) => {
+      const option = options.find((o) => o.id === id);
+      return option ? <>{option.label}<OptionSwatches colors={option.swatches} /></> : (props.placeholder ?? props.label);
+    };
+    editor = (
+      <NmSelect value={props.value} onValueChange={(next) => next != null && props.onChange(String(next))} disabled={props.disabled}>
+        <NmSelectTrigger bare id={props.controlId} aria-label={props.label} className={NM_FIELD_CLASSES.control} data-testid={props.testId}>
+          <NmSelectValue>{(value: string) => <span className="nm-field__value">{value ? labelOf(value) : (props.placeholder ?? props.label)}</span>}</NmSelectValue>
+        </NmSelectTrigger>
+        <NmSelectContent anchor={boxEl}>
+          {options.map((option) => (
+            <NmSelectItem key={option.id} value={option.id}>
+              {option.label}
+              <OptionSwatches colors={option.swatches} />
+            </NmSelectItem>
+          ))}
+        </NmSelectContent>
+      </NmSelect>
+    );
+  } else if (props.kind === NM_FIELD_KINDS.select) {
+    // A select with a search box is a combobox: type to filter, then choose.
+    type Item = { value: string; label: string; swatches?: readonly string[] };
+    const items: Item[] = (props.options ?? []).map((o) => ({ value: o.id, label: o.label, swatches: o.swatches }));
+    const chosen = items.find((item) => item.value === props.value) ?? null;
+    editor = (
+      <NmCombobox<Item>
+        items={items}
+        value={chosen}
+        onValueChange={(item) => item != null && props.onChange(item.value)}
+        onInputValueChange={(text) => props.onSearchChange?.(text)}
+        filter={props.searchValue != null ? null : undefined}
+        itemToStringLabel={(item) => item.label}
+        isItemEqualToValue={(a, b) => a.value === b.value}
+        disabled={props.disabled}
+      >
+        <NmComboboxInput bare id={props.controlId} aria-label={props.label} placeholder={props.searchPlaceholder} className={NM_FIELD_CLASSES.control} />
+        <NmComboboxContent anchor={boxEl}>
+          <NmComboboxEmpty>{props.emptyLabel ?? 'No results'}</NmComboboxEmpty>
+          <NmComboboxList>
+            {(item: Item) => (
+              <NmComboboxItem key={item.value} value={item}>
+                {item.label}
+                <OptionSwatches colors={item.swatches} />
+              </NmComboboxItem>
+            )}
+          </NmComboboxList>
+        </NmComboboxContent>
+      </NmCombobox>
+    );
+  } else if (props.kind === NM_FIELD_KINDS.area) {
+    editor = (
+      <textarea
+        className={NM_FIELD_CLASSES.control}
+        id={props.controlId}
+        name={props.name}
+        value={props.value}
+        placeholder={props.placeholder}
+        aria-label={props.caption ? undefined : props.label}
+        disabled={props.disabled}
+        readOnly={props.readOnly}
+        maxLength={props.maxLength}
+        data-testid={props.testId}
+        onChange={(event) => props.onChange(event.target.value)}
+      />
+    );
+  } else {
+    editor = (
+      <input
+        ref={props.inputRef}
+        className={NM_FIELD_CLASSES.control}
+        id={props.controlId}
+        name={props.name}
+        type={props.kind}
+        value={props.value}
+        placeholder={props.placeholder}
+        aria-label={props.caption ? undefined : props.label}
+        aria-describedby={props.describedBy}
+        aria-invalid={props.invalid || undefined}
+        data-emphasis={props.emphasis ? 'true' : undefined}
+        disabled={props.disabled}
+        readOnly={props.readOnly}
+        autoComplete={props.autoComplete}
+        minLength={props.minLength}
+        maxLength={props.maxLength}
+        data-testid={props.testId}
+        onChange={(event) => props.onChange(event.target.value)}
+        onKeyDown={props.onKeyDown}
+        onKeyUp={props.onKeyUp}
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
+      />
+    );
+  }
+  return (
+    <div ref={(el) => {
+        boxRef.current = el;
+        setBoxEl(el);
+      }} className={NM_FIELD_CLASSES.box} data-nm-menu={menu != null ? '' : undefined}>
+      {icon ? <NmIcon id={icon} className={NM_FIELD_CLASSES.icon} /> : null}
+      {props.leading != null ? (
+        <span className={NM_FIELD_CLASSES.mark}>{props.leading}</span>
+      ) : null}
+      {editor}
+      {props.trailing != null || menu != null ? (
+        <div className={NM_FIELD_CLASSES.trail}>
+          {props.trailing}
+          {menu}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export { NM_FIELD_KINDS, NM_FIELD_LAYOUT };

package/registry/ui/components/nm-form-field/nm-form-field.css

@@ -0,0 +1,103 @@
+  .nm-field-set {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-16);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .nm-field-legend {
+    margin-bottom: var(--nm-space-4);
+    padding: 0;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-field-legend[data-variant='label'] {
+    font-size: var(--nm-type-ui);
+  }
+
+  .nm-field-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-24);
+    width: 100%;
+  }
+
+  .nm-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+    width: 100%;
+  }
+
+  .nm-form-field[data-orientation='horizontal'] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--nm-space-12);
+  }
+
+  .nm-form-field[data-disabled] {
+    opacity: 0.5;
+  }
+
+  .nm-field-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+    min-width: 0;
+  }
+
+  .nm-field-title {
+    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);
+  }
+
+  .nm-field-description {
+    margin: 0;
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    line-height: var(--nm-leading-snug);
+  }
+
+  .nm-field-error {
+    color: var(--nm-destructive);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    line-height: var(--nm-leading-snug);
+  }
+
+  /* Two lines with the text between them. No background is needed, so it sits on any surface. */
+  .nm-field-separator {
+    display: flex;
+    align-items: center;
+    min-height: var(--nm-space-8);
+  }
+
+  .nm-field-separator[data-content] {
+    gap: var(--nm-space-12);
+  }
+
+  .nm-field-separator::before,
+  .nm-field-separator::after {
+    content: '';
+    flex: 1;
+    height: var(--nm-rule);
+    background: var(--nm-line);
+  }
+
+  .nm-field-separator__text {
+    flex-shrink: 0;
+    color: var(--nm-fg-subtle);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+  }

package/registry/ui/components/nm-form-field/nm-form-field.tsx

@@ -0,0 +1,71 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmLabel } from '../nm-label/nm-label.tsx';
+
+/** The shadcn Field family. NmField is the older all-in-one field. These parts compose any control into a form. */
+export function NmFieldSet({ className, ...props }: ComponentProps<'fieldset'>) {
+  return <fieldset data-slot="field-set" className={nmClass('nm-field-set', className)} {...props} />;
+}
+
+export function NmFieldLegend({ className, variant = 'legend', ...props }: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  return <legend data-slot="field-legend" data-variant={variant} className={nmClass('nm-field-legend', className)} {...props} />;
+}
+
+export function NmFieldGroup({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="field-group" className={nmClass('nm-field-group', className)} {...props} />;
+}
+
+export function NmFormField({
+  className,
+  orientation = 'vertical',
+  invalid,
+  disabled,
+  ...props
+}: ComponentProps<'div'> & { orientation?: 'vertical' | 'horizontal'; invalid?: boolean; disabled?: boolean }) {
+  return (
+    <div
+      data-slot="field"
+      role="group"
+      data-orientation={orientation}
+      data-invalid={invalid ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
+      className={nmClass('nm-form-field', className)}
+      {...props}
+    />
+  );
+}
+
+export function NmFieldContent({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="field-content" className={nmClass('nm-field-content', className)} {...props} />;
+}
+
+export function NmFieldLabel({ className, ...props }: ComponentProps<'label'>) {
+  return <NmLabel data-slot="field-label" className={nmClass('nm-field-label', className)} {...props} />;
+}
+
+export function NmFieldTitle({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="field-title" className={nmClass('nm-field-title', className)} {...props} />;
+}
+
+export function NmFieldDescription({ className, ...props }: ComponentProps<'p'>) {
+  return <p data-slot="field-description" className={nmClass('nm-field-description', className)} {...props} />;
+}
+
+export function NmFieldError({ className, children, ...props }: ComponentProps<'div'>) {
+  if (children == null) {
+    return null;
+  }
+  return (
+    <div data-slot="field-error" role="alert" className={nmClass('nm-field-error', className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function NmFieldSeparator({ className, children, ...props }: ComponentProps<'div'>) {
+  return (
+    <div data-slot="field-separator" data-content={children != null ? '' : undefined} className={nmClass('nm-field-separator', className)} {...props}>
+      {children != null ? <span className="nm-field-separator__text">{children}</span> : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+  .nm-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--nm-width-tile), 1fr));
+    gap: var(--nm-space-12);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nm-gallery__cell {
+    display: flex;
+    min-width: 0;
+  }
+
+  .nm-gallery__item {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+    width: 100%;
+    padding: var(--nm-space-8);
+    border: var(--nm-rule) solid transparent;
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font: inherit;
+    font-size: var(--nm-type-ui-sm);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .nm-gallery__item:hover {
+    background: var(--nm-line);
+  }
+
+  .nm-gallery__item[data-selected] {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-gallery__item:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-gallery__media {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 4 / 3;
+    overflow: hidden;
+    border-radius: var(--nm-radius-md);
+    background: var(--nm-inset);
+  }
+
+  .nm-gallery__media > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .nm-gallery__label {
+    overflow: hidden;
+    color: var(--nm-fg-muted);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }

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

@@ -0,0 +1,31 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** Images, or any media, in a grid. Each item is a button, so choosing one opens it, for example in the side panel. */
+export function NmGallery({ className, ...props }: ComponentProps<'ul'>) {
+  return <ul data-slot="gallery" className={nmClass('nm-gallery', className)} {...props} />;
+}
+
+export function NmGalleryItem({
+  className,
+  label,
+  selected,
+  children,
+  ...props
+}: Omit<ComponentProps<'button'>, 'children'> & { label: string; selected?: boolean; children: ReactNode }) {
+  return (
+    <li className="nm-gallery__cell">
+      <button
+        type="button"
+        data-slot="gallery-item"
+        data-selected={selected ? '' : undefined}
+        aria-pressed={selected ?? undefined}
+        className={nmClass('nm-gallery__item', className)}
+        {...props}
+      >
+        <span className="nm-gallery__media">{children}</span>
+        <span className="nm-gallery__label">{label}</span>
+      </button>
+    </li>
+  );
+}

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

@@ -0,0 +1,26 @@
+  .nm-hover-card__positioner {
+    z-index: var(--nm-menu-z);
+  }
+
+  .nm-hover-card {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    width: var(--nm-width-popup-sm);
+    padding: var(--nm-panel-pad);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-menu-radius);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    line-height: var(--nm-leading-normal);
+    outline: none;
+    transition: opacity 0.12s;
+  }
+
+  .nm-hover-card[data-starting-style],
+  .nm-hover-card[data-ending-style] {
+    opacity: 0;
+  }

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

@@ -0,0 +1,28 @@
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** Base UI Preview Card, in the shadcn hover-card composition, styled by NIF tokens. */
+export function NmHoverCard(props: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+export function NmHoverCardTrigger(props: PreviewCardPrimitive.Trigger.Props) {
+  return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+}
+
+export function NmHoverCardContent({
+  className,
+  side = 'bottom',
+  sideOffset = 8,
+  align = 'center',
+  alignOffset = 0,
+  ...props
+}: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+  return (
+    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+      <PreviewCardPrimitive.Positioner align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className="nm-hover-card__positioner">
+        <PreviewCardPrimitive.Popup data-slot="hover-card-content" className={nmClass('nm-hover-card', className as string)} {...props} />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}

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

@@ -0,0 +1,6 @@
+  .nm-icon {
+    display: block;
+    width: var(--nm-icon);
+    height: var(--nm-icon);
+  }
+