@multiplatform.one/forms 6.7.0 → 7.0.0

package/src/FormGrid.stories.tsx

@@ -12,12 +12,11 @@ const meta: Meta<typeof FormGrid> = {
   argTypes: {
     columns: { control: { type: "number", min: 1, max: 2 } },
     maxColumns: { control: { type: "number", min: 1, max: 2 } },
-    gap: { control: { type: "number", min: 0, max: 64 } },
+    compact: { control: "boolean" },
   },
   args: {
     columns: 1,
     maxColumns: 2,
-    gap: 16,
   },
 };
 
@@ -50,7 +49,7 @@ export const TwoColumnsWide: Story = {
   name: "Two columns (wide)",
   render: () => (
     <YStack maxWidth={720} borderWidth={1} borderColor="$borderColor" padding="$3">
-      <FormGrid columns={2} gap={16}>
+      <FormGrid columns={2}>
         <GridField id="fg2-first" label="First name" />
         <GridField id="fg2-last" label="Last name" />
         <GridField id="fg2-email" label="Email" />
@@ -86,7 +85,7 @@ export const NarrowContainer: Story = {
       <Paragraph size="$2" marginBottom="$2">
         columns=2 inside 280px → must render as 1 column
       </Paragraph>
-      <FormGrid columns={2} gap={12}>
+      <FormGrid columns={2}>
         <GridField id="fgn-a" label="Cramped field one" />
         <GridField id="fgn-b" label="Cramped field two" />
         <GridField id="fgn-c" label="Cramped field three" />

package/src/FormGrid.tsx

@@ -7,6 +7,7 @@ import {
   type CSSProperties,
   type ReactNode,
 } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { XStack, YStack, isWeb, useMedia } from "tamagui";
 
 /** Container/media width below which multi-column form grids collapse to 1 col. */
@@ -25,8 +26,13 @@ export interface FormGridProps {
    * Default: 2.
    */
   maxColumns?: FormGridColumns;
-  /** Gap between fields in pixels. Default: 16 */
-  gap?: number;
+  /**
+   * Gap between fields. Defaults to the space recipe (`knobProps.gap`) —
+   * density/space, never `sizeToken`. Number = px eject; token string allowed.
+   */
+  gap?: number | string;
+  /** Nested scale (LC-73). Omit to inherit the nearest Preset density. */
+  compact?: boolean;
   children: ReactNode;
 }
 
@@ -46,19 +52,33 @@ function resolveWideColumns(
  * the container is at least {@link FORM_GRID_COLLAPSE_WIDTH} wide (container measure
  * on web; viewport media on native).
  */
-export function FormGrid({ columns = 1, maxColumns = 2, gap = 16, children }: FormGridProps) {
+export function FormGrid({ columns = 1, maxColumns = 2, gap, compact, children }: FormGridProps) {
+  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  const resolvedGap = gap ?? knobProps.gap.gap;
   const wideColumns = resolveWideColumns(columns, maxColumns);
 
   if (isWeb) {
     return (
-      <FormGridWeb columns={wideColumns} maxColumns={maxColumns} gap={gap}>
+      <FormGridWeb
+        columns={wideColumns}
+        maxColumns={maxColumns}
+        gap={resolvedGap}
+        density={knobProps.density}
+        size={knobProps.size}
+      >
         {children}
       </FormGridWeb>
     );
   }
 
   return (
-    <FormGridNative columns={wideColumns} gap={gap}>
+    <FormGridNative
+      columns={wideColumns}
+      maxColumns={maxColumns}
+      gap={resolvedGap}
+      density={knobProps.density}
+      size={knobProps.size}
+    >
       {children}
     </FormGridNative>
   );
@@ -68,11 +88,15 @@ function FormGridWeb({
   columns,
   maxColumns,
   gap,
+  density,
+  size,
   children,
 }: {
   columns: FormGridColumns;
   maxColumns: FormGridColumns;
-  gap: number;
+  gap: number | string;
+  density: string;
+  size: string;
   children: ReactNode;
 }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -109,33 +133,44 @@ function FormGridWeb({
 
   const style: CSSProperties = {
     display: "grid",
-    gap: `${gap}px`,
     gridTemplateColumns: `repeat(${effectiveColumns}, minmax(0, 1fr))`,
     // Enable container queries for consumers / CSS extensions (DG-FORM-09).
     containerType: columns > 1 ? "inline-size" : undefined,
   };
 
   return (
-    <div
-      ref={ref}
+    <YStack
+      ref={ref as never}
       data-mpo-form-grid=""
       data-columns={effectiveColumns}
       data-max-columns={maxColumns}
       data-requested-columns={columns}
+      data-gap={String(gap)}
+      data-density={density}
+      data-size={size}
+      gap={gap as never}
+      width="100%"
+      minWidth={0}
       style={style}
     >
       {children}
-    </div>
+    </YStack>
   );
 }
 
 function FormGridNative({
   columns,
+  maxColumns,
   gap,
+  density,
+  size,
   children,
 }: {
   columns: FormGridColumns;
-  gap: number;
+  maxColumns: FormGridColumns;
+  gap: number | string;
+  density: string;
+  size: string;
   children: ReactNode;
 }) {
   const media = useMedia();
@@ -171,15 +206,20 @@ function FormGridNative({
 
   return (
     <YStack
-      gap={gap}
+      gap={gap as never}
+      width="100%"
+      data-mpo-form-grid=""
       data-columns={effectiveColumns}
-      data-max-columns={columns}
+      data-max-columns={maxColumns}
       data-requested-columns={columns}
+      data-gap={String(gap)}
+      data-density={density}
+      data-size={size}
     >
       {rows.map((row, rowIndex) => (
-        <XStack key={rowIndex} gap={gap}>
+        <XStack key={rowIndex} gap={gap as never}>
           {row.map((child, colIndex) => (
-            <YStack key={colIndex} flex={1}>
+            <YStack key={colIndex} flex={1} minWidth={0}>
               {child}
             </YStack>
           ))}

package/src/FormSection.tsx

@@ -25,6 +25,8 @@ export interface FormSectionProps {
    * so assistive tech groups the fields. Native keeps a heading label.
    */
   fieldset?: boolean;
+  /** Nested scale (LC-73). Omit to inherit the nearest Preset density. */
+  compact?: boolean;
 }
 
 /**
@@ -44,9 +46,10 @@ export function FormSection({
   gap,
   testID,
   fieldset = true,
+  compact,
 }: FormSectionProps) {
   const useFieldset = fieldset && isWeb;
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
   const resolvedGap = gap ?? knobProps.gap.gap;
 
   return (
@@ -55,8 +58,10 @@ export function FormSection({
       data-mpo-form-section=""
       data-mpo-fieldset={useFieldset ? "" : undefined}
       data-field-gap={String(resolvedGap)}
+      data-density={knobProps.density}
+      data-size={knobProps.size}
       data-testid={testID}
-      gap={resolvedGap as any}
+      gap={resolvedGap as never}
       width="100%"
       maxWidth={maxWidth === "fluid" ? undefined : maxWidth}
       alignSelf={maxWidth === "fluid" ? undefined : "flex-start"}
@@ -76,15 +81,15 @@ export function FormSection({
         useFieldset ? (
           <Text
             render="legend"
-            fontWeight="600"
-            fontSize="$5"
+            {...knobProps.label}
+            {...knobProps.heading}
             // legend is inline by default; stretch to a full heading row
-            style={{ padding: 0, marginBottom: 0, float: "left", width: "100%" } as any}
+            style={{ padding: 0, marginBottom: 0, float: "left", width: "100%" } as never}
           >
             {label}
           </Text>
         ) : (
-          <Text fontWeight="600" fontSize="$5" role="heading" aria-level={3}>
+          <Text {...knobProps.label} {...knobProps.heading} role="heading" aria-level={3}>
             {label}
           </Text>
         )
@@ -119,7 +124,9 @@ export function FormSectionStack({ children, gap }: FormSectionStackProps) {
     <YStack
       data-mpo-form-section-stack=""
       data-section-gap={String(resolvedGap)}
-      gap={resolvedGap as any}
+      data-density={knobProps.density}
+      data-size={knobProps.size}
+      gap={resolvedGap as never}
       width="100%"
     >
       {children}

package/src/InputParts/index.spec.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Input } from "./index";
+import { Input, boxRingMode, boxRingOffset, inputPartsRingCss } from "./index";
 
 describe("Input.Meta reserved message slot (Axiom 8 / DG-FORM-04)", () => {
   it("renders helper text when there is no error", () => {
@@ -37,3 +37,64 @@ describe("Input.Meta reserved message slot (Axiom 8 / DG-FORM-04)", () => {
     expect(container.textContent).toBe("");
   });
 });
+
+describe("LC-71 RING-ANATOMY — Box ring, Area never outlines, inset iff clip", () => {
+  it("pairs overflow:hidden with inset and overflow:visible with outset", () => {
+    expect(boxRingMode("hidden", true)).toBe("inset");
+    expect(boxRingMode("visible", true)).toBe("outset");
+    expect(boxRingMode("hidden", false)).toBeUndefined();
+    expect(boxRingOffset("inset")).toBe(-2);
+    expect(boxRingOffset("outset")).toBe(2);
+  });
+
+  it("stylesheet kills Area outline and insets the Box ring when clipped", () => {
+    expect(inputPartsRingCss).toContain('[data-mp-input-box][data-mp-ring="inset"]');
+    expect(inputPartsRingCss).toContain("outline-offset: -2px");
+    expect(inputPartsRingCss).toContain("outline-offset: 2px");
+    expect(inputPartsRingCss).toContain("[data-mp-input-area]");
+    expect(inputPartsRingCss).toContain("outline: none !important");
+    expect(inputPartsRingCss).not.toContain("[data-mp-input-box]:has(:focus-visible)");
+  });
+
+  it("Box carries data-mp-input-box + inset ring; Area carries data-mp-input-area", () => {
+    const { container } = renderWithProviders(
+      <Input>
+        <Input.Box>
+          <Input.Area placeholder="Search" />
+        </Input.Box>
+      </Input>,
+    );
+    const box = container.querySelector("[data-mp-input-box]");
+    expect(box).toBeTruthy();
+    expect(box?.getAttribute("data-mp-ring")).toBe("inset");
+    expect(container.querySelector("[data-mp-input-area]")).toBeTruthy();
+    expect(document.getElementById("mp-input-parts-ring-anatomy")?.textContent).toContain(
+      "outline: none !important",
+    );
+  });
+
+  it("consumer focusVisibleStyle cannot restore an Area outline", () => {
+    const { container } = renderWithProviders(
+      <Input>
+        <Input.Box>
+          <Input.Area
+            placeholder="q"
+            focusVisibleStyle={
+              {
+                outlineWidth: 4,
+                outlineStyle: "solid",
+                outlineColor: "red",
+              } as never
+            }
+          />
+        </Input.Box>
+      </Input>,
+    );
+    const area = container.querySelector("[data-mp-input-area]");
+    expect(area).toBeTruthy();
+    const cs = area ? getComputedStyle(area) : null;
+    const width = cs ? parseFloat(cs.outlineWidth) || 0 : 0;
+    const style = cs?.outlineStyle ?? "";
+    expect(style === "none" || width === 0).toBe(true);
+  });
+});