@nordmanai/nif 0.2.9 → 0.2.11

package/dist/ui/components/nm-form-field/nm-form-field.d.ts

@@ -4,11 +4,21 @@ export declare function NmFieldSet({ className, ...props }: ComponentProps<'fiel
 export declare function NmFieldLegend({ className, variant, ...props }: ComponentProps<'legend'> & {
     variant?: 'legend' | 'label';
 }): import("react").JSX.Element;
-export declare function NmFieldGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export declare function NmFormField({ className, orientation, invalid, disabled, ...props }: ComponentProps<'div'> & {
+export type NmFieldGroupColumns = 1 | 2 | 3;
+/**
+ * A group stacks by default. With columns, it lays fields out in a grid of up to two or three
+ * columns, falling back to fewer when the container is narrow so long pages stay short on wide
+ * screens without getting cramped on small ones. A child with span="full" takes the whole row.
+ */
+export declare function NmFieldGroup({ className, columns, ...props }: ComponentProps<'div'> & {
+    columns?: NmFieldGroupColumns;
+}): import("react").JSX.Element;
+export declare function NmFormField({ className, orientation, invalid, disabled, span, ...props }: ComponentProps<'div'> & {
     orientation?: 'vertical' | 'horizontal';
     invalid?: boolean;
     disabled?: boolean;
+    /** Inside a multi-column group: take the whole row. */
+    span?: 'full';
 }): import("react").JSX.Element;
 export declare function NmFieldContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 export declare function NmFieldLabel({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "Nordman Interface Framework: the one UI and UX system for every Nordman product. Base UI, in the shadcn composition, styled by NIF tokens.",
   "type": "module",
   "sideEffects": [

package/registry/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.9",
+  "version": "0.2.11",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",

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

@@ -55,9 +55,6 @@ export function NmComboboxItem({ className, children, ...props }: ComboboxPrimit
   return (
     <ComboboxPrimitive.Item data-slot="combobox-item" className={nmClass('nm-menu__item nm-select__item', className as string)} {...props}>
       <span className="nm-select__text">{children}</span>
-      <ComboboxPrimitive.ItemIndicator className="nm-select__check">
-        <NmIcon id="check" />
-      </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
   );
 }

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

@@ -27,6 +27,28 @@
     gap: var(--nm-space-24);
     width: 100%;
   }
+  /* Columns: a cell is never narrower than --nm-width-field-min, so the count drops as the
+     container narrows and reaches one column on small screens. */
+  .nm-field-group[data-columns] {
+    display: grid;
+    gap: var(--nm-space-24) var(--nm-space-16);
+    align-items: start;
+  }
+  .nm-field-group[data-columns='2'] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, max(var(--nm-width-field-min), calc(var(--nm-field-col-2) - var(--nm-space-16)))), 1fr)
+    );
+  }
+  .nm-field-group[data-columns='3'] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, max(var(--nm-width-field-min), calc(var(--nm-field-col-3) - var(--nm-space-16)))), 1fr)
+    );
+  }
+  .nm-field-group[data-columns] > [data-span='full'] {
+    grid-column: 1 / -1;
+  }
 
   .nm-form-field {
     display: flex;

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

@@ -11,8 +11,25 @@ export function NmFieldLegend({ className, variant = 'legend', ...props }: Compo
   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 type NmFieldGroupColumns = 1 | 2 | 3;
+/**
+ * A group stacks by default. With columns, it lays fields out in a grid of up to two or three
+ * columns, falling back to fewer when the container is narrow so long pages stay short on wide
+ * screens without getting cramped on small ones. A child with span="full" takes the whole row.
+ */
+export function NmFieldGroup({
+  className,
+  columns = 1,
+  ...props
+}: ComponentProps<'div'> & { columns?: NmFieldGroupColumns }) {
+  return (
+    <div
+      data-slot="field-group"
+      data-columns={columns > 1 ? columns : undefined}
+      className={nmClass('nm-field-group', className)}
+      {...props}
+    />
+  );
 }
 
 export function NmFormField({
@@ -20,13 +37,21 @@ export function NmFormField({
   orientation = 'vertical',
   invalid,
   disabled,
+  span,
   ...props
-}: ComponentProps<'div'> & { orientation?: 'vertical' | 'horizontal'; invalid?: boolean; disabled?: boolean }) {
+}: ComponentProps<'div'> & {
+  orientation?: 'vertical' | 'horizontal';
+  invalid?: boolean;
+  disabled?: boolean;
+  /** Inside a multi-column group: take the whole row. */
+  span?: 'full';
+}) {
   return (
     <div
       data-slot="field"
       role="group"
       data-orientation={orientation}
+      data-span={span}
       data-invalid={invalid ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       className={nmClass('nm-form-field', className)}

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

@@ -72,7 +72,11 @@
     min-width: 0;
   }
 
-  .nm-select__check {
-    display: inline-flex;
-    flex-shrink: 0;
+  /* One choice is in effect, so the chosen row is shown by its fill. No mark: a mark reads as a toggle. */
+  .nm-select__item[data-selected] {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+  .nm-select__item[data-selected][data-highlighted] {
+    background: var(--nm-line);
   }

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

@@ -44,9 +44,6 @@ export function NmSelectItem({ className, children, ...props }: SelectPrimitive.
   return (
     <SelectPrimitive.Item data-slot="select-item" className={nmClass('nm-menu__item nm-select__item', className as string)} {...props}>
       <SelectPrimitive.ItemText className="nm-select__text">{children}</SelectPrimitive.ItemText>
-      <SelectPrimitive.ItemIndicator className="nm-select__check">
-        <NmIcon id="check" />
-      </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   );
 }

package/registry/ui/styles/tokens.css

@@ -274,6 +274,10 @@
   --nm-width-popup: 18rem;
   --nm-width-tooltip: 20rem;
   --nm-width-form: 28rem;
+  /* Field grids: the narrowest a field cell may be, and the share of the row per column. */
+  --nm-width-field-min: 14rem;
+  --nm-field-col-2: 50%;
+  --nm-field-col-3: 33.333%;
   --nm-code-gutter: 3ch;
   --nm-width-date: 11rem;
   --nm-width-dialog: 40rem;