@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/cjs/InputParts/index.native.js

@@ -26,6 +26,7 @@ var InputParts_exports = {};
 __export(InputParts_exports, {
   FocusContext: () => FocusContext,
   FocusWiredTextArea: () => FocusWiredTextArea,
+  INPUT_MODE_TO_KEYBOARD: () => INPUT_MODE_TO_KEYBOARD,
   Input: () => Input,
   InputContainerFrame: () => InputContainerFrame,
   InputContext: () => InputContext,
@@ -33,6 +34,7 @@ __export(InputParts_exports, {
   InputIconFrame: () => InputIconFrame,
   InputInfo: () => InputInfo,
   InputLabel: () => InputLabel,
+  KEYBOARD_TO_INPUT_MODE: () => KEYBOARD_TO_INPUT_MODE,
   boxRingMode: () => boxRingMode,
   boxRingOffset: () => boxRingOffset,
   defaultInputGroupStyles: () => defaultInputGroupStyles,
@@ -40,6 +42,8 @@ __export(InputParts_exports, {
   getInputFrameTransitionProps: () => getInputFrameTransitionProps,
   inputPartsRingCss: () => inputPartsRingCss,
   inputSizeVariant: () => inputSizeVariant,
+  mapInputModeToKeyboardType: () => mapInputModeToKeyboardType,
+  mapKeyboardTypeToInputMode: () => mapKeyboardTypeToInputMode,
   useForwardFocus: () => useForwardFocus
 });
 module.exports = __toCommonJS(InputParts_exports);
@@ -223,6 +227,11 @@ var inputPartsRingCss = `/* LC-71: ring on Box (adornments inside); Area never o
 [data-mp-input-box] [contenteditable] {
   outline: none !important;
   box-shadow: none !important;
+}
+/* LC-84: Area is chromeless. Zero UA pad on the single-line input only \u2014
+   textarea keeps ThemedTextArea's equal padX/padY inset. */
+input[data-mp-input-area] {
+  padding: 0 !important;
 }`;
 var INPUT_PARTS_RING_STYLE_ID = "mp-input-parts-ring-anatomy";
 function ensureInputPartsFocusRing() {
@@ -309,55 +318,6 @@ var InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
-var nativeElevationShadow = {
-  $1: {
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.12,
-    // house light angle: blur = 2 x y-offset on every tier (Axiom 14)
-    shadowRadius: 2,
-    elevation: 2
-  },
-  $2: {
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 3
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 6,
-    elevation: 4
-  },
-  $4: {
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 10
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 20,
-    elevation: 8
-  }
-};
-var elevationKeyAlias = {
-  "20": "$1",
-  "28": "$2",
-  "44": "$4"
-};
-function getBoxElevationProps(token) {
-  var _elevationKeyAlias_String;
-  if (token == null) return {
-    elevation: void 0
-  };
-  if (import_tamagui.isWeb) return {
-    elevation: token
-  };
-  var key = (_elevationKeyAlias_String = elevationKeyAlias[String(token)]) !== null && _elevationKeyAlias_String !== void 0 ? _elevationKeyAlias_String : String(token);
-  return nativeElevationShadow[key] || nativeElevationShadow.$2;
-}
 function wrapNativePressable(onPress, disabled, node) {
   if (import_tamagui.isWeb || !onPress) return node;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
@@ -420,7 +380,8 @@ function (groupProps, forwardedRef) {
     disabled
   };
   var paintsRing = !grouped && !inTableCell;
-  var boxOverflow = paintsRing ? "hidden" : "visible";
+  var hasElevation = knobProps.elevation != null;
+  var boxOverflow = paintsRing && !(hasElevation && !import_tamagui.isWeb) ? "hidden" : "visible";
   var ringMode = boxRingMode(boxOverflow, paintsRing);
   if (import_tamagui.isWeb) {
     (0, import_theme.ensureCompositeFocusRing)();
@@ -468,6 +429,10 @@ function (groupProps, forwardedRef) {
       paddingHorizontal: paddingHorizontalProp
     } : void 0)
   };
+  var fieldInset = heightProp === "auto" ? 0 : (0, import_theme.textFieldInset)(familyRecipe);
+  var insetPadProps = sizeRecipeEscaped || typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? void 0 : {
+    paddingHorizontal: fieldInset
+  };
   if (inTableCell) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
       focused,
@@ -493,6 +458,7 @@ function (groupProps, forwardedRef) {
         elevation: void 0,
         ...props,
         ...passthroughSizeProps,
+        ...insetPadProps,
         ...sizeRecipeEscapeOverride,
         ...framePressProps,
         ...boxRingAttrs,
@@ -511,6 +477,7 @@ function (groupProps, forwardedRef) {
       elevation: void 0,
       ...props,
       ...passthroughSizeProps,
+      ...insetPadProps,
       ...sizeRecipeEscapeOverride,
       ...framePressProps,
       ...boxRingAttrs,
@@ -536,8 +503,10 @@ function (groupProps, forwardedRef) {
       ...knobProps.body,
       size: knobProps.sizeToken,
       ...controlFragment,
-      backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.base,
-      ...getBoxElevationProps(knobProps.elevation),
+      backgroundColor: knobProps.inputBackground,
+      ...(knobProps.elevation == null ? {
+        elevation: void 0
+      } : knobProps.elevationChrome),
       ...knobProps.borderRadius,
       ...getInputFrameTransitionProps(typeof knobProps.transition === "string" ? knobProps.transition : void 0),
       hoverStyle: {
@@ -559,6 +528,7 @@ function (groupProps, forwardedRef) {
       }),
       ...props,
       ...passthroughSizeProps,
+      ...insetPadProps,
       ...sizeRecipeEscapeOverride,
       ...framePressProps,
       ...boxRingAttrs,
@@ -597,6 +567,27 @@ function (groupProps, forwardedRef) {
     }))
   });
 });
+var KEYBOARD_TO_INPUT_MODE = {
+  "phone-pad": "tel",
+  "number-pad": "numeric",
+  "decimal-pad": "decimal",
+  "email-address": "email",
+  numeric: "numeric"
+};
+var INPUT_MODE_TO_KEYBOARD = {
+  tel: "phone-pad",
+  numeric: "number-pad",
+  decimal: "decimal-pad",
+  email: "email-address"
+};
+function mapKeyboardTypeToInputMode(keyboardType) {
+  if (!keyboardType) return void 0;
+  return KEYBOARD_TO_INPUT_MODE[keyboardType];
+}
+function mapInputModeToKeyboardType(inputMode) {
+  if (!inputMode) return void 0;
+  return INPUT_MODE_TO_KEYBOARD[inputMode];
+}
 var inputSizeVariant = function inputSizeVariant2() {
   var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true";
   var recipe = (0, import_theme.sizeRecipeForToken)(String(val || "$true"), {
@@ -604,7 +595,8 @@ var inputSizeVariant = function inputSizeVariant2() {
   });
   return {
     fontSize: recipe.fontSize,
-    paddingHorizontal: recipe.paddingHorizontal
+    // LC-84: Area is chromeless — inset lives on Input.Box / ThemedTextArea.
+    paddingHorizontal: 0
   };
 };
 var InputFrame = (0, import_tamagui.styled)(import_tamagui.Input, {
@@ -613,6 +605,10 @@ var InputFrame = (0, import_tamagui.styled)(import_tamagui.Input, {
   // 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.
+  // LC-84: Area is chromeless — pad lives on Box (or ThemedTextArea).
+  padding: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
   outlineWidth: 0,
   outlineStyle: "none",
   outlineColor: "transparent",
@@ -659,6 +655,7 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
     focusStyle: focusStyleProp,
     focusVisibleStyle: focusVisibleStyleProp,
     className: classNameProp,
+    inputMode: inputModeProp,
     ...props
   } = areaProps;
   var {
@@ -669,6 +666,8 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
   var nativeA11yProps = useNativeFieldA11yProps();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   if (import_tamagui.isWeb) ensureInputPartsFocusRing();
+  var resolvedInputMode = inputModeProp !== null && inputModeProp !== void 0 ? inputModeProp : mapKeyboardTypeToInputMode(keyboardType);
+  var resolvedKeyboardType = keyboardType !== null && keyboardType !== void 0 ? keyboardType : mapInputModeToKeyboardType(resolvedInputMode);
   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
@@ -695,8 +694,14 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
         } : void 0),
         ...knobProps.body,
         type: secureTextEntry ? "password" : props.type,
-        inputMode: keyboardType === "numeric" ? "numeric" : keyboardType === "email-address" ? "email" : void 0,
-        autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : void 0,
+        padding: 0,
+        // size-recipe-escape: zero-reset — Input.Box owns the inset (LC-71); the inner field paints no padding
+        paddingHorizontal: 0,
+        paddingVertical: 0,
+        keyboardType: resolvedKeyboardType,
+        textContentType,
+        inputMode: resolvedInputMode,
+        autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : textContentType === "telephoneNumber" ? "tel" : textContentType === "oneTimeCode" ? "one-time-code" : void 0,
         ...props,
         ...webAreaAttrs(classNameProp),
         ...AREA_NO_OUTLINE,
@@ -760,23 +765,102 @@ var InputButton = (0, import_tamagui.styled)(import_tamagui.Button, {
     }
   }
 });
-var InputButtonImpl = InputButton.styleable(function (props, ref) {
+var InputGlyphButton = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "InputGlyphButton",
+  context: InputContext,
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  borderRadius: 0,
+  cursor: "pointer",
+  flexShrink: 0,
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0
+  },
+  variants: {
+    scaleIcon: {
+      ":number": {}
+    },
+    size: {
+      ...sizeRecipeEndCapVariants,
+      "...size": sizeRecipeEndCapFallback
+    }
+  }
+});
+var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
   var {
-    size
+    children,
+    color: colorProp,
+    glyphRing,
+    size: sizeProp,
+    tabIndex: tabIndexProp,
+    className,
+    ...props
+  } = buttonProps;
+  var {
+    size: contextSize,
+    color: contextColor
   } = InputContext.useStyledContext();
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  var square = knobProps.control.height;
+  var theme = (0, import_tamagui.useTheme)();
+  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : contextSize;
+  var paint = (0, import_theme.resolveGlyphPaint)(theme, colorProp !== null && colorProp !== void 0 ? colorProp : contextColor);
+  var getThemedIcon = (0, import_tamagui.useGetThemedIcon)({
+    size: knobProps.controlIcon.width,
+    color: paint
+  });
+  if (glyphRing) {
+    var square = (0, import_theme.sizeRecipeForToken)(String(size !== null && size !== void 0 ? size : "$true"), {
+      touch: (0, import_theme.isTouchSurface)()
+    }).height;
+    var disabled = props.disabled === true;
+    if (import_tamagui.isWeb) (0, import_theme.ensureCompositeFocusRing)();
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGlyphButton, {
+      ref,
+      role: "button",
+      size,
+      height: square,
+      width: square,
+      paddingHorizontal: 0,
+      // size-recipe-escape: square end-cap; pad lives on Input.Box
+      opacity: disabled ? 0.5 : 1,
+      ...props,
+      "aria-disabled": disabled || void 0,
+      tabIndex: tabIndexProp !== null && tabIndexProp !== void 0 ? tabIndexProp : disabled ? -1 : 0,
+      className: import_tamagui.isWeb ? ["mp-chip-dismiss", className].filter(Boolean).join(" ") : className !== null && className !== void 0 ? className : void 0,
+      "data-end-cap": square,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        className: import_tamagui.isWeb ? "mp-chip-dismiss-ring" : void 0,
+        alignItems: "center",
+        justifyContent: "center",
+        children
+      })
+    });
+  }
+  var square1 = knobProps.control.height;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButton, {
     ref,
     size,
-    height: square,
-    width: square,
+    height: square1,
+    width: square1,
     paddingHorizontal: 0,
     // size-recipe-escape: square end-cap; pad lives on Input.Box
+    color: paint,
+    // LC-49: the decorative cap is not a tab stop. tabIndex alone is not
+    // enough — TButton re-derives focusability and stamps tabindex="0".
+    focusable: false,
     tabIndex: -1,
-    ...props
+    className,
+    "data-end-cap": square1,
+    ...props,
+    children: getThemedIcon(children)
   });
 });
 var InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
