@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/esm/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/esm/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":"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","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/esm/ControlGroup/index.native.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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.native.js";
-import { formInputColors } from "../shared/colorRamps.native.js";
+import { formCommonColors, formInputColors } from "../shared/colorRamps.native.js";
 import { getElevationWrapperProps } from "../shared/utils.native.js";
 import { ControlGroupCtx } from "../shared/groupContext.native.js";
 import { useIsInTableCell } from "../shared/tableCellContext.native.js";
@@ -12,10 +12,9 @@ var 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
   } : {
@@ -38,7 +37,60 @@ var ControlGroupFrame = styled(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 Children.toArray(children).filter(isValidElement);
+}
+function ControlGroupAddonImpl(param) {
+  var {
+    children,
+    ...props
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var 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
+  });
+}
+var ControlGroupAddon = Object.assign(ControlGroupAddonImpl, {
+  isControlGroupAddon: true
+});
+function ControlGroupImpl(param) {
   var {
     children,
     orientation = "horizontal",
@@ -51,9 +103,58 @@ function ControlGroup(param) {
     elevation
   } = useResolvedKnobs();
   var inTableCell = useIsInTableCell();
+  if (isWeb) {
+    ensureCompositeFocusRing();
+    ensureControlGroupRing();
+  }
   var elevationWrapperProps = useMemo(function () {
     return 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 = getGroupPosition(index, count);
+      var isMiddle = position === "middle";
+      var needsFlex = !isControlGroupAddon(child) && (isMiddle || count === 2 || !isWeb && count === 1);
+      var 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 = child.key) !== null && _child_key !== void 0 ? _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,
@@ -62,17 +163,18 @@ function ControlGroup(param) {
         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, function (child) {
-            if (! /* @__PURE__ */isValidElement(child)) return child;
+          children: Children.map(items, function (child) {
             return /* @__PURE__ */_jsx(View, {
               flex: 1,
               minWidth: 0,
+              borderRadius: 0,
               children: child
             });
           })
@@ -87,23 +189,19 @@ function ControlGroup(param) {
       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),
@@ -111,59 +209,41 @@ function ControlGroup(param) {
           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, function (child, index) {
-          if (! /* @__PURE__ */isValidElement(child)) return child;
-          var radius = knobProps.borderRadius.borderRadius;
-          var count = Children.count(children);
-          var isFirst = index === 0;
-          var isLast = index === count - 1;
-          var isMiddle = count > 2 && !isFirst && !isLast;
-          var needsFlex = isMiddle || count === 2 || !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__ */_jsx(View, {
-            ...flexProps,
-            ...wrapperProps,
-            overflow: "hidden",
-            children: child
-          });
-        })
+        "data-mp-control-group": "",
+        "data-orientation": orientation,
+        children: renderItems(true)
       })
     })
   });
 }
-export { ControlGroup };
+var ControlGroup = Object.assign(ControlGroupImpl, {
+  Addon: ControlGroupAddon
+});
+export { ControlGroup, ControlGroupAddon };
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","Children","isValidElement","useMemo","useState","View","isWeb","styled","useResolvedKnobs","FocusContext","getInputFrameTransitionProps","InputContext","formInputColors","getElevationWrapperProps","ControlGroupCtx","useIsInTableCell","ControlGroupFrame","context","alignItems","overflow","minWidth","borderWidth","borderColor","border","base","backgroundColor","background","outlineStyle","tabIndex","focusable","variants","scaleIcon","size","...size","val","param","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"],"sources":["../../../src/ControlGroup/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","Children","isValidElement","useMemo","useState","SizableText","View","isWeb","styled","GroupPositionContext","ensureCompositeFocusRing","ensureFocusVisibleRing","getGroupPosition","hairline","useResolvedKnobs","FocusContext","getInputFrameTransitionProps","InputContext","formCommonColors","formInputColors","getElevationWrapperProps","ControlGroupCtx","useIsInTableCell","ControlGroupFrame","context","alignItems","overflow","minWidth","flexWrap","borderColor","border","base","backgroundColor","background","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","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","renderItems2","seams","count","length","nodes","index","_child_key","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"],"sources":["../../../src/ControlGroup/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}