@multiplatform.one/forms 7.34.4 → 7.35.0

package/dist/cjs/Button/index.cjs

@@ -24,19 +24,19 @@ var Button_exports = {};
 __export(Button_exports, {
   Button: () => Button,
   ButtonFrame: () => ButtonFrame,
-  buttonDensityFamily: () => buttonDensityFamily,
   buttonSizeRecipes: () => buttonSizeRecipes,
   resolveButtonSizeRecipe: () => resolveButtonSizeRecipe
 });
 module.exports = __toCommonJS(Button_exports);
+var import_theme = require("@multiplatform.one/theme");
 var import_pressSlopProps = require("../shared/pressSlopProps.cjs");
 var import_react = require("react");
-var import_theme = require("@multiplatform.one/theme");
+var import_theme2 = require("@multiplatform.one/theme");
 var import_get_token = require("@tamagui/get-token");
 var import_submissionController = require("../Form/submissionController.cjs");
 var import_utils = require("../shared/utils.cjs");
 var import_tamagui = require("tamagui");
-var import_Spinner = require("../Spinner/index.cjs");
+var import_Skeleton = require("../Skeleton/index.cjs");
 var import_react_store = require("@tanstack/react-store");
 var import_stacks = require("@tamagui/stacks");
 var import_actionLabel = require("../actionLabel.cjs");
