@multiplatform.one/forms 7.34.4 → 7.36.0

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

@@ -39,7 +39,6 @@ __export(InputParts_exports, {
   boxRingOffset: () => boxRingOffset,
   defaultInputGroupStyles: () => defaultInputGroupStyles,
   ensureInputPartsFocusRing: () => ensureInputPartsFocusRing,
-  getInputFrameTransitionProps: () => getInputFrameTransitionProps,
   inputPartsRingCss: () => inputPartsRingCss,
   inputSizeVariant: () => inputSizeVariant,
   mapInputModeToKeyboardType: () => mapInputModeToKeyboardType,
@@ -48,11 +47,12 @@ __export(InputParts_exports, {
 });
 module.exports = __toCommonJS(InputParts_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
 var import_get_font_sized = require("@tamagui/get-font-sized");
 var import_react = require("react");
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
-var import_theme = require("@multiplatform.one/theme");
+var import_theme2 = require("@multiplatform.one/theme");
 var import_colorRamps = require("../shared/colorRamps.native.js");
 var import_groupContext = require("../shared/groupContext.native.js");
 var import_tableCellContext = require("../shared/tableCellContext.native.js");
@@ -76,7 +76,7 @@ function useNativeFieldA11yProps() {
 var defaultContextValues = {
   size: "$true",
   scaleIcon: 1,
-  touch: !import_tamagui.isWeb && (0, import_theme.isTouchSurface)(),
+  touch: !import_tamagui.isWeb && (0, import_theme2.isTouchSurface)(),
   color: void 0
 };
 var InputContext = (0, import_tamagui.createStyledContext)(defaultContextValues);
@@ -92,11 +92,11 @@ function endCapVariantsFromHeights(heightVariants) {
     }];
   }));
 }
-var sizeRecipeEndCapVariants = endCapVariantsFromHeights(import_theme.recipeFamilies.control.heightVariants);
+var sizeRecipeEndCapVariants = endCapVariantsFromHeights(import_theme2.recipeFamilies.control.heightVariants);
 function sizeRecipeBoxFallback(val, extras) {
   var _extras_props_touch;
-  var recipe = (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
-    touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
+  var recipe = (0, import_theme2.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
+    touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme2.isTouchSurface)()
   });
   return {
     height: recipe.height,
@@ -107,8 +107,8 @@ function sizeRecipeBoxFallback(val, extras) {
 function sizeRecipeTypeFallback(val, extras) {
   var _extras_props_touch;
   return {
-    fontSize: (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
-      touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
+    fontSize: (0, import_theme2.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
+      touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme2.isTouchSurface)()
     }).fontSize
   };
 }
@@ -116,8 +116,8 @@ function sizeRecipeIconFallback(val, extras) {
   var _extras_props_touch;
   var {
     iconSize
-  } = (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
-    touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
+  } = (0, import_theme2.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
+    touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme2.isTouchSurface)()
   });
   return {
     width: iconSize,
@@ -128,8 +128,8 @@ function sizeRecipeEndCapFallback(val, extras) {
   var _extras_props_touch;
   var {
     height
-  } = (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
-    touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
+  } = (0, import_theme2.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
+    touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme2.isTouchSurface)()
   });
   return {
     height,
@@ -158,30 +158,6 @@ var useForwardFocus = function useForwardFocus2(target) {
     focusable: true
   };
 };
