@nordmanai/nif 0.2.10 → 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.10",
+  "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.10",
+  "version": "0.2.11",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",

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/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;