@multiplatform.one/forms 6.7.0 → 7.0.0

package/src/ControlGroup/ControlGroup.stories.tsx

@@ -1,7 +1,8 @@
 import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Input as TamaguiInput, Paragraph, YStack } from "tamagui";
+import { Paragraph, YStack } from "tamagui";
 import { Button } from "../Button";
+import { Input } from "../InputParts";
 import { ControlGroup } from "./index";
 
 const meta: Meta<typeof ControlGroup> = {
@@ -85,7 +86,9 @@ export const MixedControls: Story = {
     <YStack gap="$4" maxWidth={480}>
       <ControlGroup>
         <Button>Action</Button>
-        <TamaguiInput placeholder="type here" flex={1} />
+        <Input.Box>
+          <Input.Area placeholder="type here" flex={1} />
+        </Input.Box>
         <Button>Go</Button>
       </ControlGroup>
       <ControlGroup>
@@ -102,15 +105,55 @@ export const MixedControls: Story = {
   ),
 };
 
+export const Connected: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={480}>
+      <ControlGroup>
+        <ControlGroup.Addon>@</ControlGroup.Addon>
+        <Input.Box>
+          <Input.Area placeholder="username" flex={1} />
+        </Input.Box>
+      </ControlGroup>
+      <ControlGroup>
+        <ControlGroup.Addon>$</ControlGroup.Addon>
+        <Input.Box>
+          <Input.Area placeholder="0.00" flex={1} />
+        </Input.Box>
+        <ControlGroup.Addon>.00</ControlGroup.Addon>
+      </ControlGroup>
+      <ControlGroup>
+        <ControlGroup.Addon>https://</ControlGroup.Addon>
+        <Input.Box>
+          <Input.Area placeholder="example.com/users" flex={1} />
+        </Input.Box>
+        <Button>Go</Button>
+      </ControlGroup>
+      <ControlGroup>
+        <Button>Search</Button>
+        <Input.Box>
+          <Input.Area placeholder="query" flex={1} />
+        </Input.Box>
+        <Button>Filter</Button>
+      </ControlGroup>
+    </YStack>
+  ),
+};
+
 export const RTL: Story = {
   render: () => (
     <div dir="rtl">
-      <YStack maxWidth={420}>
+      <YStack maxWidth={420} gap="$4">
         <ControlGroup>
           <Button>الأول</Button>
           <Button>الأوسط</Button>
           <Button>الأخير</Button>
         </ControlGroup>
+        <ControlGroup>
+          <ControlGroup.Addon>@</ControlGroup.Addon>
+          <Input.Box>
+            <Input.Area placeholder="اسم المستخدم" flex={1} />
+          </Input.Box>
+        </ControlGroup>
       </YStack>
     </div>
   ),

package/src/ControlGroup/index.tsx

@@ -1,9 +1,23 @@
-import { Children, isValidElement, useMemo, useState, type ReactNode } from "react";
-import { View, isWeb, styled } from "tamagui";
+import {
+  Children,
+  isValidElement,
+  useMemo,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { SizableText, View, isWeb, styled } from "tamagui";
 import type { GetProps } from "tamagui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  GroupPositionContext,
+  ensureCompositeFocusRing,
+  ensureFocusVisibleRing,
+  getGroupPosition,
+  hairline,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { FocusContext, getInputFrameTransitionProps, InputContext } from "../InputParts";
-import { formInputColors } from "../shared/colorRamps";
+import { formCommonColors, formInputColors } from "../shared/colorRamps";
 import { getElevationWrapperProps } from "../shared/utils";
 import { ControlGroupCtx } from "../shared/groupContext";
 import { useIsInTableCell } from "../shared/tableCellContext";
@@ -17,10 +31,9 @@ const ControlGroupFrame = styled(View, {
   alignItems: "stretch",
   overflow: "hidden",
   minWidth: 0,
-  borderWidth: 1,
+  flexWrap: "nowrap",
   borderColor: formInputColors.border.base,
   backgroundColor: formInputColors.background.base,
-  outlineStyle: "none" as any,
 
   ...(isWeb ? { tabIndex: -1 } : { focusable: false }),
 
@@ -37,6 +50,76 @@ const ControlGroupFrame = styled(View, {
   } as const,
 });
 
+const CONTROL_GROUP_RING_ID = "mp-control-group-ring";
+const controlGroupRingCss = `/* LC-71: ring lives on the outer ControlGroup; descendants keep none. */
+.mp-control-group.mp-composite-ring-deep :is(button, [role="button"], input, textarea, [contenteditable], a):focus,
+.mp-control-group.mp-composite-ring-deep :is(button, [role="button"], input, textarea, [contenteditable], a):focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}`;
+
+function ensureControlGroupRing() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(CONTROL_GROUP_RING_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = CONTROL_GROUP_RING_ID;
+  tag.textContent = controlGroupRingCss;
+  document.head.appendChild(tag);
+}
+
+function isControlGroupAddon(child: ReactElement): boolean {
+  const type = child.type as { isControlGroupAddon?: boolean };
+  return type === ControlGroupAddon || type.isControlGroupAddon === true;
+}
+
+function groupItems(children: ReactNode): ReactElement[] {
+  return Children.toArray(children).filter(isValidElement);
+}
+
+// ---------------------------------------------------------------------------
+// ControlGroup.Addon — Bootstrap input-group-text / Polaris connected slot
+// ---------------------------------------------------------------------------
+
+export type ControlGroupAddonProps = GetProps<typeof View> & {
+  children?: ReactNode;
+};
+
+function ControlGroupAddonImpl({ children, ...props }: ControlGroupAddonProps) {
+  const { knobProps } = useResolvedKnobs();
+  const text =
+    typeof children === "string" || typeof children === "number" ? (
+      <SizableText
+        {...knobProps.label}
+        color={formCommonColors.muted}
+        userSelect="none"
+        numberOfLines={1}
+      >
+        {children}
+      </SizableText>
+    ) : (
+      children
+    );
+  return (
+    <View
+      justifyContent="center"
+      alignItems="center"
+      alignSelf="stretch"
+      backgroundColor="$color4"
+      paddingHorizontal="$3"
+      borderRadius={0}
+      flexGrow={0}
+      flexShrink={0}
+      {...props}
+    >
+      {text}
+    </View>
+  );
+}
+
+export const ControlGroupAddon = Object.assign(ControlGroupAddonImpl, {
+  isControlGroupAddon: true as const,
+});
+
 // ---------------------------------------------------------------------------
 // ControlGroup
 // ---------------------------------------------------------------------------
@@ -47,18 +130,62 @@ export interface ControlGroupProps extends GetProps<typeof ControlGroupFrame> {
   orientation?: "horizontal" | "vertical";
 }
 
-export function ControlGroup({
-  children,
-  orientation = "horizontal",
-  ...props
-}: ControlGroupProps) {
+function ControlGroupImpl({ children, orientation = "horizontal", ...props }: ControlGroupProps) {
   const [focused, setFocused] = useState(false);
   const { knobProps, control, elevation } = useResolvedKnobs();
   const inTableCell = useIsInTableCell();
+  if (isWeb) {
+    ensureCompositeFocusRing();
+    ensureControlGroupRing();
+  }
   const elevationWrapperProps = useMemo(
     () => getElevationWrapperProps(knobProps, elevation),
     [knobProps, elevation],
   );
+  const isVertical = orientation === "vertical";
+  const items = groupItems(children);
+
+  const renderItems = (seams: boolean) => {
+    const count = items.length;
+    const nodes: ReactNode[] = [];
+    for (let index = 0; index < count; index++) {
+      const child = items[index];
+      const position = getGroupPosition(index, count);
+      const isMiddle = position === "middle";
+      // Native: a lone child (Stepper showButtons={false} renders just
+      // the input) must fill the frame — RN TextInput has no intrinsic
+      // width, so a content-sized wrapper measures 0pt wide and iOS
+      // culls the zero-rect subtree from the a11y tree. Web keeps the
+      // content-sized wrapper (CSS inputs have intrinsic width).
+      // Polaris Connected: the primary field flexes; addons stay content-sized.
+      const needsFlex =
+        !isControlGroupAddon(child) && (isMiddle || count === 2 || (!isWeb && count === 1));
+      const flexProps = needsFlex
+        ? { flex: 1, ...(isVertical ? { minHeight: 0 } : { minWidth: 0 }) }
+        : { flexGrow: 0, flexShrink: 0 };
+      nodes.push(
+        <GroupPositionContext.Provider key={child.key ?? index} value={position}>
+          <View {...flexProps} borderRadius={0} overflow="hidden" data-mp-group-position={position}>
+            {child}
+          </View>
+        </GroupPositionContext.Provider>,
+      );
+      if (seams && index < count - 1) {
+        nodes.push(
+          <View
+            key={`seam-${index}`}
+            {...(isVertical ? hairline.line : hairline.vline)}
+            backgroundColor={formInputColors.border.base}
+            flexGrow={0}
+            flexShrink={0}
+            alignSelf="stretch"
+            aria-hidden
+          />,
+        );
+      }
+    }
+    return nodes;
+  };
 
   // Chromeless rendering inside table cells
   if (inTableCell) {
@@ -67,24 +194,19 @@ export function ControlGroup({
         <FocusContext.Provider focused={focused} setFocused={setFocused}>
           <ControlGroupFrame
             {...knobProps.body}
-            size={knobProps.sizeToken}
-            flexDirection={orientation === "vertical" ? "column" : "row"}
+            flexDirection={isVertical ? "column" : "row"}
             borderWidth={0}
             borderRadius={0}
             backgroundColor="transparent"
+            data-mp-control-group=""
+            data-orientation={orientation}
             {...props}
           >
-            {Children.map(children, (child) => {
-              if (!isValidElement(child)) return child;
-              // minWidth 0: flex items floor at min-content (the raw web
-              // <input>'s intrinsic width) — in a cell the wrapper must
-              // shrink to the cell width instead (LC-06/LC-10, UX-P12).
-              return (
-                <View flex={1} minWidth={0}>
-                  {child}
-                </View>
-              );
-            })}
+            {Children.map(items, (child) => (
+              <View flex={1} minWidth={0} borderRadius={0}>
+                {child}
+              </View>
+            ))}
           </ControlGroupFrame>
         </FocusContext.Provider>
       </ControlGroupCtx.Provider>
@@ -96,16 +218,15 @@ export function ControlGroup({
       <FocusContext.Provider focused={focused} setFocused={setFocused}>
         <ControlGroupFrame
           {...knobProps.body}
-          size={knobProps.sizeToken}
-          flexDirection={orientation === "vertical" ? "column" : "row"}
+          {...(!isVertical ? { size: knobProps.sizeToken } : undefined)}
+          flexDirection={isVertical ? "column" : "row"}
           backgroundColor={knobProps.outlined ? "transparent" : formInputColors.background.base}
+          {...knobProps.inputSurface}
           {...knobProps.borderRadius}
           {...elevationWrapperProps}
           {...getInputFrameTransitionProps(
             typeof knobProps.transition === "string" ? knobProps.transition : undefined,
           )}
-          {...(control.hoverKnobProps ? { hoverStyle: control.hoverKnobProps } : undefined)}
-          {...(control.pressKnobProps ? { pressStyle: control.pressKnobProps } : undefined)}
           {...(control.focusKnobProps
             ? {
                 focusStyle: {
@@ -113,7 +234,6 @@ export function ControlGroup({
                   backgroundColor: knobProps.outlined
                     ? "transparent"
                     : formInputColors.background.focus,
-                  outlineStyle: "none",
                   ...control.focusKnobProps,
                 },
               }
@@ -125,12 +245,31 @@ export function ControlGroup({
                   backgroundColor: knobProps.outlined
                     ? "transparent"
                     : formInputColors.background.focus,
-                  outlineStyle: "none",
-                  ...control.focusVisibleKnobProps,
+                  ...ensureFocusVisibleRing({
+                    ...control.focusVisibleKnobProps,
+                    outlineOffset: -2,
+                  }),
                 },
               }
-            : undefined)}
+            : {
+                focusVisibleStyle: {
+                  borderColor: formInputColors.border.focus,
+                  ...ensureFocusVisibleRing({ outlineOffset: -2 }),
+                },
+              })}
           {...props}
+          {...(isWeb
+            ? {
+                className: [
+                  "mp-control-group",
+                  "mp-composite-ring",
+                  "mp-composite-ring-deep",
+                  (props as { className?: string }).className,
+                ]
+                  .filter(Boolean)
+                  .join(" "),
+              }
+            : undefined)}
           {...(focused
             ? {
                 borderColor: formInputColors.border.focus,
@@ -138,54 +277,20 @@ export function ControlGroup({
                   ? "transparent"
                   : formInputColors.background.focus,
                 ...control.focusKnobProps,
+                ...ensureFocusVisibleRing({ outlineOffset: -2 }),
               }
             : undefined)}
           overflow="hidden"
+          data-mp-control-group=""
+          data-orientation={orientation}
         >
-          {Children.map(children, (child, index) => {
-            if (!isValidElement(child)) return child;
-            // Intentional: extract raw radius value to compute per-child individual
-            // corner radii (borderTopLeftRadius, borderBottomRightRadius, etc.).
-            // This cannot be achieved with a knobProps fragment spread.
-            const radius = knobProps.borderRadius.borderRadius;
-            const count = Children.count(children);
-            const isFirst = index === 0;
-            const isLast = index === count - 1;
-            const isMiddle = count > 2 && !isFirst && !isLast;
-            // Native: a lone child (Stepper showButtons={false} renders just
-            // the input) must fill the frame — RN TextInput has no intrinsic
-            // width, so a content-sized wrapper measures 0pt wide and iOS
-            // culls the zero-rect subtree from the a11y tree. Web keeps the
-            // content-sized wrapper (CSS inputs have intrinsic width; the
-            // added minWidth:0 could let the frame collapse there instead).
-            const needsFlex = isMiddle || count === 2 || (!isWeb && count === 1);
-            const isVertical = orientation === "vertical";
-            // Logical (start/end) corners so RTL flips the rounding with the
-            // children — physical corners would land rounded edges on
-            // interior seams.
-            const wrapperProps =
-              isFirst && isLast
-                ? { borderRadius: radius }
-                : isFirst
-                  ? isVertical
-                    ? { borderStartStartRadius: radius, borderStartEndRadius: radius }
-                    : { borderStartStartRadius: radius, borderEndStartRadius: radius }
-                  : isLast
-                    ? isVertical
-                      ? { borderEndStartRadius: radius, borderEndEndRadius: radius }
-                      : { borderStartEndRadius: radius, borderEndEndRadius: radius }
-                    : {};
-            const flexProps = needsFlex
-              ? { flex: 1, ...(isVertical ? { minHeight: 0 } : { minWidth: 0 }) }
-              : {};
-            return (
-              <View {...flexProps} {...wrapperProps} overflow="hidden">
-                {child}
-              </View>
-            );
-          })}
+          {renderItems(true)}
         </ControlGroupFrame>
       </FocusContext.Provider>
     </ControlGroupCtx.Provider>
   );
 }
+
+export const ControlGroup = Object.assign(ControlGroupImpl, {
+  Addon: ControlGroupAddon,
+});

package/src/FieldDisplay/FieldDisplay.spec.tsx

@@ -0,0 +1,121 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { FieldDisplay } from "./index";
+import { EMPTY } from "./formatters";
+
+afterEach(cleanup);
+
+function frame(container: HTMLElement) {
+  return container.querySelector("[data-component='FieldDisplay']") as HTMLElement | null;
+}
+
+function radiusClasses(el: HTMLElement | null): string[] {
+  return String(el?.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_btlr-"));
+}
+
+describe("FieldDisplay", () => {
+  it("keeps zero and false as values, empty as the empty mark", () => {
+    const zero = renderWithProviders(<FieldDisplay field="stepper" value={0} />);
+    expect(zero.container.textContent).toContain("0");
+    expect(zero.container.textContent).not.toContain(EMPTY);
+    cleanup();
+
+    const falsy = renderWithProviders(<FieldDisplay field="checkbox" value={false} />);
+    expect(frame(falsy.container)?.querySelector("svg")).toBeNull();
+    expect(falsy.container.textContent).not.toContain(EMPTY);
+    cleanup();
+
+    const empty = renderWithProviders(<FieldDisplay field="input" value={null} />);
+    expect(empty.container.textContent).toContain(EMPTY);
+  });
+
+  it("renders select labels through Chip, not the raw slug", () => {
+    const result = renderWithProviders(
+      <FieldDisplay
+        field="select"
+        value="b"
+        fieldProps={{
+          options: [
+            { label: "Beta", value: "b", color: "blue" },
+            { label: "Alpha", value: "a" },
+          ],
+        }}
+      />,
+    );
+    expect(result.findTextElement("Beta")).toBeDefined();
+    expect(result.container.textContent).not.toMatch(/\bb\b/);
+  });
+
+  it("escapes HTML as text and does not create a javascript: link", () => {
+    const html = renderWithProviders(
+      <FieldDisplay field="input" value={'<img src=x onerror="alert(1)">'} />,
+    );
+    expect(html.container.querySelector("img")).toBeNull();
+    expect(html.container.textContent).toContain("<img");
+    cleanup();
+
+    const js = renderWithProviders(<FieldDisplay field="input" value="javascript:alert(1)" />);
+    expect(js.container.querySelector("[role='link']")).toBeNull();
+    expect(js.container.textContent).toContain("javascript:alert(1)");
+  });
+
+  it("turns a safe https value into a keyboard-reachable link", () => {
+    const result = renderWithProviders(
+      <FieldDisplay field="input" value="https://example.com/item" />,
+    );
+    const link = result.container.querySelector("[role='link']") as HTMLAnchorElement | null;
+    expect(link).not.toBeNull();
+    expect(link?.getAttribute("href")).toBe("https://example.com/item");
+  });
+
+  it("strips tags from rich text", () => {
+    const result = renderWithProviders(
+      <FieldDisplay field="richtexteditor" value="<p>Rich <b>text</b> content</p>" />,
+    );
+    expect(result.container.textContent).toContain("Rich text content");
+    expect(result.container.querySelector("b")).toBeNull();
+  });
+
+  it("standalone frame follows the radius knob (LC-18)", () => {
+    const none = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <FieldDisplay field="input" value="Hello" />
+      </Preset>,
+    );
+    expect(radiusClasses(frame(none.container))).toEqual(["_btlr-t-radius-0"]);
+    cleanup();
+
+    const full = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <FieldDisplay field="input" value="Hello" />
+      </Preset>,
+    );
+    expect(radiusClasses(frame(full.container))).toEqual(["_btlr-t-radius-12"]);
+  });
+
+  it("standalone textarea keeps line breaks", () => {
+    const result = renderWithProviders(
+      <FieldDisplay field="textarea" value={"line one\nline two"} />,
+    );
+    const text = frame(result.container)?.textContent ?? "";
+    expect(text).toContain("line one");
+    expect(text).toContain("line two");
+  });
+
+  // Restored `it(...)` header lost in the 2026-08-14 merge (the body was
+  // orphaned at top level and broke the whole file's parse).
+  it("standalone datepicker renders its field frame", () => {
+    const result = renderWithProviders(<FieldDisplay field="datepicker" value="2026-01-15" />);
+    const root = frame(result.container);
+    expect(root).not.toBeNull();
+    expect(root?.getAttribute("data-field")).toBe("datepicker");
+  });
+});

package/src/FieldDisplay/FieldDisplay.stories.tsx

@@ -44,11 +44,13 @@ type Story = StoryObj<typeof FieldDisplay>;
 
 function Row({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <XStack gap="$3" alignItems="center">
-      <Paragraph size="$2" width={180} color="$placeholderColor">
+    <XStack gap="$3" alignItems="flex-start">
+      <Paragraph size="$2" width={180} color="$placeholderColor" paddingTop="$2">
         {label}
       </Paragraph>
-      <XStack flex={1}>{children}</XStack>
+      <XStack flex={1} minWidth={0}>
+        {children}
+      </XStack>
     </XStack>
   );
 }
@@ -82,6 +84,12 @@ export const AllTypes: Story = {
       <Row label="slider (percentish)">
         <FieldDisplay field="slider" value={0.75} />
       </Row>
+      <Row label="progress">
+        <FieldDisplay field="progress" value={64} fieldProps={{ max: 100 }} />
+      </Row>
+      <Row label="rating">
+        <FieldDisplay field="rating" value={0.8} fieldProps={{ maxStars: 5 }} />
+      </Row>
       <Row label="select (label lookup)">
         <FieldDisplay
           field="select"
@@ -89,7 +97,7 @@ export const AllTypes: Story = {
           fieldProps={{
             options: [
               { label: "Alpha", value: "a" },
-              { label: "Beta", value: "b" },
+              { label: "Beta", value: "b", color: "blue" },
             ],
           }}
         />
@@ -125,7 +133,7 @@ export const AllTypes: Story = {
         <FieldDisplay field="image" value={TINY_PNG} />
       </Row>
       <Row label="signature">
-        <FieldDisplay field="signature" value="data:image/png;base64,abc" />
+        <FieldDisplay field="signature" value={TINY_PNG} />
       </Row>
       <Row label="geolocation">
         <FieldDisplay field="geolocation" value={{ lat: 30.2672, lng: -97.7431 }} />
@@ -136,6 +144,9 @@ export const AllTypes: Story = {
       <Row label="unknown/custom">
         <FieldDisplay field="custom" value={{ some: "object" }} />
       </Row>
+      <Row label="link (https)">
+        <FieldDisplay field="input" value="https://example.com/item" />
+      </Row>
     </YStack>
   ),
 };