@@ -799,8 +883,6 @@ var InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   }
 });
 var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
-  var _ref;
-  var _theme_rawColor, _theme_borderColor;
   var {
     children,
     color: colorProp,
@@ -818,7 +900,7 @@ var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
   var resolvedScaleIcon = scaleIconProp !== null && scaleIconProp !== void 0 ? scaleIconProp : scaleIcon;
   var theme = (0, import_tamagui.useTheme)();
   var rawColor = colorProp !== null && colorProp !== void 0 ? colorProp : contextColor;
-  var color = (0, import_tamagui.getVariable)(rawColor ? (_ref = (_theme_rawColor = theme[rawColor]) === null || _theme_rawColor === void 0 ? void 0 : _theme_rawColor.get("web")) !== null && _ref !== void 0 ? _ref : rawColor : (_theme_borderColor = theme.borderColor) === null || _theme_borderColor === void 0 ? void 0 : _theme_borderColor.get("web"));
+  var color = (0, import_tamagui.getVariable)((0, import_theme.resolveGlyphPaint)(theme, rawColor ? String(rawColor) : "borderColor"));
   var iconSize = knobProps.controlIcon.width * resolvedScaleIcon;
   var getThemedIcon = (0, import_tamagui.useGetThemedIcon)({
     size: iconSize,