@@ -44,39 +44,52 @@ var import_colorRamps = require("../shared/colorRamps.cjs");
 var import_devWarn = require("../shared/devWarn.cjs");
 var import_groupContext = require("../shared/groupContext.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const buttonSizeRecipes = import_theme.recipeFamilies.control.recipes;
-function resolveButtonSizeRecipe(size, family = "control") {
+const buttonSizeRecipes = import_theme2.recipeFamilies.control.recipes;
+function resolveButtonSizeRecipe(size, family = "control", touch = false) {
   if (typeof size === "number") {
-    return (0, import_theme.sizeRecipeFromHeight)(size, import_theme.recipeFamilies[family]?.ratios);
+    return (0, import_theme2.sizeRecipeFromHeight)(size, import_theme2.recipeFamilies[family]?.ratios);
   }
-  return (0, import_theme.sizeRecipeForToken)(size == null ? "$true" : String(size), {
-    family
+  return (0, import_theme2.sizeRecipeForToken)(size == null ? "$true" : String(size), {
+    family,
+    touch
   });
 }
-function buttonDensityFamily(family, densityTight) {
-  return densityTight ? "controlCompact" : family;
-}
 function sizeTokenPx(size) {
   if (typeof size === "number") return size;
-  if (size == null) return import_theme.MIN_PRESS_TARGET;
+  if (size == null) return import_theme2.MIN_PRESS_TARGET;
   const resolved = (0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(size));
-  return typeof resolved === "number" && Number.isFinite(resolved) ? resolved : import_theme.MIN_PRESS_TARGET;
+  return typeof resolved === "number" && Number.isFinite(resolved) ? resolved : import_theme2.MIN_PRESS_TARGET;
 }
-function normalizeButtonIcon(icon, iconSize) {
+function normalizeButtonIcon(icon, iconSize, color) {
   if (icon == null || icon === false) return null;
-  if ((0, import_react.isValidElement)(icon)) return icon;
-  if (typeof icon === "function") {
-    return (0, import_react.createElement)(icon, {
-      size: iconSize
+  if ((0, import_react.isValidElement)(icon)) {
+    return color == null || icon.props.color != null ? icon : (0, import_react.cloneElement)(icon, {
+      color
     });
   }
+  const iconProps = {
+    size: iconSize,
+    ...(color == null ? void 0 : {
+      color
+    })
+  };
+  if (typeof icon === "function") {
+    return (0, import_react.createElement)(icon, iconProps);
+  }
   if (typeof icon === "object" && icon !== null && "$$typeof" in icon) {
-    return (0, import_react.createElement)(icon, {
-      size: iconSize
-    });
+    return (0, import_react.createElement)(icon, iconProps);
   }
   return icon;
 }
+function NativeButtonIcon({
+  icon,
+  size,
+  color
+}) {
+  const theme = (0, import_tamagui.useTheme)();
+  const ink = (0, import_tamagui.getVariableValue)(typeof color === "string" && color.startsWith("$") ? theme[color.slice(1)] ?? theme.color : color ?? theme.color);
+  return normalizeButtonIcon(icon, size, typeof ink === "string" ? ink : void 0);
+}
 const getButtonSized = (val, {
   props
 }) => {
@@ -204,7 +217,6 @@ function Button({
   tabIndex,
   icon,
   iconAfter,
-  compact,
   selected,
   nested = false,
   circular,
@@ -268,35 +280,35 @@ function Button({
     isValid: s.isValid ?? true
   }));
   const intent = accent && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
+  const sizeProp = props.size;
   const {
     knobProps,
     control,
     text,
     disabledState
-  } = (0, import_theme.useResolvedKnobs)({
+  } = (0, import_theme2.useResolvedKnobs)({
     intent,
-    component: "Button"
+    component: "Button",
+    size: typeof sizeProp === "number" ? void 0 : sizeProp
   });
   const parentScopeTheme = (0, import_tamagui.useTheme)();
   const pageOutlineColor = parentScopeTheme.outlineColor?.val;
-  const hostAccentInk = (0, import_theme.useAccentOnSurface)();
+  const hostAccentInk = (0, import_theme2.useAccentOnSurface)();
   const grouped = (0, import_groupContext.useControlGrouped)();
-  const sizeProp = props.size;
-  const resolvedSize = sizeProp ?? knobProps.sizeToken;
-  const densityTight = compact !== void 0 ? compact === true : knobProps.density === "compact";
-  const recipe = resolveButtonSizeRecipe(resolvedSize, buttonDensityFamily(recipeFamily, densityTight));
+  const resolvedSize = typeof sizeProp === "number" ? sizeProp : knobProps.sizeToken;
+  const touch = (0, import_theme2.useTouchSurface)();
+  const recipe = resolveButtonSizeRecipe(resolvedSize, recipeFamily, touch);
   const padX = recipe.paddingHorizontal;
   const radiusToken = knobProps.borderRadius.borderRadius;
-  const radiusStop = typeof radiusToken === "string" ? import_theme.SIZE_RECIPE_RADIUS_TOKEN_TO_STOP[radiusToken] : void 0;
-  const paintedRadius = (0, import_theme.resolveControlRadius)(recipe, radiusStop ?? "medium");
+  const radiusStop = typeof radiusToken === "string" ? import_theme2.SIZE_RECIPE_RADIUS_TOKEN_TO_STOP[radiusToken] : void 0;
+  const paintedRadius = (0, import_theme2.resolveControlRadius)(recipe, radiusStop ?? "medium");
   const innerGap = paintedRadius.gap;
+  const boneHeight = nested ? knobProps.nestedControl.px : recipe.height;
   if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      ...knobProps.borderRadius,
-      backgroundColor: "$gray5",
-      height: nested ? knobProps.nestedControl.px : recipe.height,
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+      variant: "rounded",
+      height: boneHeight,
       width: 120,
-      opacity: 0.5,
       ...props
     });
   }
@@ -320,9 +332,9 @@ function Button({
   };
   const activeThemeName = theme ?? intent;
   const hostScoped = fragment => Object.fromEntries(Object.entries(fragment).map(([key, value]) => [key, typeof value === "string" && value.startsWith("$") ? parentScopeTheme[value.slice(1)]?.val ?? value : value]));
-  const washOnHost = Boolean(isDisabled && activeThemeName && import_theme.solidPaletteThemes.has(activeThemeName));
+  const washOnHost = Boolean(isDisabled && activeThemeName && import_theme2.solidPaletteThemes.has(activeThemeName));
   const disabledSurface = washOnHost ? hostScoped(disabledState.surfaceKnobProps) : disabledState.surfaceKnobProps;
-  const disabledText = washOnHost ? hostScoped(disabledState.textKnobProps) : activeThemeName && import_theme.solidButtonIntents.has(activeThemeName) && disabledState.textKnobProps.color ? {
+  const disabledText = washOnHost ? hostScoped(disabledState.textKnobProps) : activeThemeName && import_theme2.solidButtonIntents.has(activeThemeName) && disabledState.textKnobProps.color ? {
     ...disabledState.textKnobProps,
     color: "$color12"
   } : disabledState.textKnobProps;
@@ -343,8 +355,8 @@ function Button({
   }, []);
   const handlePressOut = (0, import_react.useCallback)(() => setPressing(false), []);
   const textColor = isLow ? pressing ? textAccentLow.press : hovering ? textAccentLow.hover : textAccentLow.default : isMedium ? import_colorRamps.formCommonColors.text : void 0;
-  const outlinedIntentInk = Boolean(outlined && activeThemeName && import_theme.solidButtonIntents.has(activeThemeName));
-  const outlinedOnHost = Boolean(outlined && activeThemeName && import_theme.solidPaletteThemes.has(activeThemeName));
+  const outlinedIntentInk = Boolean(outlined && activeThemeName && import_theme2.solidButtonIntents.has(activeThemeName));
+  const outlinedOnHost = Boolean(outlined && activeThemeName && import_theme2.solidPaletteThemes.has(activeThemeName));
   const outlinedInk = outlinedOnHost ? hostAccentInk : outlinedIntentInk ? "$color11" : void 0;
   const resolvedRole = actionRole ?? (accent ? "primary" : void 0);
   const labelFromParts = children == null && verb != null ? (0, import_actionLabel.formatActionLabel)({
@@ -376,21 +388,39 @@ function Button({
     } : void 0),
     ...(isDisabled ? disabledText : void 0),
     fontWeight: knobProps.body.fontWeight,
-    transition: knobProps.transition,
+    ...(0, import_theme.transitionProps)(knobProps.motion.control),
     children: label
   }, key);
   const flattenedChildren = Array.isArray(resolvedChildren) ? import_react.Children.toArray(resolvedChildren) : null;
-  const textContent = loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
-    size: "small"
-  }) : isBareTextChild(resolvedChildren) ? renderLabelText(resolvedChildren) : flattenedChildren?.some(isBareTextChild) ? wrapBareTextChildren(flattenedChildren, renderLabelText) : resolvedChildren;
+  const labelContent = isBareTextChild(resolvedChildren) ? renderLabelText(resolvedChildren) : flattenedChildren?.some(isBareTextChild) ? wrapBareTextChildren(flattenedChildren, renderLabelText) : resolvedChildren;
+  const textContent = loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-button-loading": "",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+      variant: "rounded",
+      height: boneHeight,
+      width: boneHeight * 2,
+      "aria-hidden": true
+    })
+  }) : labelContent;
   const hasIcon = icon || iconAfter;
+  const nativeIconColor = props.color ?? (isDisabled ? disabledText.color : void 0) ?? (textColor ? outlinedOnHost ? hostScoped({
+    color: textColor
+  }).color : textColor : outlinedInk) ?? "$color";
   const iconElement = icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
-    children: normalizeButtonIcon(icon, iconSize)
+    children: import_tamagui.isWeb ? normalizeButtonIcon(icon, iconSize) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
+      icon,
+      size: iconSize,
+      color: nativeIconColor
+    })
   }) : null;
   const iconAfterElement = iconAfter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