-var inputFrameCssTimings = {
-  bouncy: "ease-in 200ms",
-  lazy: "ease-in 600ms",
-  slow: "ease-in 500ms",
-  medium: "ease-in-out 250ms",
-  quick: "ease-in 100ms",
-  tooltip: "ease-in 400ms",
-  snappy: "ease-out 80ms",
-  gentle: "ease-in-out 450ms"
-};
-function getInputFrameTransitionProps(transition) {
-  var _inputFrameCssTimings_transition;
-  if (!transition) return void 0;
-  if (!import_tamagui.isWeb) return {
-    transition
-  };
-  var timing = (_inputFrameCssTimings_transition = inputFrameCssTimings[transition]) !== null && _inputFrameCssTimings_transition !== void 0 ? _inputFrameCssTimings_transition : inputFrameCssTimings.quick;
-  return {
-    // Prefer explicit CSS over Tamagui's `transition: all` named prop.
-    style: {
-      transition: [`background-color ${timing}`, `border-color ${timing}`, `color ${timing}`, `opacity ${timing}`, `box-shadow ${timing}`, `transform ${timing}`].join(", ")
-    }
-  };
-}
 var inputOutlineRest = {
   outlineWidth: 0,
   outlineColor: "transparent",
@@ -205,7 +181,7 @@ function boxRingMode(overflow, paintsRing) {
   return overflow === "hidden" ? "inset" : "outset";
 }
 function boxRingOffset(mode) {
-  return mode === "outset" ? import_theme.FOCUS_RING_HALO_OFFSET : import_theme.FOCUS_RING_CLIPPED_OFFSET;
+  return mode === "outset" ? import_theme2.FOCUS_RING_HALO_OFFSET : import_theme2.FOCUS_RING_CLIPPED_OFFSET;
 }
 var inputPartsRingCss = `/* LC-71: ring on Box (adornments inside); Area never outlines.
    Inset iff the Box clips (overflow:hidden). Do not :has(:focus-visible) on
@@ -319,7 +295,7 @@ var InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
       ":number": {}
     },
     size: {
-      ...((_recipeFamilies_control_boxVariants = import_theme.recipeFamilies.control.boxVariants) !== null && _recipeFamilies_control_boxVariants !== void 0 ? _recipeFamilies_control_boxVariants : import_theme.sizeRecipeBoxVariants),
+      ...((_recipeFamilies_control_boxVariants = import_theme2.recipeFamilies.control.boxVariants) !== null && _recipeFamilies_control_boxVariants !== void 0 ? _recipeFamilies_control_boxVariants : import_theme2.sizeRecipeBoxVariants),
       "...size": sizeRecipeBoxFallback
     }
   },
@@ -375,12 +351,12 @@ function (groupProps, forwardedRef) {
     ...props
   } = groupProps;
   var [focused, setFocused2] = (0, import_react.useState)(false);
-  var hydrationTouch = (0, import_theme.useTouchSurface)();
+  var hydrationTouch = (0, import_theme2.useTouchSurface)();
   var {
     knobProps,
     control,
     disabledState
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme2.useResolvedKnobs)();
   var grouped = (0, import_groupContext.useControlGrouped)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var framePressProps = import_tamagui.isWeb ? {
@@ -395,18 +371,18 @@ function (groupProps, forwardedRef) {
   var boxOverflow = paintsRing && !(hasElevation && !import_tamagui.isWeb) && !hasWebPressSlop ? "hidden" : "visible";
   var ringMode = boxRingMode(boxOverflow, paintsRing);
   if (import_tamagui.isWeb) {
-    (0, import_theme.ensureCompositeFocusRing)();
+    (0, import_theme2.ensureCompositeFocusRing)();
     ensureInputPartsFocusRing();
   }
   var boxRingAttrs = webBoxRingAttrs(boxOverflow, paintsRing, props.className);
-  (0, import_theme.warnPositiveTabIndex)({
+  (0, import_theme2.warnPositiveTabIndex)({
     value: props.tabIndex,
     component: "Input.Box"
   });
-  (0, import_theme.warnOutlineNone)(props.focusVisibleStyle, {
+  (0, import_theme2.warnOutlineNone)(props.focusVisibleStyle, {
     component: "Input.Box"
   });
-  (0, import_theme.warnSizeRecipeEscape)({
+  (0, import_theme2.warnSizeRecipeEscape)({
     height: heightProp,
     paddingHorizontal: paddingHorizontalProp,
     sizeRecipeEscape,
@@ -414,7 +390,7 @@ function (groupProps, forwardedRef) {
     id: typeof props.id === "string" ? props.id : void 0
   });
   var sizeToken = String((_props_size = props.size) !== null && _props_size !== void 0 ? _props_size : knobProps.sizeToken);
-  var familyRecipe = (0, import_theme.sizeRecipeForToken)(sizeToken, {
+  var familyRecipe = (0, import_theme2.sizeRecipeForToken)(sizeToken, {
     touch: hydrationTouch,
     family: recipeFamily
   });
@@ -424,9 +400,9 @@ function (groupProps, forwardedRef) {
     gap: familyRecipe.gap
   };
   var radiusToken = knobProps.borderRadius.borderRadius;
-  var radiusStop = typeof radiusToken === "string" ? import_theme.SIZE_RECIPE_RADIUS_TOKEN_TO_STOP[radiusToken] : void 0;
+  var radiusStop = typeof radiusToken === "string" ? import_theme2.SIZE_RECIPE_RADIUS_TOKEN_TO_STOP[radiusToken] : void 0;
   var sizeTableRadius = radiusStop === "medium" || radiusStop == null ? {
-    borderRadius: (0, import_theme.resolveControlRadius)((0, import_theme.sizeRecipeForToken)(sizeToken, {
+    borderRadius: (0, import_theme2.resolveControlRadius)((0, import_theme2.sizeRecipeForToken)(sizeToken, {
       family: recipeFamily
     }), "medium").radius
   } : void 0;
@@ -447,7 +423,7 @@ function (groupProps, forwardedRef) {
       paddingHorizontal: paddingHorizontalProp
     } : void 0)
   };
-  var fieldInset = heightProp === "auto" ? 0 : (0, import_theme.textFieldInset)(familyRecipe);
+  var fieldInset = heightProp === "auto" ? 0 : (0, import_theme2.textFieldInset)(familyRecipe);
   var insetPadProps = sizeRecipeEscaped || typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? void 0 : {
     paddingHorizontal: fieldInset
   };
@@ -531,7 +507,7 @@ function (groupProps, forwardedRef) {
       } : knobProps.elevationChrome),
       ...knobProps.borderRadius,
       ...sizeTableRadius,
-      ...getInputFrameTransitionProps(typeof knobProps.transition === "string" ? knobProps.transition : void 0),
+      ...(0, import_theme.transitionProps)(knobProps.motion.control),
       hoverStyle: {
         borderColor: import_colorRamps.formInputColors.border.hover,
         ...control.hoverKnobProps
@@ -543,7 +519,7 @@ function (groupProps, forwardedRef) {
         borderColor: import_colorRamps.formInputColors.border.focus,
         ...control.focusKnobProps
       },
-      focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      focusVisibleStyle: (0, import_theme2.ensureFocusVisibleRing)({
         borderColor: import_colorRamps.formInputColors.border.focus,
         ...inputOutlineFocus,
         ...control.focusVisibleKnobProps,
@@ -562,7 +538,7 @@ function (groupProps, forwardedRef) {
         // resolved backup (and the native path). Button-like Boxes
         // (Select) do not set `focused` (no Area onFocus).
         borderColor: import_colorRamps.formInputColors.border.focus,
-        ...(0, import_theme.ensureFocusVisibleRing)({
+        ...(0, import_theme2.ensureFocusVisibleRing)({
           ...inputOutlineFocus,
           ...control.focusKnobProps,
           ...control.focusVisibleKnobProps,
@@ -615,8 +591,8 @@ var inputSizeVariant = function inputSizeVariant2() {
   var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true",
     extras = arguments.length > 1 ? arguments[1] : void 0;
   var _ref;
-  var recipe = (0, import_theme.sizeRecipeForToken)(String(val || "$true"), {
-    touch: (_ref = extras === null || extras === void 0 ? void 0 : extras.props.touch) !== null && _ref !== void 0 ? _ref : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
+  var recipe = (0, import_theme2.sizeRecipeForToken)(String(val || "$true"), {
+    touch: (_ref = extras === null || extras === void 0 ? void 0 : extras.props.touch) !== null && _ref !== void 0 ? _ref : !import_tamagui.isWeb && (0, import_theme2.isTouchSurface)()
   });
   return {
     fontSize: recipe.fontSize,
@@ -656,7 +632,7 @@ var InputFrame = (0, import_tamagui.styled)(import_tamagui.Input, {
       false: {}
     },
     size: {
-      ...((_recipeFamilies_control_typeVariants = import_theme.recipeFamilies.control.typeVariants) !== null && _recipeFamilies_control_typeVariants !== void 0 ? _recipeFamilies_control_typeVariants : import_theme.sizeRecipeTypeVariants),
+      ...((_recipeFamilies_control_typeVariants = import_theme2.recipeFamilies.control.typeVariants) !== null && _recipeFamilies_control_typeVariants !== void 0 ? _recipeFamilies_control_typeVariants : import_theme2.sizeRecipeTypeVariants),
       "...size": sizeRecipeTypeFallback
     },
     scaleIcon: {
@@ -665,15 +641,16 @@ var InputFrame = (0, import_tamagui.styled)(import_tamagui.Input, {
   }
 });
 var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
-  var _ref;
+  var _areaProps_size, _ref;
   var _theme_placeholderColor;
   var {
     setFocused: setFocused2
   } = FocusContext.useStyledContext();
-  var hydrationTouch = (0, import_theme.useTouchSurface)();
+  var hydrationTouch = (0, import_theme2.useTouchSurface)();
   var {
-    size
+    size: contextSize
   } = InputContext.useStyledContext();
+  var size = (_areaProps_size = areaProps.size) !== null && _areaProps_size !== void 0 ? _areaProps_size : contextSize;
   var {
     secureTextEntry,
     keyboardType,
@@ -697,7 +674,9 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
   } = areaProps;
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme2.useResolvedKnobs)({
+    size
+  });
   var theme = (0, import_tamagui.useTheme)();
   var fieldDescribedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var nativeA11yProps = useNativeFieldA11yProps();
@@ -889,13 +868,15 @@ var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
     size: contextSize,
     color: contextColor
   } = InputContext.useStyledContext();
-  var hydrationTouch = (0, import_theme.useTouchSurface)();
+  var hydrationTouch = (0, import_theme2.useTouchSurface)();
+  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : contextSize;
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme2.useResolvedKnobs)({
+    size
+  });
   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 paint = (0, import_theme2.resolveGlyphPaint)(theme, colorProp !== null && colorProp !== void 0 ? colorProp : contextColor);
   var getThemedIcon = (0, import_tamagui.useGetThemedIcon)({
     size: knobProps.controlIcon.width,
     color: paint
@@ -914,11 +895,11 @@ var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
     if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
   }, [ref, tabIndexProp]);
   if (glyphRing) {
-    var square = (0, import_theme.sizeRecipeForToken)(String(size !== null && size !== void 0 ? size : "$true"), {
+    var square = (0, import_theme2.sizeRecipeForToken)(String(size !== null && size !== void 0 ? size : "$true"), {
       touch: hydrationTouch
     }).height;
     var disabled = props.disabled === true;
-    if (import_tamagui.isWeb) (0, import_theme.ensureCompositeFocusRing)();
+    if (import_tamagui.isWeb) (0, import_theme2.ensureCompositeFocusRing)();
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGlyphButton, {
       touch: hydrationTouch,
       ref,
@@ -976,7 +957,7 @@ var InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
       ":number": {}
     },
     size: {
-      ...((_recipeFamilies_control_iconVariants = import_theme.recipeFamilies.control.iconVariants) !== null && _recipeFamilies_control_iconVariants !== void 0 ? _recipeFamilies_control_iconVariants : import_theme.sizeRecipeIconVariants),
+      ...((_recipeFamilies_control_iconVariants = import_theme2.recipeFamilies.control.iconVariants) !== null && _recipeFamilies_control_iconVariants !== void 0 ? _recipeFamilies_control_iconVariants : import_theme2.sizeRecipeIconVariants),
       "...size": sizeRecipeIconFallback
     },
     adornment: {
@@ -992,7 +973,7 @@ var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
     scaleIcon: scaleIconProp,
     ...props
   } = iconProps;
-  var hydrationTouch = (0, import_theme.useTouchSurface)();
+  var hydrationTouch = (0, import_theme2.useTouchSurface)();
   var {
     size = "$true",
     color: contextColor,
@@ -1000,11 +981,11 @@ var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
   } = InputContext.useStyledContext();
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme2.useResolvedKnobs)();
   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)((0, import_theme.resolveGlyphPaint)(theme, rawColor ? String(rawColor) : "borderColor"));
+  var color = (0, import_tamagui.getVariable)((0, import_theme2.resolveGlyphPaint)(theme, rawColor ? String(rawColor) : "borderColor"));
   var iconSize = knobProps.controlIcon.width * resolvedScaleIcon;
   var getThemedIcon = (0, import_tamagui.useGetThemedIcon)({
     size: iconSize,
@@ -1053,17 +1034,17 @@ var InputContainerFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   }
 });
 var InputContainerImpl = InputContainerFrame.styleable(function (props, forwardedRef) {
-  var hydrationTouch = (0, import_theme.useTouchSurface)();
+  var hydrationTouch = (0, import_theme2.useTouchSurface)();
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme2.useResolvedKnobs)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputContainerFrame, {
     touch: hydrationTouch,
     ref: forwardedRef,
     size: knobProps.sizeToken,
     ...knobProps.body,
-    ...knobProps.gap,
+    ...knobProps.gapSm,
     // LC-06/LC-10 (UX-P12): inside a table cell the field root must adopt
     // the cell width — the raw web <input> carries an intrinsic width that
     // otherwise floors the whole column at ~200px and lays out past the
@@ -1093,7 +1074,7 @@ var InputLabelFrame = (0, import_tamagui.styled)(import_tamagui.Label, {
 var InputLabel = InputLabelFrame.styleable(function (props, ref) {
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme2.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputLabelFrame, {
     ref,
     ...knobProps.body,
@@ -1140,7 +1121,7 @@ var InputInfoFrame = (0, import_tamagui.styled)(import_tamagui.Text, {
 var InputInfo = InputInfoFrame.styleable(function (props, ref) {
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme2.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputInfoFrame, {
     ref,
     ...knobProps.body,