@multiplatform.one/forms 6.7.0 → 7.1.0

package/dist/esm/InputParts/index.mjs

@@ -1,9 +1,8 @@
 import { getFontSized } from "@tamagui/get-font-sized";
-import { getSpace } from "@tamagui/get-token";
 import { useEffect, useState } from "react";
 import { Pressable as RNPressable } from "react-native-web";
-import { Button as TButton, Input as TInput, Label, Text, View, XGroup, createStyledContext, getFontSize, getVariable, isWeb, styled, useGetThemedIcon, useTheme } from "tamagui";
-import { ensureFocusVisibleRing, useResolvedKnobs, warnOutlineNone, warnPositiveTabIndex } from "@multiplatform.one/theme";
+import { Button as TButton, Input as TInput, Label, Text, View, XGroup, createStyledContext, getVariable, isWeb, styled, useGetThemedIcon, useTheme } from "tamagui";
+import { ensureCompositeFocusRing, ensureFocusVisibleRing, isTouchSurface, recipeFamilies, sizeRecipeBoxVariants, sizeRecipeForToken, sizeRecipeIconVariants, sizeRecipeTypeVariants, useResolvedKnobs, warnOutlineNone, warnPositiveTabIndex, warnSizeRecipeEscape } from "@multiplatform.one/theme";
 import { formButtonColors, formCommonColors, formInputColors } from "../shared/colorRamps.mjs";
 import { useControlGrouped } from "../shared/groupContext.mjs";
 import { useIsInTableCell } from "../shared/tableCellContext.mjs";
@@ -24,10 +23,60 @@ function useNativeFieldA11yProps() {
 }
 const defaultContextValues = {
   size: "$true",
-  scaleIcon: 1.2,
+  scaleIcon: 1,
   color: void 0
 };
 const InputContext = createStyledContext(defaultContextValues);
