@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/components/nm-dropdown-menu/nm-dropdown-menu.css

@@ -0,0 +1,145 @@
+  .nm-menu__positioner {
+    z-index: var(--nm-menu-z);
+    outline: none;
+  }
+
+  /* Panel radius, padding and row radius follow the concentric rule in tokens.css. */
+  .nm-menu {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+    min-width: var(--nm-width-menu);
+    max-height: var(--available-height);
+    padding: var(--nm-list-pad);
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-menu-radius);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    outline: none;
+    transition: opacity 0.12s;
+  }
+
+  .nm-menu[data-starting-style],
+  .nm-menu[data-ending-style] {
+    opacity: 0;
+  }
+
+  .nm-menu__label {
+    padding: var(--nm-space-6) var(--nm-icon-pad);
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    min-height: var(--nm-icon-control);
+    padding: var(--nm-icon-pad);
+    border: 0;
+    border-radius: var(--nm-panel-item-radius);
+    background: transparent;
+    color: var(--nm-fg);
+    font: inherit;
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-leading-tight);
+    text-align: left;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .nm-menu__item:hover,
+  .nm-menu__item[data-highlighted],
+  .nm-menu__item[data-popup-open] {
+    background: var(--nm-line);
+  }
+
+  .nm-menu__item[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .nm-menu__item[data-variant='destructive'] {
+    color: var(--nm-destructive);
+  }
+
+  .nm-menu__item .nm-icon {
+    flex-shrink: 0;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-menu__item[data-variant='destructive'] .nm-icon {
+    color: inherit;
+  }
+
+  .nm-menu__item--choice {
+    padding-left: var(--nm-icon-pad);
+  }
+
+  .nm-menu__indicator {
+    display: inline-flex;
+    flex-shrink: 0;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  /* The chevron icon points down. A submenu opens to the side, so it turns to point right. */
+  .nm-menu__sub-chevron {
+    margin-left: auto;
+    transform: rotate(-90deg);
+  }
+
+  .nm-menu__text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+    min-width: 0;
+  }
+
+  .nm-menu__description {
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-regular);
+  }
+
+  .nm-menu__item:has(.nm-menu__description) {
+    align-items: flex-start;
+  }
+
+  .nm-menu__dot {
+    width: var(--nm-space-8);
+    height: var(--nm-space-8);
+    margin: calc((var(--nm-icon-button) - var(--nm-space-8)) / 2);
+    border-radius: 50%;
+    background: var(--nm-stroke);
+  }
+
+  .nm-menu__dot[data-status='ok'] {
+    background: var(--ok);
+  }
+
+  .nm-menu__dot[data-status='error'] {
+    background: var(--nm-destructive);
+  }
+
+  .nm-menu__shortcut {
+    margin-left: auto;
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    letter-spacing: var(--nm-track);
+  }
+
+  .nm-menu__separator {
+    height: var(--nm-rule);
+    margin: var(--nm-space-4) calc(var(--nm-list-pad) * -1);
+    background: var(--nm-line-strong);
+  }

package/registry/ui/components/nm-dropdown-menu/nm-dropdown-menu.tsx

@@ -0,0 +1,118 @@
+import type { ComponentProps } from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+/** Base UI Menu, in the shadcn dropdown-menu composition, styled by NIF tokens. */
+export function NmDropdownMenu(props: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+export function NmDropdownMenuTrigger(props: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+type PositionProps = Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+
+export function NmDropdownMenuContent({
+  align = 'start',
+  alignOffset = 0,
+  side = 'bottom',
+  sideOffset = 8,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props & PositionProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner className="nm-menu__positioner" align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset}>
+        <MenuPrimitive.Popup data-slot="dropdown-menu-content" className={nmClass('nm-menu', className as string)} {...props} />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+export function NmDropdownMenuGroup(props: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+export function NmDropdownMenuLabel({ className, ...props }: MenuPrimitive.GroupLabel.Props) {
+  return <MenuPrimitive.GroupLabel data-slot="dropdown-menu-label" className={nmClass('nm-menu__label', className as string)} {...props} />;
+}
+
+export function NmDropdownMenuItem({
+  className,
+  variant = 'default',
+  ...props
+}: MenuPrimitive.Item.Props & { variant?: 'default' | 'destructive' }) {
+  return <MenuPrimitive.Item data-slot="dropdown-menu-item" data-variant={variant} className={nmClass('nm-menu__item', className as string)} {...props} />;
+}
+
+export function NmDropdownMenuSub(props: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
+
+export function NmDropdownMenuSubTrigger({ className, children, ...props }: MenuPrimitive.SubmenuTrigger.Props) {
+  return (
+    <MenuPrimitive.SubmenuTrigger data-slot="dropdown-menu-sub-trigger" className={nmClass('nm-menu__item', className as string)} {...props}>
+      {children}
+      <NmIcon id="chevron" className="nm-menu__sub-chevron" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+
+export function NmDropdownMenuSubContent({ align = 'start', alignOffset = -12, side = 'right', sideOffset = 0, className, ...props }: MenuPrimitive.Popup.Props & PositionProps) {
+  return <NmDropdownMenuContent align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className={className as string} {...props} />;
+}
+
+export function NmDropdownMenuCheckboxItem({ className, children, ...props }: MenuPrimitive.CheckboxItem.Props) {
+  return (
+    <MenuPrimitive.CheckboxItem data-slot="dropdown-menu-checkbox-item" className={nmClass('nm-menu__item nm-menu__item--choice', className as string)} {...props}>
+      <span className="nm-menu__indicator">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <NmIcon id="check" />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+export function NmDropdownMenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {
+  return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+export function NmDropdownMenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {
+  return (
+    <MenuPrimitive.RadioItem data-slot="dropdown-menu-radio-item" className={nmClass('nm-menu__item nm-menu__item--choice', className as string)} {...props}>
+      <span className="nm-menu__indicator">
+        <MenuPrimitive.RadioItemIndicator>
+          <NmIcon id="check" />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+export function NmDropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+  return <MenuPrimitive.Separator data-slot="dropdown-menu-separator" className={nmClass('nm-menu__separator', className as string)} {...props} />;
+}
+
+export function NmDropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>) {
+  return <span data-slot="dropdown-menu-shortcut" className={nmClass('nm-menu__shortcut', className)} {...props} />;
+}
+
+/** Two lines in an item: the title, then a quieter description. */
+export function NmDropdownMenuText({ title, description }: { title: string; description?: string }) {
+  return (
+    <span className="nm-menu__text">
+      <span>{title}</span>
+      {description ? <span className="nm-menu__description">{description}</span> : null}
+    </span>
+  );
+}
+
+/** A status dot at the start of an item. */
+export function NmDropdownMenuDot({ status }: { status?: 'ok' | 'error' }) {
+  return <span className="nm-menu__dot" data-status={status} aria-hidden="true" />;
+}

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

@@ -0,0 +1,356 @@
+  .nm-field {
+    display: flex;
+    min-width: 0;
+    width: 100%;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    min-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-subtle);
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+  }
+
+  /* Only the single-row field has the field height. The stacked field holds a caption above its box. */
+  .nm-field:not(.nm-field--stack):not(:has(textarea)) {
+    height: var(--nm-field-h);
+  }
+
+  .nm-field:not(.nm-field--stack):focus-within,
+  .nm-field__box:focus-within {
+    border-color: var(--nm-stroke);
+  }
+
+  .nm-field__icon,
+  .nm-field__step .nm-icon {
+    display: block;
+    flex-shrink: 0;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-field__control {
+    width: 100%;
+    min-width: 0;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-icon-button);
+    outline: none;
+    appearance: none;
+  }
+
+  .nm-field__control::placeholder {
+    color: var(--nm-stroke);
+    opacity: 1;
+  }
+
+  .nm-field__control::-webkit-search-cancel-button,
+  .nm-field__control::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  .nm-field__trail {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-4);
+  }
+
+  .nm-field__meta {
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .nm-field__step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    cursor: pointer;
+  }
+
+  .nm-field__step:disabled {
+    cursor: default;
+    opacity: 0.35;
+  }
+
+  .nm-field--stack {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--field-label-gap);
+    min-height: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: var(--nm-fg);
+  }
+
+  .nm-field__caption {
+    margin: 0;
+    color: var(--nm-fg-subtle);
+    font-family: var(--nm-font);
+    font-size: var(--field-label-fs);
+    font-weight: var(--nm-weight-regular);
+    line-height: normal;
+  }
+
+  .nm-field__row {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    width: 100%;
+  }
+
+  .nm-field__box {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    min-width: 0;
+    height: var(--nm-field-h);
+    min-height: var(--nm-field-h);
+    max-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);
+  }
+
+  /* The box padding is the inset. Icons add none, so icon and text sit the same distance from the edge. */
+  .nm-field--stack .nm-field__icon,
+  .nm-field--stack .nm-field__trail .nm-icon {
+    box-sizing: content-box;
+    padding: 0;
+  }
+
+  .nm-modal .nm-field .nm-field__control {
+    width: 100%;
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .nm-field--stack .nm-field__control {
+    color: var(--nm-fg);
+    line-height: var(--nm-leading-ui);
+    text-align: left;
+    cursor: text;
+  }
+
+  .nm-field--stack .nm-field__control::placeholder,
+  .nm-field--stack .nm-field__control:placeholder-shown {
+    color: var(--nm-stroke);
+  }
+
+  .nm-field--stack .nm-field__control[readonly],
+  .nm-field--stack .nm-field__control[data-empty='true'] {
+    color: var(--nm-stroke);
+  }
+
+  .nm-field--stack .nm-field__control[data-emphasis='true'] {
+    color: var(--nm-fg);
+  }
+
+  .nm-field__mark {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-field__mark svg {
+    display: block;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-field--stack[data-leading='face'] .nm-field__box {
+    height: auto;
+    min-height: calc(var(--nm-list-face) + var(--nm-space-12) * 2);
+    max-height: none;
+    padding: var(--nm-space-12) var(--nm-space-16);
+  }
+
+  .nm-field--stack[data-leading='face'] .nm-field__mark {
+    width: var(--nm-list-face);
+    height: var(--nm-list-face);
+    overflow: hidden;
+    border-radius: calc(var(--nm-list-face) / 2);
+  }
+
+  .nm-field--stack[data-leading='face'] .nm-field__mark > *,
+  .nm-field--stack[data-leading='face'] .nm-field__mark svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .nm-field__trail .nm-dropdown .nm-icon {
+    padding: 0;
+  }
+
+  .nm-field--stack[data-kind='area'] .nm-field__box {
+    align-items: flex-start;
+    height: auto;
+    max-height: none;
+    min-height: var(--nm-field-area);
+    padding: var(--field-area-py) var(--control-px);
+  }
+
+  .nm-field--stack button.nm-field__control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+  }
+
+  .nm-field--stack button.nm-field__control .nm-icon {
+    box-sizing: content-box;
+    flex-shrink: 0;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    padding: 0;
+  }
+
+  .nm-field--stack textarea.nm-field__control,
+  .nm-modal .nm-field textarea.nm-field__control {
+    height: calc(var(--nm-field-area) - var(--field-area-py) * 2);
+    min-height: calc(var(--nm-field-area) - var(--field-area-py) * 2);
+    max-height: calc(var(--nm-field-area) - var(--field-area-py) * 2);
+    overflow-y: auto;
+    field-sizing: fixed;
+    resize: none;
+  }
+
+  .nm-field--stack textarea.nm-field__control[readonly],
+  .nm-modal .nm-field textarea.nm-field__control[readonly] {
+    cursor: default;
+  }
+
+  .nm-field__add {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--nm-field-h);
+    height: var(--nm-field-h);
+    padding: 0;
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-r);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    cursor: pointer;
+  }
+
+  .nm-field__add .nm-icon {
+    display: block;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-field__menu {
+    position: absolute;
+    z-index: var(--nm-menu-z);
+    top: calc(100% + var(--nm-space-4));
+    right: 0;
+    left: 0;
+    margin: 0;
+    padding: var(--nm-menu-pad);
+    overflow: auto;
+    list-style: none;
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-menu-radius);
+    background: var(--nm-panel);
+    max-height: var(--nm-dropdown-max);
+  }
+
+  .nm-field__search {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-8) var(--nm-control-option-inset);
+    border-bottom: var(--nm-rule) solid var(--nm-line);
+  }
+
+  .nm-field__search-input {
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    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-ui);
+    outline: none;
+    appearance: none;
+  }
+
+  .nm-field__search-input::placeholder {
+    color: var(--nm-stroke);
+    opacity: 1;
+  }
+
+  .nm-field__value {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .nm-field__value,
+  .nm-field__option {
+    gap: var(--nm-space-12);
+  }
+
+  .nm-field__swatches {
+    display: inline-flex;
+    gap: var(--nm-space-4);
+    margin-inline-start: auto;
+  }
+
+  .nm-field__option {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--nm-space-12) var(--nm-control-option-inset);
+    border: 0;
+    border-radius: var(--nm-control-option-radius);
+    background: transparent;
+    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-ui);
+    letter-spacing: var(--nm-track);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .nm-field__option:hover,
+  .nm-field__option[aria-selected='true'] {
+    background: var(--nm-inset);
+  }