@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/jsx/ControlGroup/index.mjs

@@ -1,8 +1,8 @@
 import { Children, isValidElement, useMemo, useState } from "react";
-import { View, isWeb, styled } from "tamagui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { SizableText, View, isWeb, styled } from "tamagui";
+import { GroupPositionContext, ensureCompositeFocusRing, ensureFocusVisibleRing, getGroupPosition, hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import { FocusContext, getInputFrameTransitionProps, InputContext } from "../InputParts/index.mjs";
-import { formInputColors } from "../shared/colorRamps.mjs";
+import { formCommonColors, formInputColors } from "../shared/colorRamps.mjs";
 import { getElevationWrapperProps } from "../shared/utils.mjs";
 import { ControlGroupCtx } from "../shared/groupContext.mjs";
 import { useIsInTableCell } from "../shared/tableCellContext.mjs";
@@ -12,10 +12,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",
   ...(isWeb ? {
     tabIndex: -1
   } : {
@@ -35,7 +34,59 @@ const ControlGroupFrame = styled(View, {
     }
   }
 });
-function ControlGroup({
+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) {
+  const type = child.type;
+  return type === ControlGroupAddon || type.isControlGroupAddon === true;
+}
+function groupItems(children) {
+  return Children.toArray(children).filter(isValidElement);
+}
+function ControlGroupAddonImpl({
+  children,
+  ...props
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const text = typeof children === "string" || typeof children === "number" ? /* @__PURE__ */jsx(SizableText, {
+    ...knobProps.label,
+    color: formCommonColors.muted,
+    userSelect: "none",
+    numberOfLines: 1,
+    children
+  }) : children;
+  return /* @__PURE__ */jsx(View, {
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    backgroundColor: "$color4",
+    paddingHorizontal: "$3",
+    borderRadius: 0,
+    flexGrow: 0,
+    flexShrink: 0,
+    ...props,
+    children: text
+  });
+}
+const ControlGroupAddon = Object.assign(ControlGroupAddonImpl, {
+  isControlGroupAddon: true
+});
+function ControlGroupImpl({
   children,
   orientation = "horizontal",
   ...props
@@ -47,7 +98,55 @@ function ControlGroup({
     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 => {
+    const count = items.length;
+    const nodes = [];
+    for (let index = 0; index < count; index++) {
+      const child = items[index];
+      const position = getGroupPosition(index, count);
+      const isMiddle = position === "middle";
+      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(/* @__PURE__ */jsx(GroupPositionContext.Provider, {
+        value: position,
+        children: /* @__PURE__ */jsx(View, {
+          ...flexProps,
+          borderRadius: 0,
+          overflow: "hidden",
+          "data-mp-group-position": position,
+          children: child
+        })
+      }, child.key ?? index));
+      if (seams && index < count - 1) {
+        nodes.push(/* @__PURE__ */jsx(View, {
+          ...(isVertical ? hairline.line : hairline.vline),
+          backgroundColor: formInputColors.border.base,
+          flexGrow: 0,
+          flexShrink: 0,
+          alignSelf: "stretch",
+          "aria-hidden": true
+        }, `seam-${index}`));
+      }
+    }
+    return nodes;
+  };
   if (inTableCell) {
     return /* @__PURE__ */jsx(ControlGroupCtx.Provider, {
       value: true,
@@ -56,20 +155,19 @@ function ControlGroup({
         setFocused,
         children: /* @__PURE__ */jsx(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: Children.map(children, child => {
-            if (!isValidElement(child)) return child;
-            return /* @__PURE__ */jsx(View, {
-              flex: 1,
-              minWidth: 0,
-              children: child
-            });
-          })
+          children: Children.map(items, child => /* @__PURE__ */jsx(View, {
+            flex: 1,
+            minWidth: 0,
+            borderRadius: 0,
+            children: child
+          }))
         })
       })
     });
@@ -81,23 +179,19 @@ function ControlGroup({
       setFocused,
       children: /* @__PURE__ */jsx(ControlGroupFrame, {
         ...knobProps.body,
-        size: knobProps.sizeToken,
-        flexDirection: orientation === "vertical" ? "column" : "row",
+        ...(!isVertical ? {
+          size: knobProps.sizeToken
+        } : void 0),
+        flexDirection: isVertical ? "column" : "row",
         backgroundColor: knobProps.outlined ? "transparent" : formInputColors.background.base,
+        ...knobProps.inputSurface,
         ...knobProps.borderRadius,
         ...elevationWrapperProps,
         ...getInputFrameTransitionProps(typeof knobProps.transition === "string" ? knobProps.transition : void 0),
-        ...(control.hoverKnobProps ? {
-          hoverStyle: control.hoverKnobProps
-        } : void 0),
-        ...(control.pressKnobProps ? {
-          pressStyle: control.pressKnobProps
-        } : void 0),
         ...(control.focusKnobProps ? {
           focusStyle: {
             borderColor: formInputColors.border.focus,
             backgroundColor: knobProps.outlined ? "transparent" : formInputColors.background.focus,
-            outlineStyle: "none",
             ...control.focusKnobProps
           }
         } : void 0),
@@ -105,59 +199,41 @@ function ControlGroup({
           focusVisibleStyle: {
             borderColor: formInputColors.border.focus,
             backgroundColor: knobProps.outlined ? "transparent" : formInputColors.background.focus,
-            outlineStyle: "none",
-            ...control.focusVisibleKnobProps
+            ...ensureFocusVisibleRing({
+              ...control.focusVisibleKnobProps,
+              outlineOffset: -2
+            })
           }
-        } : void 0),
+        } : {
+          focusVisibleStyle: {
+            borderColor: formInputColors.border.focus,
+            ...ensureFocusVisibleRing({
+              outlineOffset: -2
+            })
+          }
+        }),
         ...props,
+        ...(isWeb ? {
+          className: ["mp-control-group", "mp-composite-ring", "mp-composite-ring-deep", props.className].filter(Boolean).join(" ")
+        } : void 0),
         ...(focused ? {
           borderColor: formInputColors.border.focus,
           backgroundColor: knobProps.outlined ? "transparent" : formInputColors.background.focus,
-          ...control.focusKnobProps
+          ...control.focusKnobProps,
+          ...ensureFocusVisibleRing({
+            outlineOffset: -2
+          })
         } : void 0),
         overflow: "hidden",
-        children: Children.map(children, (child, index) => {
-          if (!isValidElement(child)) return child;
-          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;
-          const needsFlex = isMiddle || count === 2 || !isWeb && count === 1;
-          const isVertical = orientation === "vertical";
-          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 /* @__PURE__ */jsx(View, {
-            ...flexProps,
-            ...wrapperProps,
-            overflow: "hidden",
-            children: child
-          });
-        })
+        "data-mp-control-group": "",
+        "data-orientation": orientation,
+        children: renderItems(true)
       })
     })
   });
 }
-export { ControlGroup };
+const ControlGroup = Object.assign(ControlGroupImpl, {
+  Addon: ControlGroupAddon
+});
+export { ControlGroup, ControlGroupAddon };
 //# sourceMappingURL=index.mjs.map

package/dist/jsx/ControlGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Children","isValidElement","useMemo","useState","View","isWeb","styled","useResolvedKnobs","FocusContext","getInputFrameTransitionProps","InputContext","formInputColors","getElevationWrapperProps","ControlGroupCtx","useIsInTableCell","jsx","ControlGroupFrame","context","alignItems","overflow","minWidth","borderWidth","borderColor","border","base","backgroundColor","background","outlineStyle","tabIndex","focusable","variants","scaleIcon","size","...size","val","tokens","height","borderRadius","radius","ControlGroup","children","orientation","props","focused","setFocused","knobProps","control","elevation","inTableCell","elevationWrapperProps","Provider","value","body","sizeToken","flexDirection","map","child","flex","outlined","transition","hoverKnobProps","hoverStyle","pressKnobProps","pressStyle","focusKnobProps","focusStyle","focus","focusVisibleKnobProps","focusVisibleStyle","index","count","isFirst","isLast","isMiddle","needsFlex","isVertical","wrapperProps","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","flexProps","minHeight"],"sources":["../../../src/ControlGroup/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,EAAUC,cAAA,EAAgBC,OAAA,EAASC,QAAA,QAAgC;AAC5E,SAASC,IAAA,EAAMC,KAAA,EAAOC,MAAA,QAAc;AAEpC,SAASC,gBAAA,QAAwB;AACjC,SAASC,YAAA,EAAcC,4BAAA,EAA8BC,YAAA,QAAoB;AACzE,SAASC,eAAA,QAAuB;AAChC,SAASC,wBAAA,QAAgC;AACzC,SAASC,eAAA,QAAuB;AAChC,SAASC,gBAAA,QAAwB;AA0EjB,SAAAC,GAAA;AApEhB,MAAMC,iBAAA,GAAoBV,MAAA,CAAOF,IAAA,EAAM;EACrCa,OAAA,EAASP,YAAA;EACTQ,UAAA,EAAY;EACZC,QAAA,EAAU;EACVC,QAAA,EAAU;EACVC,WAAA,EAAa;EACbC,WAAA,EAAaX,eAAA,CAAgBY,MAAA,CAAOC,IAAA;EACpCC,eAAA,EAAiBd,eAAA,CAAgBe,UAAA,CAAWF,IAAA;EAC5CG,YAAA,EAAc;EAEd,IAAItB,KAAA,GAAQ;IAAEuB,QAAA,EAAU;EAAG,IAAI;IAAEC,SAAA,EAAW;EAAM;EAElDC,QAAA,EAAU;IACRC,SAAA,EAAW;MACT,WAAW,CAAC;IACd;IACAC,IAAA,EAAM;MACJ,WAAWC,CAACC,GAAA,EAAU;QAAEC;MAAO,OAAY;QACzCC,MAAA,EAAQF,GAAA;QACRG,YAAA,EAAeF,MAAA,CAAOG,MAAA,CAAeJ,GAAG;MAC1C;IACF;EACF;AACF,CAAC;AAYM,SAASK,aAAa;EAC3BC,QAAA;EACAC,WAAA,GAAc;EACd,GAAGC;AACL,GAAsB;EACpB,MAAM,CAACC,OAAA,EAASC,UAAU,IAAIzC,QAAA,CAAS,KAAK;EAC5C,MAAM;IAAE0C,SAAA;IAAWC,OAAA;IAASC;EAAU,IAAIxC,gBAAA,CAAiB;EAC3D,MAAMyC,WAAA,GAAclC,gBAAA,CAAiB;EACrC,MAAMmC,qBAAA,GAAwB/C,OAAA,CAC5B,MAAMU,wBAAA,CAAyBiC,SAAA,EAAWE,SAAS,GACnD,CAACF,SAAA,EAAWE,SAAS,CACvB;EAGA,IAAIC,WAAA,EAAa;IACf,OACE,eAAAjC,GAAA,CAACF,eAAA,CAAgBqC,QAAA,EAAhB;MAAyBC,KAAA,EAAO;MAC/BX,QAAA,iBAAAzB,GAAA,CAACP,YAAA,CAAa0C,QAAA,EAAb;QAAsBP,OAAA;QAAkBC,UAAA;QACvCJ,QAAA,iBAAAzB,GAAA,CAACC,iBAAA;UACE,GAAG6B,SAAA,CAAUO,IAAA;UACdpB,IAAA,EAAMa,SAAA,CAAUQ,SAAA;UAChBC,aAAA,EAAeb,WAAA,KAAgB,aAAa,WAAW;UACvDpB,WAAA,EAAa;UACbgB,YAAA,EAAc;UACdZ,eAAA,EAAgB;UACf,GAAGiB,KAAA;UAEHF,QAAA,EAAAxC,QAAA,CAASuD,GAAA,CAAIf,QAAA,EAAWgB,KAAA,IAAU;YACjC,IAAI,CAACvD,cAAA,CAAeuD,KAAK,GAAG,OAAOA,KAAA;YAInC,OACE,eAAAzC,GAAA,CAACX,IAAA;cAAKqD,IAAA,EAAM;cAAGrC,QAAA,EAAU;cACtBoB,QAAA,EAAAgB;YAAA,CACH;UAEJ,CAAC;QAAA,CACH;MAAA,CACF;IAAA,CACF;EAEJ;EAEA,OACE,eAAAzC,GAAA,CAACF,eAAA,CAAgBqC,QAAA,EAAhB;IAAyBC,KAAA,EAAO;IAC/BX,QAAA,iBAAAzB,GAAA,CAACP,YAAA,CAAa0C,QAAA,EAAb;MAAsBP,OAAA;MAAkBC,UAAA;MACvCJ,QAAA,iBAAAzB,GAAA,CAACC,iBAAA;QACE,GAAG6B,SAAA,CAAUO,IAAA;QACdpB,IAAA,EAAMa,SAAA,CAAUQ,SAAA;QAChBC,aAAA,EAAeb,WAAA,KAAgB,aAAa,WAAW;QACvDhB,eAAA,EAAiBoB,SAAA,CAAUa,QAAA,GAAW,gBAAgB/C,eAAA,CAAgBe,UAAA,CAAWF,IAAA;QAChF,GAAGqB,SAAA,CAAUR,YAAA;QACb,GAAGY,qBAAA;QACH,GAAGxC,4BAAA,CACF,OAAOoC,SAAA,CAAUc,UAAA,KAAe,WAAWd,SAAA,CAAUc,UAAA,GAAa,MACpE;QACC,IAAIb,OAAA,CAAQc,cAAA,GAAiB;UAAEC,UAAA,EAAYf,OAAA,CAAQc;QAAe,IAAI;QACtE,IAAId,OAAA,CAAQgB,cAAA,GAAiB;UAAEC,UAAA,EAAYjB,OAAA,CAAQgB;QAAe,IAAI;QACtE,IAAIhB,OAAA,CAAQkB,cAAA,GACT;UACEC,UAAA,EAAY;YACV3C,WAAA,EAAaX,eAAA,CAAgBY,MAAA,CAAO2C,KAAA;YACpCzC,eAAA,EAAiBoB,SAAA,CAAUa,QAAA,GACvB,gBACA/C,eAAA,CAAgBe,UAAA,CAAWwC,KAAA;YAC/BvC,YAAA,EAAc;YACd,GAAGmB,OAAA,CAAQkB;UACb;QACF,IACA;QACH,IAAIlB,OAAA,CAAQqB,qBAAA,GACT;UACEC,iBAAA,EAAmB;YACjB9C,WAAA,EAAaX,eAAA,CAAgBY,MAAA,CAAO2C,KAAA;YACpCzC,eAAA,EAAiBoB,SAAA,CAAUa,QAAA,GACvB,gBACA/C,eAAA,CAAgBe,UAAA,CAAWwC,KAAA;YAC/BvC,YAAA,EAAc;YACd,GAAGmB,OAAA,CAAQqB;UACb;QACF,IACA;QACH,GAAGzB,KAAA;QACH,IAAIC,OAAA,GACD;UACErB,WAAA,EAAaX,eAAA,CAAgBY,MAAA,CAAO2C,KAAA;UACpCzC,eAAA,EAAiBoB,SAAA,CAAUa,QAAA,GACvB,gBACA/C,eAAA,CAAgBe,UAAA,CAAWwC,KAAA;UAC/B,GAAGpB,OAAA,CAAQkB;QACb,IACA;QACJ7C,QAAA,EAAS;QAERqB,QAAA,EAAAxC,QAAA,CAASuD,GAAA,CAAIf,QAAA,EAAU,CAACgB,KAAA,EAAOa,KAAA,KAAU;UACxC,IAAI,CAACpE,cAAA,CAAeuD,KAAK,GAAG,OAAOA,KAAA;UAInC,MAAMlB,MAAA,GAASO,SAAA,CAAUR,YAAA,CAAaA,YAAA;UACtC,MAAMiC,KAAA,GAAQtE,QAAA,CAASsE,KAAA,CAAM9B,QAAQ;UACrC,MAAM+B,OAAA,GAAUF,KAAA,KAAU;UAC1B,MAAMG,MAAA,GAASH,KAAA,KAAUC,KAAA,GAAQ;UACjC,MAAMG,QAAA,GAAWH,KAAA,GAAQ,KAAK,CAACC,OAAA,IAAW,CAACC,MAAA;UAO3C,MAAME,SAAA,GAAYD,QAAA,IAAYH,KAAA,KAAU,KAAM,CAACjE,KAAA,IAASiE,KAAA,KAAU;UAClE,MAAMK,UAAA,GAAalC,WAAA,KAAgB;UAInC,MAAMmC,YAAA,GACJL,OAAA,IAAWC,MAAA,GACP;YAAEnC,YAAA,EAAcC;UAAO,IACvBiC,OAAA,GACEI,UAAA,GACE;YAAEE,sBAAA,EAAwBvC,MAAA;YAAQwC,oBAAA,EAAsBxC;UAAO,IAC/D;YAAEuC,sBAAA,EAAwBvC,MAAA;YAAQyC,oBAAA,EAAsBzC;UAAO,IACjEkC,MAAA,GACEG,UAAA,GACE;YAAEI,oBAAA,EAAsBzC,MAAA;YAAQ0C,kBAAA,EAAoB1C;UAAO,IAC3D;YAAEwC,oBAAA,EAAsBxC,MAAA;YAAQ0C,kBAAA,EAAoB1C;UAAO,IAC7D,CAAC;UACX,MAAM2C,SAAA,GAAYP,SAAA,GACd;YAAEjB,IAAA,EAAM;YAAG,IAAIkB,UAAA,GAAa;cAAEO,SAAA,EAAW;YAAE,IAAI;cAAE9D,QAAA,EAAU;YAAE;UAAG,IAChE,CAAC;UACL,OACE,eAAAL,GAAA,CAACX,IAAA;YAAM,GAAG6E,SAAA;YAAY,GAAGL,YAAA;YAAczD,QAAA,EAAS;YAC7CqB,QAAA,EAAAgB;UAAA,CACH;QAEJ,CAAC;MAAA,CACH;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"names":["Children","isValidElement","useMemo","useState","SizableText","View","isWeb","styled","GroupPositionContext","ensureCompositeFocusRing","ensureFocusVisibleRing","getGroupPosition","hairline","useResolvedKnobs","FocusContext","getInputFrameTransitionProps","InputContext","formCommonColors","formInputColors","getElevationWrapperProps","ControlGroupCtx","useIsInTableCell","jsx","ControlGroupFrame","context","alignItems","overflow","minWidth","flexWrap","borderColor","border","base","backgroundColor","background","tabIndex","focusable","variants","scaleIcon","size","...size","val","tokens","height","borderRadius","radius","CONTROL_GROUP_RING_ID","controlGroupRingCss","ensureControlGroupRing","document","getElementById","tag","createElement","id","textContent","head","appendChild","isControlGroupAddon","child","type","ControlGroupAddon","groupItems","children","toArray","filter","ControlGroupAddonImpl","props","knobProps","text","label","color","muted","userSelect","numberOfLines","justifyContent","alignSelf","paddingHorizontal","flexGrow","flexShrink","Object","assign","ControlGroupImpl","orientation","focused","setFocused","control","elevation","inTableCell","elevationWrapperProps","isVertical","items","renderItems","seams","count","length","nodes","index","position","isMiddle","needsFlex","flexProps","flex","minHeight","push","Provider","value","key","line","vline","body","flexDirection","borderWidth","map","sizeToken","outlined","inputSurface","transition","focusKnobProps","focusStyle","focus","focusVisibleKnobProps","focusVisibleStyle","outlineOffset","className","Boolean","join","ControlGroup","Addon"],"sources":["../../../src/ControlGroup/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/ControlGroup/index.native.js

@@ -24,7 +24,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var ControlGroup_exports = {};
 __export(ControlGroup_exports, {
-  ControlGroup: () => ControlGroup
+  ControlGroup: () => ControlGroup,
+  ControlGroupAddon: () => ControlGroupAddon
 });
 module.exports = __toCommonJS(ControlGroup_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -41,10 +42,9 @@ var ControlGroupFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   alignItems: "stretch",
   overflow: "hidden",
   minWidth: 0,
-  borderWidth: 1,
+  flexWrap: "nowrap",
   borderColor: import_colorRamps.formInputColors.border.base,
   backgroundColor: import_colorRamps.formInputColors.background.base,
-  outlineStyle: "none",
   ...(import_tamagui.isWeb ? {
     tabIndex: -1
   } : {
@@ -67,7 +67,60 @@ var ControlGroupFrame = (0, import_tamagui.styled)(import_tamagui.View, {
     }
   }
 });
-function ControlGroup(param) {
+var CONTROL_GROUP_RING_ID = "mp-control-group-ring";
+var 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;
+  var tag = document.createElement("style");
+  tag.id = CONTROL_GROUP_RING_ID;
+  tag.textContent = controlGroupRingCss;
+  document.head.appendChild(tag);
+}
+function isControlGroupAddon(child) {
+  var type = child.type;
+  return type === ControlGroupAddon || type.isControlGroupAddon === true;
+}
+function groupItems(children) {
+  return import_react.Children.toArray(children).filter(import_react.isValidElement);
+}
+function ControlGroupAddonImpl(param) {
+  var {
+    children,
+    ...props
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var text = typeof children === "string" || typeof children === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+    ...knobProps.label,
+    color: import_colorRamps.formCommonColors.muted,
+    userSelect: "none",
+    numberOfLines: 1,
+    children
+  }) : children;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    backgroundColor: "$color4",
+    paddingHorizontal: "$3",
+    borderRadius: 0,
+    flexGrow: 0,
+    flexShrink: 0,
+    ...props,
+    children: text
+  });
+}
+var ControlGroupAddon = Object.assign(ControlGroupAddonImpl, {
+  isControlGroupAddon: true
+});
+function ControlGroupImpl(param) {
   var {
     children,
     orientation = "horizontal",
@@ -80,9 +133,58 @@ function ControlGroup(param) {
     elevation
   } = (0, import_theme.useResolvedKnobs)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  if (import_tamagui.isWeb) {
+    (0, import_theme.ensureCompositeFocusRing)();
+    ensureControlGroupRing();
+  }
   var elevationWrapperProps = (0, import_react.useMemo)(function () {
     return (0, import_utils.getElevationWrapperProps)(knobProps, elevation);
   }, [knobProps, elevation]);
+  var isVertical = orientation === "vertical";
+  var items = groupItems(children);
+  var renderItems = function renderItems2(seams) {
+    var count = items.length;
+    var nodes = [];
+    for (var index = 0; index < count; index++) {
+      var _child_key;
+      var child = items[index];
+      var position = (0, import_theme.getGroupPosition)(index, count);
+      var isMiddle = position === "middle";
+      var needsFlex = !isControlGroupAddon(child) && (isMiddle || count === 2 || !import_tamagui.isWeb && count === 1);
+      var flexProps = needsFlex ? {
+        flex: 1,
+        ...(isVertical ? {
+          minHeight: 0
+        } : {
+          minWidth: 0
+        })
+      } : {
+        flexGrow: 0,
+        flexShrink: 0
+      };
+      nodes.push(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.GroupPositionContext.Provider, {
+        value: position,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...flexProps,
+          borderRadius: 0,
+          overflow: "hidden",
+          "data-mp-group-position": position,
+          children: child
+        })
+      }, (_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : index));
+      if (seams && index < count - 1) {
+        nodes.push(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...(isVertical ? import_theme.hairline.line : import_theme.hairline.vline),
+          backgroundColor: import_colorRamps.formInputColors.border.base,
+          flexGrow: 0,
+          flexShrink: 0,
+          alignSelf: "stretch",
+          "aria-hidden": true
+        }, `seam-${index}`));
+      }
+    }
+    return nodes;
+  };
   if (inTableCell) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_groupContext.ControlGroupCtx.Provider, {
       value: true,
@@ -91,17 +193,18 @@ function ControlGroup(param) {
         setFocused,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(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: import_react.Children.map(children, function (child) {
-            if (! /* @__PURE__ */(0, import_react.isValidElement)(child)) return child;
+          children: import_react.Children.map(items, function (child) {
             return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
               flex: 1,
               minWidth: 0,
+              borderRadius: 0,
               children: child
             });
           })
@@ -116,23 +219,19 @@ function ControlGroup(param) {
       setFocused,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlGroupFrame, {
         ...knobProps.body,
-        size: knobProps.sizeToken,
-        flexDirection: orientation === "vertical" ? "column" : "row",
+        ...(!isVertical ? {
+          size: knobProps.sizeToken
+        } : void 0),
+        flexDirection: isVertical ? "column" : "row",
         backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.base,
+        ...knobProps.inputSurface,
         ...knobProps.borderRadius,
         ...elevationWrapperProps,
         ...(0, import_InputParts.getInputFrameTransitionProps)(typeof knobProps.transition === "string" ? knobProps.transition : void 0),
-        ...(control.hoverKnobProps ? {
-          hoverStyle: control.hoverKnobProps
-        } : void 0),
-        ...(control.pressKnobProps ? {
-          pressStyle: control.pressKnobProps
-        } : void 0),
         ...(control.focusKnobProps ? {
           focusStyle: {
             borderColor: import_colorRamps.formInputColors.border.focus,
             backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.focus,
-            outlineStyle: "none",
             ...control.focusKnobProps
           }
         } : void 0),
@@ -140,58 +239,40 @@ function ControlGroup(param) {
           focusVisibleStyle: {
             borderColor: import_colorRamps.formInputColors.border.focus,
             backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.focus,
-            outlineStyle: "none",
-            ...control.focusVisibleKnobProps
+            ...(0, import_theme.ensureFocusVisibleRing)({
+              ...control.focusVisibleKnobProps,
+              outlineOffset: -2
+            })
           }
-        } : void 0),
+        } : {
+          focusVisibleStyle: {
+            borderColor: import_colorRamps.formInputColors.border.focus,
+            ...(0, import_theme.ensureFocusVisibleRing)({
+              outlineOffset: -2
+            })
+          }
+        }),
         ...props,
+        ...(import_tamagui.isWeb ? {
+          className: ["mp-control-group", "mp-composite-ring", "mp-composite-ring-deep", props.className].filter(Boolean).join(" ")
+        } : void 0),
         ...(focused ? {
           borderColor: import_colorRamps.formInputColors.border.focus,
           backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.focus,
-          ...control.focusKnobProps
+          ...control.focusKnobProps,
+          ...(0, import_theme.ensureFocusVisibleRing)({
+            outlineOffset: -2
+          })
         } : void 0),
         overflow: "hidden",
-        children: import_react.Children.map(children, function (child, index) {
-          if (! /* @__PURE__ */(0, import_react.isValidElement)(child)) return child;
-          var radius = knobProps.borderRadius.borderRadius;
-          var count = import_react.Children.count(children);
-          var isFirst = index === 0;
-          var isLast = index === count - 1;
-          var isMiddle = count > 2 && !isFirst && !isLast;
-          var needsFlex = isMiddle || count === 2 || !import_tamagui.isWeb && count === 1;
-          var isVertical = orientation === "vertical";
-          var 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
-          } : {};
-          var flexProps = needsFlex ? {
-            flex: 1,
-            ...(isVertical ? {
-              minHeight: 0
-            } : {
-              minWidth: 0
-            })
-          } : {};
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            ...flexProps,
-            ...wrapperProps,
-            overflow: "hidden",
-            children: child
-          });
-        })
+        "data-mp-control-group": "",
+        "data-orientation": orientation,
+        children: renderItems(true)
       })
     })
   });
 }
+var ControlGroup = Object.assign(ControlGroupImpl, {
+  Addon: ControlGroupAddon
+});
 //# sourceMappingURL=index.native.js.map