+function endCapVariantsFromHeights(heightVariants) {
+  return Object.fromEntries(Object.entries(heightVariants).map(([token, {
+    height
+  }]) => [token, {
+    height,
+    width: height,
+    paddingHorizontal: 0
+  }]));
+}
+const sizeRecipeEndCapVariants = endCapVariantsFromHeights(recipeFamilies.control.heightVariants);
+function sizeRecipeBoxFallback(val) {
+  const recipe = sizeRecipeForToken(String(val ?? "$true"), {
+    touch: isTouchSurface()
+  });
+  return {
+    height: recipe.height,
+    paddingHorizontal: recipe.paddingHorizontal,
+    gap: recipe.gap
+  };
+}
+function sizeRecipeTypeFallback(val) {
+  return {
+    fontSize: sizeRecipeForToken(String(val ?? "$true"), {
+      touch: isTouchSurface()
+    }).fontSize
+  };
+}
+function sizeRecipeIconFallback(val) {
+  const {
+    iconSize
+  } = sizeRecipeForToken(String(val ?? "$true"), {
+    touch: isTouchSurface()
+  });
+  return {
+    width: iconSize,
+    height: iconSize
+  };
+}
+function sizeRecipeEndCapFallback(val) {
+  const {
+    height
+  } = sizeRecipeForToken(String(val ?? "$true"), {
+    touch: isTouchSurface()
+  });
+  return {
+    height,
+    width: height,
+    paddingHorizontal: 0
+  };
+}
 const FocusContext = createStyledContext({
   setFocused: _val => {},
   focused: false
@@ -76,8 +125,80 @@ const inputOutlineRest = {
 const inputOutlineFocus = {
   outlineColor: "$outlineColor",
   outlineWidth: 2,
-  outlineStyle: "solid"
+  outlineStyle: "solid",
+  // Inset: Input.Box clips children with overflow:hidden; an outer +2px
+  // ring is severed (LC-71 clipping carve-out).
+  outlineOffset: -2
+};
+const AREA_NO_OUTLINE = {
+  outlineWidth: 0,
+  outlineStyle: "none",
+  outlineColor: "transparent"
 };
+function boxRingMode(overflow, paintsRing) {
+  if (!paintsRing) return void 0;
+  return overflow === "hidden" ? "inset" : "outset";
+}
+function boxRingOffset(mode) {
+  return mode === "outset" ? 2 : -2;
+}
+const inputPartsRingCss = `/* LC-71: ring on Box (adornments inside); Area never outlines.
+   Inset iff the Box clips (overflow:hidden). Do not :has(:focus-visible) on
+   every descendant \u2014 SearchInput clear \u2715 is a second focusable. */
+[data-mp-input-box][data-mp-ring="inset"]:has(input:focus),
+[data-mp-input-box][data-mp-ring="inset"]:has(textarea:focus),
+[data-mp-input-box][data-mp-ring="inset"]:has([data-mp-input-area]:focus),
+[data-mp-input-box][data-mp-ring="inset"]:focus-visible {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: -2px !important;
+}
+[data-mp-input-box][data-mp-ring="outset"]:has(input:focus),
+[data-mp-input-box][data-mp-ring="outset"]:has(textarea:focus),
+[data-mp-input-box][data-mp-ring="outset"]:has([data-mp-input-area]:focus),
+[data-mp-input-box][data-mp-ring="outset"]:focus-visible {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: 2px !important;
+}
+[data-mp-input-area],
+[data-mp-input-area]:focus,
+[data-mp-input-area]:focus-visible,
+[data-mp-input-box] input,
+[data-mp-input-box] textarea,
+[data-mp-input-box] [contenteditable] {
+  outline: none !important;
+  box-shadow: none !important;
+}`;
+const INPUT_PARTS_RING_STYLE_ID = "mp-input-parts-ring-anatomy";
+function ensureInputPartsFocusRing() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(INPUT_PARTS_RING_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = INPUT_PARTS_RING_STYLE_ID;
+  tag.textContent = inputPartsRingCss;
+  document.head.appendChild(tag);
+}
+function webBoxRingAttrs(overflow, paintsRing, extraClass) {
+  if (!isWeb) return void 0;
+  const mode = boxRingMode(overflow, paintsRing);
+  const className = [paintsRing ? "mp-composite-ring" : void 0, extraClass].filter(Boolean).join(" ");
+  return {
+    ...(className ? {
+      className
+    } : void 0),
+    "data-mp-input-box": "true",
+    ...(mode ? {
+      "data-mp-ring": mode
+    } : void 0)
+  };
+}
+function webAreaAttrs(extraClass) {
+  if (!isWeb) return void 0;
+  const className = ["mp-input-area", extraClass].filter(Boolean).join(" ");
+  return {
+    className,
+    "data-mp-input-area": "true"
+  };
+}
 const defaultInputGroupStyles = {
   size: "$true",
   fontFamily: "$body",
@@ -95,9 +216,11 @@ const defaultInputGroupStyles = {
   hoverStyle: {
     borderColor: formInputColors.border.hover
   },
+  // LC-71: any-focus only shifts the border. The ring lives on
+  // `focusVisibleStyle` and on `[data-mp-ring]:has(input:focus)` so
+  // button-like Boxes (Select, pagination) do not ring on mouse click.
   focusStyle: {
-    borderColor: formInputColors.border.focus,
-    ...inputOutlineFocus
+    borderColor: formInputColors.border.focus
   },
   focusVisibleStyle: {
     borderColor: formInputColors.border.focus,
@@ -109,6 +232,11 @@ const InputGroupFrame = styled(XGroup, {
   alignItems: "center",
   context: InputContext,
   overflow: "hidden",
+  // LC-71: className on XGroup is best-effort (often dropped). The styleable
+  // spread stamps data-mp-input-box / data-mp-ring; CSS keys off those.
+  ...(isWeb ? {
+    className: "mp-composite-ring"
+  } : {}),
   variants: {
     unstyled: {
       false: defaultInputGroupStyles
@@ -117,14 +245,8 @@ const InputGroupFrame = styled(XGroup, {
       ":number": {}
     },
     size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        return {
-          height: val,
-          borderRadius: tokens.radius[val]
-        };
-      }
+      ...(recipeFamilies.control.boxVariants ?? sizeRecipeBoxVariants),
+      "...size": sizeRecipeBoxFallback
     }
   },
   defaultVariants: {
@@ -201,6 +323,11 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
     children,
     onPress,
     disabled,
+    suppressFocusRing,
+    recipeFamily = "control",
+    sizeRecipeEscape,
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
     ...props
   } = groupProps;
   const [focused, setFocused] = useState(false);
@@ -217,6 +344,14 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   } : {
     disabled
   };
+  const paintsRing = !grouped && !inTableCell;
+  const boxOverflow = paintsRing ? "hidden" : "visible";
+  const ringMode = boxRingMode(boxOverflow, paintsRing);
+  if (isWeb) {
+    ensureCompositeFocusRing();
+    ensureInputPartsFocusRing();
+  }
+  const boxRingAttrs = webBoxRingAttrs(boxOverflow, paintsRing, props.className);
   warnPositiveTabIndex({
     value: props.tabIndex,
     component: "Input.Box"
@@ -224,6 +359,40 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   warnOutlineNone(props.focusVisibleStyle, {
     component: "Input.Box"
   });
+  warnSizeRecipeEscape({
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
+    sizeRecipeEscape,
+    component: "Input.Box",
+    id: typeof props.id === "string" ? props.id : void 0
+  });
+  const sizeToken = String(props.size ?? knobProps.sizeToken);
+  const familyRecipe = sizeRecipeForToken(sizeToken, {
+    touch: isTouchSurface(),
+    family: recipeFamily
+  });
+  const controlFragment = recipeFamily === "control" ? knobProps.control : {
+    height: familyRecipe.height,
+    paddingHorizontal: familyRecipe.paddingHorizontal,
+    gap: familyRecipe.gap
+  };
+  const sizeRecipeEscaped = typeof sizeRecipeEscape === "string" && sizeRecipeEscape.trim().length > 0;
+  const sizeRecipeEscapeOverride = sizeRecipeEscaped ? {
+    ...(typeof heightProp === "number" ? {
+      height: heightProp
+    } : void 0),
+    ...(typeof paddingHorizontalProp === "number" ? {
+      paddingHorizontal: paddingHorizontalProp
+    } : void 0)
+  } : void 0;
+  const passthroughSizeProps = {
+    ...(typeof heightProp !== "number" && heightProp != null ? {
+      height: heightProp
+    } : void 0),
+    ...(typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? {
+      paddingHorizontal: paddingHorizontalProp
+    } : void 0)
+  };
   if (inTableCell) {
     return /* @__PURE__ */jsx(FocusContext.Provider, {
       focused,
@@ -240,8 +409,11 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         minWidth: 0,
         elevation: void 0,
         ...props,
+        ...passthroughSizeProps,
+        ...sizeRecipeEscapeOverride,
         ...framePressProps,
-        overflow: "visible",
+        ...boxRingAttrs,
+        overflow: boxOverflow,
         children
       }))
     });
@@ -255,11 +427,24 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       flex: 1,
       elevation: void 0,
       ...props,
+      ...passthroughSizeProps,
+      ...sizeRecipeEscapeOverride,
       ...framePressProps,
-      overflow: "visible",
+      ...boxRingAttrs,
+      overflow: boxOverflow,
       children
     }));
   }
+  const suppressedRingProps = suppressFocusRing ? {
+    focusStyle: {
+      borderColor: formInputColors.border.focus,
+      ...inputOutlineRest
+    },
+    focusVisibleStyle: {
+      borderColor: formInputColors.border.focus,
+      ...inputOutlineRest
+    }
+  } : void 0;
   return /* @__PURE__ */jsx(FocusContext.Provider, {
     focused,
     setFocused,
@@ -267,6 +452,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       ref: forwardedRef,
       ...knobProps.body,
       size: knobProps.sizeToken,
+      ...controlFragment,
       backgroundColor: knobProps.outlined ? "transparent" : formInputColors.background.base,
       ...getBoxElevationProps(knobProps.elevation),
       ...knobProps.borderRadius,
@@ -280,24 +466,31 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       },
       focusStyle: {
         borderColor: formInputColors.border.focus,
-        ...inputOutlineFocus,
         ...control.focusKnobProps
       },
       focusVisibleStyle: ensureFocusVisibleRing({
         borderColor: formInputColors.border.focus,
         ...inputOutlineFocus,
-        ...control.focusVisibleKnobProps
+        ...control.focusVisibleKnobProps,
+        outlineOffset: boxRingOffset(ringMode)
       }),
       ...props,
+      ...passthroughSizeProps,
+      ...sizeRecipeEscapeOverride,
       ...framePressProps,
-      ...(focused ? {
-        // Focus is forwarded from the inner input, so the ring is applied
-        // as inline props rather than focusStyle.
+      ...boxRingAttrs,
+      ...(focused && !suppressFocusRing ? {
+        // Text-entry carve-out (LC-71): inner Area focus means typing
+        // is next, so the Box rings on any focus — including click.
+        // CSS `[data-mp-ring]` is the sync path; this is the token-
+        // resolved backup (and the native path). Button-like Boxes
+        // (Select) do not set `focused` (no Area onFocus).
         borderColor: formInputColors.border.focus,
         ...ensureFocusVisibleRing({
           ...inputOutlineFocus,
           ...control.focusKnobProps,
-          ...control.focusVisibleKnobProps
+          ...control.focusVisibleKnobProps,
+          outlineOffset: boxRingOffset(ringMode)
         })
       } : {
         // Explicit rest — avoid leaving theme `$outlineColor` (near-white in
@@ -305,42 +498,53 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         // Keep outline-transparent rest (border-flicker fix); do not warn.
         ...inputOutlineRest
       }),
+      ...suppressedRingProps,
       ...(disabled ? {
         ...disabledState.surfaceKnobProps,
         hoverStyle: {
           ...disabledState.surfaceKnobProps
         }
       } : void 0),
-      overflow: "hidden",
+      overflow: boxOverflow,
       children
     }))
   });
 });