-    children: normalizeButtonIcon(iconAfter, iconSize)
+    children: import_tamagui.isWeb ? normalizeButtonIcon(iconAfter, iconSize) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
+      icon: iconAfter,
+      size: iconSize,
+      color: nativeIconColor
+    })
   }) : null;
   const explainedDisable = Boolean(disabledReason?.trim()) && Boolean(isDisabled);
   const generatedId = (0, import_react.useId)();
@@ -398,17 +428,18 @@ function Button({
   const isCircular = Boolean(circular);
   const circularTokenPx = sizeTokenPx(resolvedSize);
   const visualPx = nested ? knobProps.nestedControl.px : recipe.height;
-  const circularPressFloor = isCircular && circularTokenPx < import_theme.MIN_PRESS_TARGET ? {
-    width: import_theme.MIN_PRESS_TARGET,
-    height: import_theme.MIN_PRESS_TARGET,
-    minWidth: import_theme.MIN_PRESS_TARGET,
-    minHeight: import_theme.MIN_PRESS_TARGET,
-    maxWidth: import_theme.MIN_PRESS_TARGET,
-    maxHeight: import_theme.MIN_PRESS_TARGET,
-    hitSlop: (0, import_theme.pressTargetHitSlop)(circularTokenPx)
+  const circularPressFloor = isCircular && touch && typeof sizeProp !== "number" && circularTokenPx < import_theme2.MIN_PRESS_TARGET ? {
+    width: import_theme2.MIN_PRESS_TARGET,
+    height: import_theme2.MIN_PRESS_TARGET,
+    minWidth: import_theme2.MIN_PRESS_TARGET,
+    minHeight: import_theme2.MIN_PRESS_TARGET,
+    maxWidth: import_theme2.MIN_PRESS_TARGET,
+    maxHeight: import_theme2.MIN_PRESS_TARGET,
+    hitSlop: (0, import_theme2.pressTargetHitSlop)(circularTokenPx)
   } : isCircular ? {
-    minWidth: import_theme.MIN_PRESS_TARGET,
-    minHeight: import_theme.MIN_PRESS_TARGET
+    minWidth: circularTokenPx,
+    minHeight: circularTokenPx,
+    ...(0, import_pressSlopProps.pressSlopProps)(circularTokenPx, true)
   } : void 0;
   const nestedFloor = nested ? {
     height: visualPx,
@@ -429,8 +460,9 @@ function Button({
   const restFill = selectedFill ? outlined ? "$background" : "$backgroundPress" : void 0;
   const buttonElement = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ButtonFrame, {
     disabled: explainedDisable ? false : isDisabled || false,
+    "aria-busy": loading || void 0,
     opacity: 1,
-    transition: knobProps.transition,
+    ...(0, import_theme.transitionProps)(knobProps.motion.control, ["borderRadius", "borderWidth"]),
     ...knobProps.borderRadius,
     ...(radiusStop === "medium" || radiusStop == null ? {
       borderRadius: paintedRadius.radius
@@ -495,7 +527,7 @@ function Button({
     focusStyle: {
       outlineWidth: 0
     },
-    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+    focusVisibleStyle: (0, import_theme2.ensureFocusVisibleRing)({
       ...control.focusVisibleKnobProps,
       ...(pageOutlineColor ? {
         outlineColor: pageOutlineColor
@@ -509,6 +541,9 @@ function Button({
       tabIndex
     } : void 0),
     gap: hasIcon && (resolvedChildren || textContent) ? innerGap : void 0,
+    ...(formFromHook && !grouped ? {
+      alignSelf: "flex-start"
+    } : void 0),
     ...props,
     ...passthroughSizeProps,
     ...sizeRecipeEscapeOverride,
@@ -526,7 +561,7 @@ function Button({
         backgroundColor: selectedPressFill
       }
     } : void 0),
-    ...(isCircular && !grouped ? (0, import_theme.radiusClassProps)("R-IDENTITY", "circular Button") : void 0),
+    ...(isCircular && !grouped ? (0, import_theme2.radiusClassProps)("R-IDENTITY", "circular Button") : void 0),
     ...(explainedDisable ? {
       // No `title`: hover-only reveals are banned on disabled controls
       // (DG-OVL-05) — the reason renders as visible adjacent text.
@@ -558,8 +593,8 @@ function Button({
     ...(resolvedRole ? {
       "data-mp-action-role": resolvedRole
     } : void 0),
-    "data-mp-button-height": String(nested ? visualPx : isCircular ? Math.max(circularTokenPx, import_theme.MIN_PRESS_TARGET) : visualPx),
-    "data-mp-density": densityTight ? "compact" : "comfortable",
+    "data-mp-button-height": String(nested ? visualPx : isCircular ? touch && typeof sizeProp !== "number" ? Math.max(circularTokenPx, import_theme2.MIN_PRESS_TARGET) : circularTokenPx : visualPx),
+    "data-size-token": knobProps.sizeToken,
     ...(selectedFill ? {
       "aria-pressed": true,
       "data-mp-selected": "true"

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

@@ -26,20 +26,20 @@ var Button_exports = {};
 __export(Button_exports, {
   Button: () => Button,
   ButtonFrame: () => ButtonFrame,
-  buttonDensityFamily: () => buttonDensityFamily,
   buttonSizeRecipes: () => buttonSizeRecipes,
   resolveButtonSizeRecipe: () => resolveButtonSizeRecipe
 });
 module.exports = __toCommonJS(Button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
 var import_pressSlopProps = require("../shared/pressSlopProps.native.js");
 var import_react = require("react");
-var import_theme = require("@multiplatform.one/theme");
+var import_theme2 = require("@multiplatform.one/theme");
 var import_get_token = require("@tamagui/get-token");
 var import_submissionController = require("../Form/submissionController.native.js");
 var import_utils = require("../shared/utils.native.js");
 var import_tamagui = require("tamagui");
-var import_Spinner = require("../Spinner");
+var import_Skeleton = require("../Skeleton/index.native.js");
 var import_react_store = require("@tanstack/react-store");
 var import_stacks = require("@tamagui/stacks");
 var import_actionLabel = require("../actionLabel.native.js");
@@ -51,41 +51,57 @@ function _type_of(obj) {
 
   return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-var buttonSizeRecipes = import_theme.recipeFamilies.control.recipes;
+var buttonSizeRecipes = import_theme2.recipeFamilies.control.recipes;
 function resolveButtonSizeRecipe(size) {
-  var family = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "control";
+  var family = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "control",
+    touch = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
   if (typeof size === "number") {
     var _recipeFamilies_family;
-    return (0, import_theme.sizeRecipeFromHeight)(size, (_recipeFamilies_family = import_theme.recipeFamilies[family]) === null || _recipeFamilies_family === void 0 ? void 0 : _recipeFamilies_family.ratios);
+    return (0, import_theme2.sizeRecipeFromHeight)(size, (_recipeFamilies_family = import_theme2.recipeFamilies[family]) === null || _recipeFamilies_family === void 0 ? void 0 : _recipeFamilies_family.ratios);
   }
-  return (0, import_theme.sizeRecipeForToken)(size == null ? "$true" : String(size), {
-    family
+  return (0, import_theme2.sizeRecipeForToken)(size == null ? "$true" : String(size), {
+    family,
+    touch
   });
 }
-function buttonDensityFamily(family, densityTight) {
-  return densityTight ? "controlCompact" : family;
-}
 function sizeTokenPx(size) {
   if (typeof size === "number") return size;
-  if (size == null) return import_theme.MIN_PRESS_TARGET;
+  if (size == null) return import_theme2.MIN_PRESS_TARGET;
   var resolved = (0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(size));
-  return typeof resolved === "number" && Number.isFinite(resolved) ? resolved : import_theme.MIN_PRESS_TARGET;
+  return typeof resolved === "number" && Number.isFinite(resolved) ? resolved : import_theme2.MIN_PRESS_TARGET;
 }
-function normalizeButtonIcon(icon, iconSize) {
+function normalizeButtonIcon(icon, iconSize, color) {
   if (icon == null || icon === false) return null;
-  if (/* @__PURE__ */(0, import_react.isValidElement)(icon)) return icon;
-  if (typeof icon === "function") {
-    return /* @__PURE__ */(0, import_react.createElement)(icon, {
-      size: iconSize
+  if (/* @__PURE__ */(0, import_react.isValidElement)(icon)) {
+    return color == null || icon.props.color != null ? icon : /* @__PURE__ */(0, import_react.cloneElement)(icon, {
+      color
     });
   }
+  var iconProps = {
+    size: iconSize,
+    ...(color == null ? void 0 : {
+      color
+    })
+  };
+  if (typeof icon === "function") {
+    return /* @__PURE__ */(0, import_react.createElement)(icon, iconProps);
+  }
   if ((typeof icon === "undefined" ? "undefined" : _type_of(icon)) === "object" && icon !== null && "$$typeof" in icon) {
-    return /* @__PURE__ */(0, import_react.createElement)(icon, {
-      size: iconSize
-    });
+    return /* @__PURE__ */(0, import_react.createElement)(icon, iconProps);
   }
   return icon;
 }
+function NativeButtonIcon(param) {
+  var {
+    icon,
+    size,
+    color
+  } = param;
+  var _theme_color_slice;
+  var theme = (0, import_tamagui.useTheme)();
+  var ink = (0, import_tamagui.getVariableValue)(typeof color === "string" && color.startsWith("$") ? (_theme_color_slice = theme[color.slice(1)]) !== null && _theme_color_slice !== void 0 ? _theme_color_slice : theme.color : color !== null && color !== void 0 ? color : theme.color);
+  return normalizeButtonIcon(icon, size, typeof ink === "string" ? ink : void 0);
+}
 var getButtonSized = function getButtonSized2(val, param) {
   var {
     props
@@ -236,7 +252,6 @@ function Button(param) {
     tabIndex,
     icon,
     iconAfter,
-    compact,
     selected,
     nested = false,
     circular,
@@ -252,7 +267,7 @@ function Button(param) {
     paddingHorizontal: paddingHorizontalProp,
     ...props
   } = param;
-  var _ref, _props_id;
+  var _ref, _ref1, _ref2, _props_color, _props_id;
   var _parentScopeTheme_outlineColor;
   var {
     resolvedForm: formFromHook
@@ -305,35 +320,35 @@ function Button(param) {
     };
   });
   var intent = accent && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
+  var sizeProp = props.size;
   var {
     knobProps,
     control,
     text,
     disabledState
-  } = (0, import_theme.useResolvedKnobs)({
+  } = (0, import_theme2.useResolvedKnobs)({
     intent,
-    component: "Button"
+    component: "Button",
+    size: typeof sizeProp === "number" ? void 0 : sizeProp
   });
   var parentScopeTheme = (0, import_tamagui.useTheme)();
   var pageOutlineColor = (_parentScopeTheme_outlineColor = parentScopeTheme.outlineColor) === null || _parentScopeTheme_outlineColor === void 0 ? void 0 : _parentScopeTheme_outlineColor.val;
-  var hostAccentInk = (0, import_theme.useAccentOnSurface)();
+  var hostAccentInk = (0, import_theme2.useAccentOnSurface)();
   var grouped = (0, import_groupContext.useControlGrouped)();
-  var sizeProp = props.size;
-  var resolvedSize = sizeProp !== null && sizeProp !== void 0 ? sizeProp : knobProps.sizeToken;
-  var densityTight = compact !== void 0 ? compact === true : knobProps.density === "compact";
-  var recipe = resolveButtonSizeRecipe(resolvedSize, buttonDensityFamily(recipeFamily, densityTight));
+  var resolvedSize = typeof sizeProp === "number" ? sizeProp : knobProps.sizeToken;
+  var touch = (0, import_theme2.useTouchSurface)();
+  var recipe = resolveButtonSizeRecipe(resolvedSize, recipeFamily, touch);
   var padX = recipe.paddingHorizontal;
   var radiusToken = knobProps.borderRadius.borderRadius;
-  var radiusStop = typeof radiusToken === "string" ? import_theme.SIZE_RECIPE_RADIUS_TOKEN_TO_STOP[radiusToken] : void 0;
-  var paintedRadius = (0, import_theme.resolveControlRadius)(recipe, radiusStop !== null && radiusStop !== void 0 ? radiusStop : "medium");
+  var radiusStop = typeof radiusToken === "string" ? import_theme2.SIZE_RECIPE_RADIUS_TOKEN_TO_STOP[radiusToken] : void 0;
+  var paintedRadius = (0, import_theme2.resolveControlRadius)(recipe, radiusStop !== null && radiusStop !== void 0 ? radiusStop : "medium");
   var innerGap = paintedRadius.gap;
+  var boneHeight = nested ? knobProps.nestedControl.px : recipe.height;
   if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      ...knobProps.borderRadius,
-      backgroundColor: "$gray5",
-      height: nested ? knobProps.nestedControl.px : recipe.height,
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+      variant: "rounded",
+      height: boneHeight,
       width: 120,
-      opacity: 0.5,
       ...props
     });
   }
@@ -360,14 +375,14 @@ function Button(param) {
   var hostScoped = function hostScoped2(fragment) {
     return Object.fromEntries(Object.entries(fragment).map(function (param2) {
       var [key, value] = param2;
-      var _ref2;
+      var _ref3;
       var _parentScopeTheme_value_slice;
-      return [key, typeof value === "string" && value.startsWith("$") ? (_ref2 = (_parentScopeTheme_value_slice = parentScopeTheme[value.slice(1)]) === null || _parentScopeTheme_value_slice === void 0 ? void 0 : _parentScopeTheme_value_slice.val) !== null && _ref2 !== void 0 ? _ref2 : value : value];
+      return [key, typeof value === "string" && value.startsWith("$") ? (_ref3 = (_parentScopeTheme_value_slice = parentScopeTheme[value.slice(1)]) === null || _parentScopeTheme_value_slice === void 0 ? void 0 : _parentScopeTheme_value_slice.val) !== null && _ref3 !== void 0 ? _ref3 : value : value];
     }));
   };
-  var washOnHost = Boolean(isDisabled && activeThemeName && import_theme.solidPaletteThemes.has(activeThemeName));
+  var washOnHost = Boolean(isDisabled && activeThemeName && import_theme2.solidPaletteThemes.has(activeThemeName));
   var disabledSurface = washOnHost ? hostScoped(disabledState.surfaceKnobProps) : disabledState.surfaceKnobProps;
-  var disabledText = washOnHost ? hostScoped(disabledState.textKnobProps) : activeThemeName && import_theme.solidButtonIntents.has(activeThemeName) && disabledState.textKnobProps.color ? {
+  var disabledText = washOnHost ? hostScoped(disabledState.textKnobProps) : activeThemeName && import_theme2.solidButtonIntents.has(activeThemeName) && disabledState.textKnobProps.color ? {
     ...disabledState.textKnobProps,
     color: "$color12"
   } : disabledState.textKnobProps;
@@ -392,8 +407,8 @@ function Button(param) {
     return setPressing(false);
   }, []);
   var textColor = isLow ? pressing ? textAccentLow.press : hovering ? textAccentLow.hover : textAccentLow.default : isMedium ? import_colorRamps.formCommonColors.text : void 0;
-  var outlinedIntentInk = Boolean(outlined && activeThemeName && import_theme.solidButtonIntents.has(activeThemeName));
-  var outlinedOnHost = Boolean(outlined && activeThemeName && import_theme.solidPaletteThemes.has(activeThemeName));
+  var outlinedIntentInk = Boolean(outlined && activeThemeName && import_theme2.solidButtonIntents.has(activeThemeName));
+  var outlinedOnHost = Boolean(outlined && activeThemeName && import_theme2.solidPaletteThemes.has(activeThemeName));
   var outlinedInk = outlinedOnHost ? hostAccentInk : outlinedIntentInk ? "$color11" : void 0;
   var resolvedRole = actionRole !== null && actionRole !== void 0 ? actionRole : accent ? "primary" : void 0;
   var labelFromParts = children == null && verb != null ? (0, import_actionLabel.formatActionLabel)({
@@ -432,22 +447,40 @@ function Button(param) {
       // variant otherwise leaks 500/600 over it (MPO-125: a literal 400
       // here pinned the label and swallowed the fontWeight knob).
       fontWeight: knobProps.body.fontWeight,
-      transition: knobProps.transition,
+      ...(0, import_theme.transitionProps)(knobProps.motion.control),
       children: label
     }, key);
   };
   var flattenedChildren = Array.isArray(resolvedChildren) ? import_react.Children.toArray(resolvedChildren) : null;
-  var textContent = loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
-    size: "small"
-  }) : isBareTextChild(resolvedChildren) ? renderLabelText(resolvedChildren) : (flattenedChildren === null || flattenedChildren === void 0 ? void 0 : flattenedChildren.some(isBareTextChild)) ? wrapBareTextChildren(flattenedChildren, renderLabelText) : resolvedChildren;
+  var labelContent = isBareTextChild(resolvedChildren) ? renderLabelText(resolvedChildren) : (flattenedChildren === null || flattenedChildren === void 0 ? void 0 : flattenedChildren.some(isBareTextChild)) ? wrapBareTextChildren(flattenedChildren, renderLabelText) : resolvedChildren;
+  var textContent = loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-button-loading": "",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+      variant: "rounded",
+      height: boneHeight,
+      width: boneHeight * 2,
+      "aria-hidden": true
+    })
+  }) : labelContent;
   var hasIcon = icon || iconAfter;
+  var nativeIconColor = (_ref1 = (_ref2 = (_props_color = props.color) !== null && _props_color !== void 0 ? _props_color : isDisabled ? disabledText.color : void 0) !== null && _ref2 !== void 0 ? _ref2 : textColor ? outlinedOnHost ? hostScoped({
+    color: textColor
+  }).color : textColor : outlinedInk) !== null && _ref1 !== void 0 ? _ref1 : "$color";
   var iconElement = icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
-    children: normalizeButtonIcon(icon, iconSize)
+    children: import_tamagui.isWeb ? normalizeButtonIcon(icon, iconSize) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
+      icon,
+      size: iconSize,
+      color: nativeIconColor
+    })
   }) : null;
   var iconAfterElement = iconAfter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
-    children: normalizeButtonIcon(iconAfter, iconSize)
+    children: import_tamagui.isWeb ? normalizeButtonIcon(iconAfter, iconSize) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
+      icon: iconAfter,
+      size: iconSize,
+      color: nativeIconColor
+    })
   }) : null;
   var explainedDisable = Boolean(disabledReason === null || disabledReason === void 0 ? void 0 : disabledReason.trim()) && Boolean(isDisabled);
   var generatedId = (0, import_react.useId)();
@@ -455,17 +488,18 @@ function Button(param) {
   var isCircular = Boolean(circular);
   var circularTokenPx = sizeTokenPx(resolvedSize);
   var visualPx = nested ? knobProps.nestedControl.px : recipe.height;
-  var circularPressFloor = isCircular && circularTokenPx < import_theme.MIN_PRESS_TARGET ? {
-    width: import_theme.MIN_PRESS_TARGET,
-    height: import_theme.MIN_PRESS_TARGET,
-    minWidth: import_theme.MIN_PRESS_TARGET,
-    minHeight: import_theme.MIN_PRESS_TARGET,
-    maxWidth: import_theme.MIN_PRESS_TARGET,
-    maxHeight: import_theme.MIN_PRESS_TARGET,
-    hitSlop: (0, import_theme.pressTargetHitSlop)(circularTokenPx)
+  var circularPressFloor = isCircular && touch && typeof sizeProp !== "number" && circularTokenPx < import_theme2.MIN_PRESS_TARGET ? {
+    width: import_theme2.MIN_PRESS_TARGET,
+    height: import_theme2.MIN_PRESS_TARGET,
+    minWidth: import_theme2.MIN_PRESS_TARGET,
+    minHeight: import_theme2.MIN_PRESS_TARGET,
+    maxWidth: import_theme2.MIN_PRESS_TARGET,
+    maxHeight: import_theme2.MIN_PRESS_TARGET,
+    hitSlop: (0, import_theme2.pressTargetHitSlop)(circularTokenPx)
   } : isCircular ? {
-    minWidth: import_theme.MIN_PRESS_TARGET,
-    minHeight: import_theme.MIN_PRESS_TARGET
+    minWidth: circularTokenPx,
+    minHeight: circularTokenPx,
+    ...(0, import_pressSlopProps.pressSlopProps)(circularTokenPx, true)
   } : void 0;
   var nestedFloor = nested ? {
     height: visualPx,
@@ -488,8 +522,9 @@ function Button(param) {
     // DG-ST-03: an explained disable is aria-disabled (focusable, press
     // swallowed in handlePress) instead of a natively disabled dead end.
     disabled: explainedDisable ? false : isDisabled || false,
+    "aria-busy": loading || void 0,
     opacity: 1,
-    transition: knobProps.transition,
+    ...(0, import_theme.transitionProps)(knobProps.motion.control, ["borderRadius", "borderWidth"]),
     ...knobProps.borderRadius,
     ...(radiusStop === "medium" || radiusStop == null ? {
       borderRadius: paintedRadius.radius
@@ -581,7 +616,7 @@ function Button(param) {
     // sub-themes derive a ring for their own inverted surfaces — invisible
     // on the page the ring actually draws on (measured 1.17:1 on the accent
     // pagination button).
-    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+    focusVisibleStyle: (0, import_theme2.ensureFocusVisibleRing)({
       ...control.focusVisibleKnobProps,
       ...(pageOutlineColor ? {
         outlineColor: pageOutlineColor
@@ -595,6 +630,11 @@ function Button(param) {
       tabIndex
     } : void 0),
     gap: hasIcon && (resolvedChildren || textContent) ? innerGap : void 0,
+    // Form actions hug their label (Clay: no stretch): a Button inside a
+    // Form never takes the column's full width. A consumer width wins.
+    ...(formFromHook && !grouped ? {
+      alignSelf: "flex-start"
+    } : void 0),
     // STD-EJECT-LAST: knob fragments and internal defaults (radius/size/
     // elevation/gap above) sit BEFORE the consumer spread so `{...props}`
     // stays the one styling eject. The spreads after it are not defaults:
@@ -621,7 +661,7 @@ function Button(param) {
         backgroundColor: selectedPressFill
       }
     } : void 0),
-    ...(isCircular && !grouped ? (0, import_theme.radiusClassProps)("R-IDENTITY", "circular Button") : void 0),
+    ...(isCircular && !grouped ? (0, import_theme2.radiusClassProps)("R-IDENTITY", "circular Button") : void 0),
     ...(explainedDisable ? {
       // No `title`: hover-only reveals are banned on disabled controls
       // (DG-OVL-05) — the reason renders as visible adjacent text.
@@ -653,8 +693,8 @@ function Button(param) {
     ...(resolvedRole ? {
       "data-mp-action-role": resolvedRole
     } : void 0),
-    "data-mp-button-height": String(nested ? visualPx : isCircular ? Math.max(circularTokenPx, import_theme.MIN_PRESS_TARGET) : visualPx),
-    "data-mp-density": densityTight ? "compact" : "comfortable",
+    "data-mp-button-height": String(nested ? visualPx : isCircular ? touch && typeof sizeProp !== "number" ? Math.max(circularTokenPx, import_theme2.MIN_PRESS_TARGET) : circularTokenPx : visualPx),
+    "data-size-token": knobProps.sizeToken,
     ...(selectedFill ? {
       "aria-pressed": true,
       "data-mp-selected": "true"