@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/cjs/ControlGroup/index.cjs

@@ -22,7 +22,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_react = require("react");
@@ -39,10 +40,9 @@ const 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
   } : {
@@ -62,7 +62,59 @@ const ControlGroupFrame = (0, import_tamagui.styled)(import_tamagui.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 import_react.Children.toArray(children).filter(import_react.isValidElement);
+}
+function ControlGroupAddonImpl({
+  children,
+  ...props
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const 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
+  });
+}
+const ControlGroupAddon = Object.assign(ControlGroupAddonImpl, {
+  isControlGroupAddon: true
+});
+function ControlGroupImpl({
   children,
   orientation = "horizontal",
   ...props
@@ -74,7 +126,55 @@ function ControlGroup({
     elevation
   } = (0, import_theme.useResolvedKnobs)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  if (import_tamagui.isWeb) {
+    (0, import_theme.ensureCompositeFocusRing)();
+    ensureControlGroupRing();
+  }
   const elevationWrapperProps = (0, import_react.useMemo)(() => (0, import_utils.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 = (0, import_theme.getGroupPosition)(index, count);
+      const isMiddle = position === "middle";
+      const needsFlex = !isControlGroupAddon(child) && (isMiddle || count === 2 || !import_tamagui.isWeb && count === 1);
+      const 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 ?? 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,
@@ -83,20 +183,19 @@ function ControlGroup({
         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, child => {
-            if (!(0, import_react.isValidElement)(child)) return child;
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              flex: 1,
-              minWidth: 0,
-              children: child
-            });
-          })
+          children: import_react.Children.map(items, child => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            flex: 1,
+            minWidth: 0,
+            borderRadius: 0,
+            children: child
+          }))
         })
       })
     });
@@ -108,23 +207,19 @@ function ControlGroup({
       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),
@@ -132,57 +227,39 @@ function ControlGroup({
           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, (child, index) => {
-          if (!(0, import_react.isValidElement)(child)) return child;
-          const radius = knobProps.borderRadius.borderRadius;
-          const count = import_react.Children.count(children);
-          const isFirst = index === 0;
-          const isLast = index === count - 1;
-          const isMiddle = count > 2 && !isFirst && !isLast;
-          const needsFlex = isMiddle || count === 2 || !import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            ...flexProps,
-            ...wrapperProps,
-            overflow: "hidden",
-            children: child
-          });
-        })
+        "data-mp-control-group": "",
+        "data-orientation": orientation,
+        children: renderItems(true)
       })
     })
   });
-}
+}
+const ControlGroup = Object.assign(ControlGroupImpl, {
+  Addon: ControlGroupAddon
+});

package/dist/cjs/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

package/dist/cjs/ControlGroup/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ControlGroup_exports","__export","ControlGroup","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_theme","import_InputParts","import_colorRamps","import_utils","import_groupContext","import_tableCellContext","ControlGroupFrame","styled","View","context","InputContext","alignItems","overflow","minWidth","borderWidth","borderColor","formInputColors","border","base","backgroundColor","background","outlineStyle","isWeb","tabIndex","focusable","variants","scaleIcon","size","...size","val","param","tokens","height","borderRadius","radius","children","orientation","props","focused","setFocused","useState","knobProps","control","elevation","useResolvedKnobs","inTableCell","useIsInTableCell","elevationWrapperProps","useMemo","getElevationWrapperProps","jsx","ControlGroupCtx","Provider","FocusContext","body","sizeToken","flexDirection","Children","map","child","isValidElement","flex","outlined","getInputFrameTransitionProps","transition","hoverKnobProps","hoverStyle","pressKnobProps","pressStyle","focusKnobProps","focusStyle","focus","focusVisibleKnobProps","focusVisibleStyle"],"sources":["../../../src/ControlGroup/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ControlGroup_exports","__export","ControlGroup","ControlGroupAddon","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_theme","import_InputParts","import_colorRamps","import_utils","import_groupContext","import_tableCellContext","ControlGroupFrame","styled","View","context","InputContext","alignItems","overflow","minWidth","flexWrap","borderColor","formInputColors","border","base","backgroundColor","background","isWeb","tabIndex","focusable","variants","scaleIcon","size","...size","val","param","tokens","height","borderRadius","radius","CONTROL_GROUP_RING_ID","controlGroupRingCss","ensureControlGroupRing","document","getElementById","tag","createElement","id","textContent","head","appendChild","isControlGroupAddon","child","type","groupItems","children","Children","toArray","filter","isValidElement","ControlGroupAddonImpl","props","knobProps","useResolvedKnobs","text","jsx","SizableText","label","color","formCommonColors","muted","userSelect","numberOfLines","justifyContent","alignSelf","paddingHorizontal","flexGrow","flexShrink","Object","assign","ControlGroupImpl","orientation","focused","setFocused","useState","control","elevation","inTableCell","useIsInTableCell","ensureCompositeFocusRing","elevationWrapperProps","useMemo","getElevationWrapperProps","isVertical","items","renderItems","renderItems2","seams","count","length","nodes","index","_child_key","position","getGroupPosition","isMiddle","needsFlex","flexProps","flex","minHeight","push","GroupPositionContext","Provider","key","hairline","line","vline","ControlGroupCtx","FocusContext","body","flexDirection","borderWidth","map","sizeToken","outlined","inputSurface","getInputFrameTransitionProps","transition","focusKnobProps","focusStyle","focus","focusVisibleKnobProps","focusVisibleStyle","ensureFocusVisibleRing","outlineOffset"],"sources":["../../../src/ControlGroup/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}