-const inputSizeVariant = (val = "$true", extras) => {
-  const size = val || "$true";
-  const paddingHorizontal = getSpace(size, {
-    shift: -1,
-    bounds: [2]
+const inputSizeVariant = (val = "$true") => {
+  const recipe = sizeRecipeForToken(String(val || "$true"), {
+    touch: isTouchSurface()
   });
-  const fontStyle = getFontSized(size, extras);
-  const {
-    lineHeight: _lh,
-    ...safeFontStyle
-  } = !isWeb && fontStyle ? fontStyle : {
-    lineHeight: void 0,
-    ...fontStyle
-  };
   return {
-    ...safeFontStyle,
-    paddingHorizontal
+    fontSize: recipe.fontSize,
+    paddingHorizontal: recipe.paddingHorizontal
   };
 };
 const InputFrame = styled(TInput, {
   unstyled: true,
   context: InputContext,
+  // LC-71: the Area never paints a ring. Chrome's UA :focus-visible outline
+  // on <input> is the "ring cuts the control in half" defect (magnifier sits
+  // outside). Kill it at rest and on focus; the Box owns the ring.
+  outlineWidth: 0,
+  outlineStyle: "none",
+  outlineColor: "transparent",
+  ...(isWeb ? {
+    className: "mp-input-area"
+  } : {}),
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent"
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent"
+  },
   variants: {
     size: {
-      "...size": inputSizeVariant
+      ...(recipeFamilies.control.typeVariants ?? sizeRecipeTypeVariants),
+      "...size": sizeRecipeTypeFallback
     },
     scaleIcon: {
       ":number": {}
@@ -362,6 +566,9 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
     onChange: onChangeProp,
     onFocus: onFocusProp,
     onBlur: onBlurProp,
+    focusStyle: focusStyleProp,
+    focusVisibleStyle: focusVisibleStyleProp,
+    className: classNameProp,
     ...props
   } = areaProps;
   const {
@@ -371,6 +578,7 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
   const fieldDescribedBy = useFieldDescribedBy();
   const nativeA11yProps = useNativeFieldA11yProps();
   const inTableCell = useIsInTableCell();
+  if (isWeb) ensureInputPartsFocusRing();
   return (
     // LC-06/LC-10 (UX-P12): in a table cell the flex wrapper and the raw
     // input must be allowed to shrink below the <input>'s intrinsic width
@@ -388,6 +596,7 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
         ...nativeA11yProps,
         ref,
         size,
+        ...knobProps.controlType,
         color: knobProps.textAccentColor,
         placeholderTextColor: theme.placeholderColor?.val ?? "$placeholderColor",
         ...(inTableCell ? {
@@ -399,6 +608,16 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
         inputMode: keyboardType === "numeric" ? "numeric" : keyboardType === "email-address" ? "email" : void 0,
         autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : void 0,
         ...props,
+        ...webAreaAttrs(classNameProp),
+        ...AREA_NO_OUTLINE,
+        focusStyle: {
+          ...focusStyleProp,
+          ...AREA_NO_OUTLINE
+        },
+        focusVisibleStyle: {
+          ...focusVisibleStyleProp,
+          ...AREA_NO_OUTLINE
+        },
         onFocus: e => {
           setFocused(true);
           onFocusProp?.(e);
@@ -444,13 +663,8 @@ const InputButton = styled(TButton, {
       ":number": {}
     },
     size: {
-      "...size": (val = "$true") => {
-        return {
-          paddingHorizontal: 0,
-          height: val,
-          width: val
-        };
-      }
+      ...sizeRecipeEndCapVariants,
+      "...size": sizeRecipeEndCapFallback
     }
   }
 });
@@ -458,9 +672,16 @@ const InputButtonImpl = InputButton.styleable((props, ref) => {
   const {
     size
   } = InputContext.useStyledContext();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const square = knobProps.control.height;
   return /* @__PURE__ */jsx(InputButton, {
     ref,
     size,
+    height: square,
+    width: square,
+    paddingHorizontal: 0,
     tabIndex: -1,
     ...props
   });
@@ -475,8 +696,8 @@ const InputIconFrame = styled(View, {
       ":number": {}
     },
     size: {
-      // Don't apply padding here - let adornment variant handle it for proper leading/trailing spacing
-      "...size": () => ({})
+      ...(recipeFamilies.control.iconVariants ?? sizeRecipeIconVariants),
+      "...size": sizeRecipeIconFallback
     },
     adornment: {
       leading: {},
@@ -484,15 +705,11 @@ const InputIconFrame = styled(View, {
     }
   }
 });
-const getIconSize = (size, scale) => {
-  return (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scale;
-};
 const InputIcon = InputIconFrame.styleable((iconProps, ref) => {
   const {
     children,
     color: colorProp,
     scaleIcon: scaleIconProp,
-    adornment,
     ...props
   } = iconProps;
   const {
@@ -500,31 +717,24 @@ const InputIcon = InputIconFrame.styleable((iconProps, ref) => {
     color: contextColor,
     scaleIcon = 1
   } = InputContext.useStyledContext();
+  const {
+    knobProps
+  } = useResolvedKnobs();
   const resolvedScaleIcon = scaleIconProp ?? scaleIcon;
   const theme = useTheme();
   const rawColor = colorProp ?? contextColor;
   const color = getVariable(rawColor ? theme[rawColor]?.get("web") ?? rawColor : theme.borderColor?.get("web"));
-  const iconSize = getIconSize(size, resolvedScaleIcon);
-  const padding = getSpace(size, {
-    shift: 0,
-    bounds: [2]
-  });
-  const paddingProps = adornment === "leading" ? {
-    paddingInlineStart: padding,
-    paddingInlineEnd: 0
-  } : adornment === "trailing" ? {
-    paddingInlineEnd: padding,
-    paddingInlineStart: 0
-  } : {
-    paddingHorizontal: padding
-  };
+  const iconSize = knobProps.controlIcon.width * resolvedScaleIcon;
   const getThemedIcon = useGetThemedIcon({
     size: iconSize,
     color
   });
   return /* @__PURE__ */jsx(InputIconFrame, {
     ref,
-    ...paddingProps,
+    size,
+    ...knobProps.controlIcon,
+    width: iconSize,
+    height: iconSize,
     ...props,
     children: getThemedIcon(children)
   });
@@ -658,14 +868,7 @@ const InputXGroup = styled(XGroup, {
       ":number": {}
     },
     size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        const radiusToken = tokens.radius[val] ?? tokens.radius.$true;
-        return {
-          borderRadius: radiusToken
-        };
-      }
+      "...size": () => ({})
     }
   }
 });
@@ -677,17 +880,39 @@ function FocusWiredTextArea(props) {
     innerRef,
     onFocus,
     onBlur,
+    className,
+    focusStyle,
+    focusVisibleStyle,
+    "aria-describedby": describedByProp,
     ...rest
   } = props;
   const fieldDescribedBy = useFieldDescribedBy();
   const nativeA11yProps = useNativeFieldA11yProps();
+  const describedBy = [fieldDescribedBy, describedByProp].filter(Boolean).join(" ") || void 0;
+  if (isWeb) ensureInputPartsFocusRing();
+  const killInnerRing = {
+    ...webAreaAttrs(className),
+    ...AREA_NO_OUTLINE,
+    focusStyle: {
+      ...focusStyle,
+      ...AREA_NO_OUTLINE
+    },
+    focusVisibleStyle: {
+      ...focusVisibleStyle,
+      ...AREA_NO_OUTLINE
+    }
+  };
   return /* @__PURE__ */jsx(View, {
     flex: 1,
+    minWidth: 0,
     children: /* @__PURE__ */jsx(ThemedTextArea, {
-      "aria-describedby": fieldDescribedBy,
+      "aria-describedby": describedBy,
+      "aria-multiline": "true",
       ...nativeA11yProps,
       ref: innerRef,
       width: "100%",
+      ...rest,
+      ...killInnerRing,
       onFocus: e => {
         setFocused(true);
         onFocus?.(e);
@@ -695,8 +920,7 @@ function FocusWiredTextArea(props) {
       onBlur: e => {
         setFocused(false);
         onBlur?.(e);
-      },
-      ...rest
+      }
     })
   });
 }
@@ -715,5 +939,5 @@ const InputCompound = Object.assign(InputContainerImpl, {
   })
 });
 const Input = InputCompound;
-export { FocusContext, FocusWiredTextArea, Input, InputContainerFrame, InputContext, InputFieldMeta, InputIconFrame, InputInfo, InputLabel, defaultInputGroupStyles, getInputFrameTransitionProps, inputSizeVariant, useForwardFocus };
+export { FocusContext, FocusWiredTextArea, Input, InputContainerFrame, InputContext, InputFieldMeta, InputIconFrame, InputInfo, InputLabel, boxRingMode, boxRingOffset, defaultInputGroupStyles, ensureInputPartsFocusRing, getInputFrameTransitionProps, inputPartsRingCss, inputSizeVariant, useForwardFocus };
 //# sourceMappingURL=index.mjs.map